やっていそうで、なかなかやっている人がいない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の背景色は変更できますので、ぜひお試しあれ!
関連記事

レスポンシブで使いやすいWordPressテーマTwenty Fourteenのヘッダー部分に、SNSアイコン画像を貼り付けるカスタマイズを紹介します。

Twenty Fourteenのトップページをカスタマイズし、アイキャッチ画像と記事タイトルの一覧にしスッキリとレイアウトにする方法を紹介します。

Twenty Fourteenはデフォルト状態ではメインコンテンツ部分が若干狭いので、余白サイズを変更し横幅を広げるカスタマイズを紹介します。