Suburbia

最終更新日:2015-12-11

WS001588

テーマの解説(英語) Suburbia — WordPress.com
デモ(英語) Suburbia Demo
使用例 Suburbia | Pearltrees
更新情報(英語) New Themes- Splendio and Suburbia — Blog — WordPress.com
〃(日本語) 新テーマ: Splendio と Suburbia — ブログ — WordPress.com
レンタルサーバ等にインストールして使うタイプの WordPress 用テーマの解説等 以下のページのリンク先よりダウンロードすることができます。

Suburbia Theme — WordPress Themes for Blogs at WordPress.com

制作者 

テーマ設定のバリエーション

5つのウィジェットエリアがあります。

WS001584

1つのメニューエリアがあります。

WS001585

投稿記事にアイキャッチ画像を設定し、

wordpresscomsuburbia01

「この投稿を先頭に固定表示」にチェックを入れると、

wordpresscomsubrbia01

設定した投稿記事がフロントページの先頭へ移動し、幅が通常の投稿記事の2倍になります。

WS001586

ヘッダー画像を変更/削除することができます。

WS001587

背景画像を変更することができます。

suburbia01

CSS編集のバリエーション

ウィジェットに枠をつける

以下のCSSを追加すると

div[id*=categories] h3.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
margin:0;
padding:10px 0 14px;
}

#wrapper div[id*=categories] {
padding:0;
}

div[id*=categories] {
border:5px solid #CCC;
border-radius:5px;
}

div[id*=categories] ul li {
list-style:none;
}

div[id*=categories] ul {
padding:5px 7px 12px;
}

div[id*=categories] ul > li {
border-bottom:1px dotted gray;
line-height:3;
}

div[id*=categories] ul > li > ul li {
border-bottom:none;
line-height:2;
}

div[id*=recent-post] h3.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
margin:0;
padding:10px 0 14px;
}

#wrapper div[id*=recent-post] {
padding:0;
}

div[id*=recent-post] {
border:5px solid #CCC;
border-radius:5px;
}

div[id*=recent-post] ul li {
list-style:none;
}

div[id*=recent-post] ul {
padding:5px 7px 12px;
}

div[id*=recent-post] ul > li {
border-bottom:1px dotted gray;
line-height:1.5;
padding:10px 0;
}

div[id*=recent-comments] h3.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
margin:0 0 10px;
padding:10px 0 14px;
}

#wrapper div[id*=recent-comments] {
padding:0;
}

div[id*=recent-comments] {
border:5px solid #CCC;
border-radius:5px;
}

div[id*=recent-comments] ul li {
list-style:none;
}

div[id*=recent-comments] ul {
padding:5px 7px 12px;
}

div[id*=recent-comments] ul > li {
border-bottom:1px dotted gray;
line-height:2;
}

div[id*=archives] h3.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
margin:0;
padding:10px 0 14px;
}

#wrapper div[id*=archives] {
padding:0;
}

div[id*=archives] {
border:5px solid #CCC;
border-radius:5px;
}

div[id*=archives] ul li {
list-style:none;
}

div[id*=archives] ul {
padding:5px 7px 12px;
}

div[id*=archives] ul > li {
border-bottom:1px dotted gray;
line-height:2;
}

div[id*=meta] h3.widget-title {
background-color:#CCC;
text-align:center;
font-size:14px;
color:#555;
border:none;
margin:0;
padding:10px 0 14px;
}

#wrapper div[id*=meta] {
padding:0;
}

div[id*=meta] {
border:5px solid #CCC;
border-radius:5px;
}

div[id*=meta] ul li {
list-style:none;
}

div[id*=meta] ul {
padding:5px 7px;
}

div[id*=meta] ul > li {
line-height:1.7;
}

ウィジェットに枠がつきます。

suburbiawidget01

rect3015

suburbiawidget02

カテゴリーのボックス化


WordPress.com のテーマ「Suburbia」のカテゴリーウィジェットをボックス状にするためのCSS

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。