前回の記事:【TwentyTwelve】サイドバーのカスタマイズ
今回はウィジェットエリアのカスタマイズ。
ウィジェットエリアはサイドバーに表示されている「最近の投稿」「カテゴリー」「アーカイブ」等です。
今回も前回同様「style.css」をいじっていきます。
前回までのカスタマイズでこうなっている状態です↓
(1) 背景をカスタマイズ
デフォルトだと背景色が設定されていないので、背景に色をつけようと思います。
変更箇所は
style.css の 611行目あたり
1 2 3 4 5 6 7 8 | .widget-area .widget { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; margin-bottom: 48px; margin-bottom: 3.428571429rem; word-wrap: break-word; } |
ここです。
これを
1 2 3 4 5 6 7 8 9 10 11 | .widget-area .widget { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; margin-bottom: 48px; margin-bottom: 3.428571429rem; word-wrap: break-word; /* 以下を追加 */ background:#ffb6c1; /* 追加ここまで */ } |
こんな感じで変更。
背景色がつきました~(カラーネームbisque・#ffb6c1)
(2) 更に枠線をつけてみる
1 2 3 4 5 6 7 8 9 10 11 12 | .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; /* 追加ここまで */ } |
こうなります。rosybrown(#bc8f8f)で枠線をつけました。
(3) 余白を設定する
また前回と同じく枠と文字の隙間がないので
1 2 3 4 5 6 7 8 9 10 11 12 13 | .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; /* 追加ここまで */ } |
(4) ついでに角丸にしちゃう
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .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; /* 追加ここまで */ } |
(5) ウィジェットのタイトルをカスタム
style.css 619行目あたりの
1 2 3 4 | .widget-area .widget h3 { margin-bottom: 24px; margin-bottom: 1.714285714rem; } |
これを変更します。
背景を#333333(濃いグレー)、文字色をbisque(#ffb6c1)、余白を5pxにしたいので
1 2 3 4 5 6 7 8 9 | .widget-area .widget h3 { margin-bottom: 24px; margin-bottom: 1.714285714rem; /* 以下を追加 */ background-color:#333333; color:#ffe4c4; padding:5px; /* 追加ここまで */ } |