WordPressのテーマTwenty Seventeenでは、初期状態だとブログの背景が真っ白に表示されます。(設定変更で真っ黒にもできます。)
真っ白もシンプルでいいんですけど、ブログの背景を変えた方が他のブログとの違いを出せて良い場合もあります。
今回はフッターやヘッダー、グローバルメニューなどの背景色のカスタマイズ方法について書いていきたいと思います!
Contents
変更するファイル
コードを記入していくファイルは、style.cssです。事前に子テーマのstyle.cssを用意しておきましょう。
子テーマstyle.cssの格納場所:public_html/wp-content/themes/子テーマ
グローバルメニューの背景色を変更

グローバルメニューの色を変更したい場合は、以下のコードをstyle.cssに追記しましょう。
1 2 3 4 5 6 |
.navigation-top, .navigation-top .sub-menu, .navigation-top .toggled-on .menu { background-color:#3f3530; /* 好きな色を設定 */ } |
解説
- 1行目の.navigation-topを指定することで、上の画像の①で示したグローバルメニュー全体の背景色を変更することができます。
- 2行目の.navigation-top .sub-menuでは、上の画像の②で示したグローバルメニューのサブメニューの背景色を変更することができます。
- 3行目の.navigation-top .toggled-on .menuでは、スマートフォンで表示した場合のトグルメニューの背景色を変更することができます。
- 4行目のbackground-color:で背景色を指定していますので、好みの色に変更してください。
グローバルメニューの文字の色を変更するには
背景の色を暗くした場合は、文字が見えにくくなってしまいますので、合わせて文字の色も変更しましょう。
以下のコードをstyle.cssに追記すると、グローバルメニューの文字が白くなります。
1 2 3 4 5 6 7 |
.navigation-top a, .site-header .navigation-top .menu-scroll-down, .main-navigation .menu-toggle, .main-navigation .dropdown-toggle { color: #ffffff; /* 白色を設定 */ } |
解説
- 1行目の.navigation-top aを指定することで、パソコンで表示した場合のグローバルメニューの文字の色を変更することができます。
- 2行目の.site-header .navigation-top .menu-scroll-downを指定することで、パソコンで表示した場合、下にスクロールするための矢印の色を変更することができます。
- 3行目の.main-navigation .menu-toggleを指定することで、スマートフォンで表示した場合のトグルメニューの文字の色を変更することができます。
- 4行目の.main-navigation .dropdown-toggleを指定することで、スマートフォンで表示した時、トグルメニューのサブメニューを開くときに使う矢印の色を変更することができます。
- 6行目のcolor:で文字の色を白に設定しています。
※コレです↓

3行目から4行目まではスマートフォンの表示設定になります。
記事本文の背景色を変更

記事本文の背景色を変更したい場合は、以下のコードをstyle.cssに追記しましょう。
1 2 3 4 5 |
.post { background-color: #fff;/* 記事の背景色 */ border: solid 1px #d2b48c; } |
解説
- 1行目の.postを指定すると、記事本文に関する設定変更することができます。
- 3行目のbackground-colorで記事本文の背景色を設定しています。ここでは白を設定していますが、好みの色に設定してください。
- 4行目のborderで、記事本文とブログ背景の間に境界線を引いており、色を指定しています。
サイトトップ画像の背景色を変更

サイトトップ画像の背景色を変更することもできます。多くの人は、トップ画像を設定していると思いますので、不要だと思いますが、一応ご紹介です。
サイトトップ画像の背景色を変更するは、以下のコードをstyle.cssに追記しましょう。
1 2 3 4 |
.site-header { background-color: #ffffe0 } |
解説
- 1行目の.site-headerを指定すると、サイトトップ画像部分の設定を変更することができます。
- 3行目のbackground-colorで背景の色を設定しています。
タイトルや記事本文の周りの部分の背景色を変更

タイトル、記事本文、グローバルメニュー、フッター以外のブログ全体の背景部分について色を変更するには、以下のコードをstyle.cssに追記しましょう。
サイドバーの色も変わりますよ!
1 2 3 4 |
.site-content-contain { background-color: #ffffe0; } |
解説
- 1行目の.site-content-containを指定すると、ブログ全体の背景部分の設定を変更することができます。
- 3行目のbackground-colorで背景の色を設定していますので、好みの色に変更してみてください。
アイキャッチ画像を表示する部分の背景色を変更

アイキャッチ画像を表示する部分の左右の余白も背景色を設定できます。
以下のコードをstyle.cssに追記しましょう。
1 2 3 4 |
.single-featured-image-header { background-color: #ffffe0; } |
解説
- 1行目の.single-featured-image-headerを指定すると、アイキャッチ画像の左右の余白部分の色を設定することができます。
- 3行目のbackground-colorで背景の色を設定していますので、好みの色に指定してください。
フッターの背景色を変更

最後に、フッターの背景色の変更方法です。以下のコードをstyle.cssに追記しましょう。
1 2 3 4 5 |
.site-footer { background-color:#eee8aa; border-top: 1px solid #3f3530;/*上の線色*/ } |
解説
- 1行目の.site-footerを指定すると、フッター部分の設定を変更することができます。
- 3行目のbackground-colorで背景の色を設定しています。
- 4行目で、フッターの上の線(記事との境界)の色を変えています。
フッターの文字の色を変更するには
フッターの背景色を濃くした場合には、文字の色が見えなくなってしまいます。フッターの文字の色を変更したい場合は、以下のコードを追記してみてください。
1 2 3 4 5 6 7 8 9 10 |
.site-footer { color: #ffffff; } .site-footer h2.widget-title{ color: #ffffff; } .site-footer a { color: #ffffff; } |
解説
- 1行目から3行目で、フッターの文字の色を白くしています。
- 4行目から6行目で、ウィジットをフッターに表示した場合、タイトルを白くするように変更しています。
- 7行目から9行目で、フッターに表示されるリンクの色を白くしています。コピーライト表示をした場合などに有効です。
以上です!
ブログの背景色を設定するには、様々な部分をカスタマイズしないといけませんが、オリジナリティーを出すには重要かもしれません。
カスタマイズに苦労されている方は、参考にしてみてください。