Twenty Fourteenの背景色を変更する

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の背景色は変更できますので、ぜひお試しあれ!


関連記事

Twenty Fourteenの検索枠の背景色を変更 Twenty Fourteenの検索枠の色変更
Twenty Fourteenの検索枠の背景色変更のカスタマイズです。
WordPressのTwenty Fourteenをフォトログにカスタマイズ Twenty Fourteenをフォトログ的に使う
Twenty Fourteenのトップページに写真をきれいに並べてフォトログテーマ風にカスタマイズしました。写真ギャラリーとして使えます。
WordPressのTwenty FourteenにヘッダーにSNSアイコン画像を貼る Twenty FourteenのヘッダーにSNSアイコン設置
レスポンシブで使いやすいWordPressテーマTwenty Fourteenのヘッダー部分に、SNSアイコン画像を貼り付けるカスタマイズを紹介します。
Twenty Fourteenのトップページをアイキャッチ画像と記事タイトルの一覧にするカスタマイズ Twenty Fourteenのトップをタイトル一覧にする
Twenty Fourteenのトップページをカスタマイズし、アイキャッチ画像と記事タイトルの一覧にしスッキリとレイアウトにする方法を紹介します。
Twenty Fourteenのメインコンテンツの横幅を広げた Twenty Fourteenのコンテンツ部分横幅を広げる
Twenty Fourteenはデフォルト状態ではメインコンテンツ部分が若干狭いので、余白サイズを変更し横幅を広げるカスタマイズを紹介します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>