Seventeenでは、初期状態だとブログの背景が真っ白に表示されます。(設定変更で真っ黒にもできます。)真っ白もシンプルでいいんですけど、ブログの背景を変えた方が他のブログとの違いを出せて良い場合もあります。解説フッターの文字の色を変更するには解説スポンサーリンク変更するファイルコードを記入していくファイルは、style.cssです。事前に子テーマのstyle.cssを用意しておきましょう。子テーマstyle.cssの格納場所:public_html/wp-content/themes/子テーマグローバルメニューの背景色を変更グローバルメニューの色を変更したい場合は、以下のコードをstyle.cssに追記しましょう。*/}解説1行目の.navigation-topを指定することで、上の画像の1で示したグローバルメニュー全体の背景色を変更することができます。.sub-menuでは、上の画像の2で示したグローバルメニューのサブメニューの背景色を変更することができます。.menuでは、スマートフォンで表示した場合のトグルメニューの背景色を変更することができます。4行目のbackground-color:で背景色を指定していますので、好みの色に変更してください。グローバルメニューの文字の色を変更するには背景の色を暗くした場合は、文字が見えにくくなってしまいますので、合わせて文字の色も変更しましょう。以下のコードをstyle.cssに追記すると、グローバルメニューの文字が白くなります。aを指定することで、パソコンで表示した場合のグローバルメニューの文字の色を変更することができます。.menu-scroll-downを指定することで、パソコンで表示した場合、下にスクロールするための矢印の色を変更することができます。※コレです↓3行目から4行目まではスマートフォンの表示設定になります。.menu-toggleを指定することで、スマートフォンで表示した場合のトグルメニューの文字の色を変更することができます。.dropdown-toggleを指定することで、スマートフォンで表示した時、トグルメニューのサブメニューを開くときに使う矢印の色を変更することができます。6行目のcolor:で文字の色を白に設定しています。記事本文の背景色を変更したい場合は、以下のコードをstyle.cssに追記しましょう。#d2b48c;}解説1行目の.postを指定すると、記事本文に関する設定変更することができます。3行目のbackground-colorで記事本文の背景色を設定しています。ここでは白を設定していますが、好みの色に設定してください。4行目のborderで、記事本文とブログ背景の間に境界線を引いており、色を指定しています。サイトトップ画像の背景色を変更サイトトップ画像の背景色を変更することもできます。多くの人は、トップ画像を設定していると思いますので、不要だと思いますが、一応ご紹介です。サイトトップ画像の背景色を変更するは、以下のコードをstyle.cssに追記しましょう。#ffffe0}解説1行目の.site-headerを指定すると、サイトトップ画像部分の設定を変更することができます。3行目のbackground-colorで背景の色を設定しています。タイトルや記事本文の周りの部分の背景色を変更タイトル、記事本文、グローバルメニュー、フッター以外のブログ全体の背景部分について色を変更するには、以下のコードをstyle.cssに追記しましょう。#ffffe0;}解説1行目の.site-content-containを指定すると、ブログ全体の背景部分の設定を変更することができます。3行目のbackground-colorで背景の色を設定していますので、好みの色に変更してみてください。アイキャッチ画像を表示する部分の背景色を変更アイキャッチ画像を表示する部分の左右の余白も背景色を設定できます。以下のコードをstyle.cssに追記しましょう。#ffffe0;}解説1行目の.single-featured-image-headerを指定すると、アイキャッチ画像の左右の余白部分の色を設定することができます。3行目のbackground-colorで背景の色を設定していますので、好みの色に指定してください。最後に、フッターの背景色の変更方法です。以下のコードをstyle.cssに追記しましょう。#3f3530;/*上の線色*/}解説1行目の.site-footerを指定すると、フッター部分の設定を変更することができます。3行目のbackground-colorで背景の色を設定しています。4行目で、フッターの上の線(記事との境界)の色を変えています。フッターの文字の色を変更するにはフッターの背景色を濃くした場合には、文字の色が見えなくなってしまいます。フッターの文字の色を変更したい場合は、以下のコードを追記してみてください。#ffffff;}解説1行目から3行目で、フッターの文字の色を白くしています。4行目から6行目で、ウィジットをフッターに表示した場合、タイトルを白くするように変更しています。7行目から9行目で、フッターに表示されるリンクの色を白くしています。コピーライト表示をした場合などに有効です。以上です!ブログの背景色を設定するには、様々な部分をカスタマイズしないといけませんが、オリジナリティーを出すには重要かもしれません。カスタマイズに苦労されている方は、参考にしてみてください。育児・マイホームアイテムレビューブロガーだちたまこんにちは!「だちたま」です。2人(4才・0才)の4人家族。元エンジニアの夫に教えてもらいながら、WordPressのカスタマイズ・プログラミングについてお勉強中。