【TwentyTwelve】ウィジェット部分のプチカスタマイズ


前回の記事:【TwentyTwelve】サイドバーのカスタマイズ

今回はウィジェットエリアのカスタマイズ。
ウィジェットエリアはサイドバーに表示されている「最近の投稿」「カテゴリー」「アーカイブ」等です。

今回も前回同様「style.css」をいじっていきます。
前回までのカスタマイズでこうなっている状態です↓
sg-005

(1) 背景をカスタマイズ

デフォルトだと背景色が設定されていないので、背景に色をつけようと思います。

変更箇所は
style.css の 611行目あたり

.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
}

ここです。

これを

.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
/* 以下を追加 */
	background:#ffb6c1;
/* 追加ここまで */
}

こんな感じで変更。
sg-103
背景色がつきました~(カラーネームbisque・#ffb6c1)

(2) 更に枠線をつけてみる

.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
	background:#ffb6c1;
/* 以下を追加 */
	border:1px solid #bc8f8f;
/* 追加ここまで */
}

sg-104
こうなります。rosybrown(#bc8f8f)で枠線をつけました。

(3) 余白を設定する

また前回と同じく枠と文字の隙間がないので

.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
	background:#ffb6c1;
	border:1px solid #bc8f8f;
/* 以下を追加 */
	padding:10px;
/* 追加ここまで */
}

これで適度に隙間が空きました。
sg-107

(4) ついでに角丸にしちゃう

.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
	background:#ffb6c1;
	border:1px solid #bc8f8f;
	padding:10px;
/* 以下を追加 */
	border-radius:10px;
/* 追加ここまで */
}

sg-111
無事に丸まりました。

(5) ウィジェットのタイトルをカスタム

style.css 619行目あたりの

.widget-area .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

これを変更します。
背景を#333333(濃いグレー)、文字色をbisque(#ffb6c1)、余白を5pxにしたいので

.widget-area .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
/* 以下を追加 */
	background-color:#333333;
	color:#ffe4c4;
	padding:5px;
/* 追加ここまで */
}

これで
sg-201
一応タイトルっぽい感じは出たかなぁ・・・と。

【TwentyTwelve】サイドバーのカスタマイズ


前回の記事:「ヘッダ画像の登録」

今回はサイドバーをプチカスタマイズして行きます。
サイドバーは
sg-001x
これ。
レンタルブログやスクリプトによっていろんな呼び方がありますが、Wordpressで言えばウィジェットが表示されてる所ですね。Wordpressだとデフォルトでは右側にあります。右サイドバーとも言えるかも。

sg-001
ご覧の通りデフォルトだとシンプルすぎてサイド「バー」と言われても何のバー感もないな・・・

(1) 背景をカスタマイズ

デフォルトだと白の背景になっていますが、この背景色を変更してみようと思います。
テーマフォルダ内の「style.css」を使用するので、念のためstyle.cssのバックアップを作っておくと安心かも…
style.cssの変更は、ダッシュボード>外観>テーマ編集 からも行えますし、FTPソフトでダウンロードしてから変更してまたアップロード、という方法もあります。そのへんはお好みで。

変更箇所は
style.css の 533行目あたり

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}

ここです。

・例えばサイドバー全体に枠をつけたい時は

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
/* 以下を追加 */
	border:1px solid #000000;
/* 追加ここまで */
}

sg-002
黒・1px・直線の枠をつけてます。

・更に、サイドバー全体の背景色を設定したい時は

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	border:1px solid #000000;
/* 以下を追加 */
	background-color:#ffdab9;
/* 追加ここまで */
}

sg-003
カラーネームpeachpuff(#ffdab9)の背景色にしてます。

・枠と文字の隙間なさすぎ・・・と思ったら、更に更に

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	background-color:#ffdab9;
	border:1px solid #000000;
/* 以下を追加 */
	padding:10px;
/* 追加ここまで */
}

sg-004
こんな感じで適当に隙間が空きました。

(1) サイドバーの左右を変更する

デフォルトだとサイドバーは右側にありますが、これを左側にしたい場合は
TwentyTwelve サイドバー/記事コンテンツの左右を入れ替える超簡単な方法 | 初めてのワードプレス カスタマイズ
こちらを参考に、style.cssの1464行目あたりの

	.site-content {
		float: left;
		width: 65.104166667%;
	}


1473行目あたりの

	.widget-area {
		float: right;
		width: 26.041666667%;
	}

のfloat:left;とfloat:right;を入れ替えるだけ!
sg-005
無事に左右逆になりました~

次の記事:【TwentyTwelve】ウィジェット部分のプチカスタマイズ