Twenty Fourteenの背景色を変更する

やっていそうで、なかなかやっている人がいないTwenty Fourteenの背景色のカスタマイズ。
WordPressのデフォルトテーマのCSSは、毎度クセが強くただ背景色を変更したいだけなのに、かなりの時間を要します。
まぁ、当方がCSS初心者なだけですけれどもえぇそうですとも。
そんなわけで、Twenty Fourteenの背景色を変更するカスタマイズを紹介したいと思います。

style.cssの編集

今回は分かりやすく、あり得ない配色のサンプルですが、ご勘弁を。
各々の好きな色に変更してくださいね。

body {
	/* オリーブ */
	background: olive;
}
 
.site {
	/* 赤 */
	background-color: #ff0000;
}
 
.site-header {
	/* 青 */
	background-color: #0000ff;
}
 
.search-toggle,
.search-toggle.active {
	background-color: #d8ce4a;
}
 
.search-toggle:hover {
	background-color: #b6b6b6;
}
 
.site-content .entry-header {
	background-color: #bbb;
}
.site-content .entry-meta {
	background-color: #888;
}
.site-content .entry-content,
.site-content .entry-summary,
.page-content {
	background-color: #444;
}
 
#secondary {
	/* 緑 */
	background-color: #00ff00;
	border-top: 1px solid #00ff00;
}
 
#page:before{
	/* うすい緑 */
	background: lightgreen;
}
 
@media screen and (min-width: 783px) {
	.primary-navigation ul ul {
		background-color: black;
	}
 
	.primary-navigation li:hover > a,
	.primary-navigation li.focus > a {
		background-color: lightsalmon;
	}
 
	.primary-navigation ul ul a:hover,
	.primary-navigation ul ul li.focus > a {
		background-color: mediumslateblue;
	}
}

上記cssコードにて、一通りの背景色は変更できていると思います。
あとはサイトにあった配色に変更すればOKです。

感想

今回のカスタマイズは、実はかなり時間がかかりました。
たかが背景色の変更なのに．．．
サイトのイメージを決めるのに、背景色ってのはとても大事だと思います。
テキストを読むよりも、まず始めにデザインが訪問者の頭にインプットされます。
そのデザインの印象を決めるのに、背景色(配色)ってのがカギになってきます。

このコードを使用すれば、簡単にTwenty Fourteenの背景色は変更できますので、ぜひお試しあれ！