ワードプレステーマTwentyTwelveのサイドバーに背景色をつける方法です。

テーマTwentyTwelve サイドバーのウェジェットタイトルの変更方法はコチラ、テーマTwentyTwelve サイドバーのリンク色の変更はコチラを参照下さい。

当サイトもサイドバーに背景色をつけていますよね(笑　こんな感じにサイドバーに背景色をつけてみたいと思います。

変更方法は、至って簡単です!!それでは管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

’スタイルシート’の中から、次の箇所を見つけて下さい。

/* Sidebar */
.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 h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

この部分に追加/変更をするだけでOKです。

/* Sidebar */
.widget-area .widget {  /* ココです */
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	background: #f9f9f9;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
}
.widget-area .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

色はお好みでカラーコードを入力して下さい。とっても簡単ですよね♫

ちなみに、ウェジェットとウェジェットの間(上下間)が広すぎると感じる方は、コチラを変更すると距離が縮まります。

/* Sidebar */
.widget-area .widget {  /* ココです */
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	background: #f9f9f9;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
}
.widget-area .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

↓青の部分の数値を変更/あるいは削除して下さい。

/* Sidebar */
.widget-area .widget {  /* ココです */
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	background: #f9f9f9;
	margin-bottom: 0;
	margin-bottom: 0rem;
	word-wrap: break-word;
}
.widget-area .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

これで、ウェジェットエリア内の背景に色が付き、ついでに上下の間の余分な隙間がなくなったハズです。

だいぶサイトの見栄えが変わったのではないでしょうか☆

WordPressデザインブック　ステップバイステップ形式でマスターできる