Twenty Seventeen

WordPress Twenty Seventeen 背景色の変更方法を分かり易く説明します！

 
color_customize_top

WordPressのテーマTwenty Seventeenでは、初期状態だとブログの背景が真っ白に表示されます。（設定変更で真っ黒にもできます。）

真っ白もシンプルでいいんですけど、ブログの背景を変えた方が他のブログとの違いを出せて良い場合もあります。

今回はフッターやヘッダー、グローバルメニューなどの背景色のカスタマイズ方法について書いていきたいと思います！

変更するファイル

コードを記入していくファイルは、style.cssです。事前に子テーマのstyle.cssを用意しておきましょう。

子テーマstyle.cssの格納場所：public_html/wp-content/themes/子テーマ

 

グローバルメニューの背景色を変更

color_customize_01

グローバルメニューの色を変更したい場合は、以下のコードをstyle.cssに追記しましょう。

 

解説

  • １行目の.navigation-topを指定することで、上の画像の①で示したグローバルメニュー全体の背景色を変更することができます。
  • ２行目の.navigation-top .sub-menuでは、上の画像の②で示したグローバルメニューのサブメニューの背景色を変更することができます。
  • ３行目の.navigation-top .toggled-on .menuでは、スマートフォンで表示した場合のトグルメニューの背景色を変更することができます。
  • ４行目のbackground-color:で背景色を指定していますので、好みの色に変更してください。

 

グローバルメニューの文字の色を変更するには

背景の色を暗くした場合は、文字が見えにくくなってしまいますので、合わせて文字の色も変更しましょう。

以下のコードをstyle.cssに追記すると、グローバルメニューの文字が白くなります。

 

解説

  • １行目の.navigation-top aを指定することで、パソコンで表示した場合のグローバルメニューの文字の色を変更することができます。
  • ２行目の.site-header .navigation-top .menu-scroll-downを指定することで、パソコンで表示した場合、下にスクロールするための矢印の色を変更することができます。

    • ※コレです↓

    color_customize_02

    ３行目から４行目まではスマートフォンの表示設定になります。

  • ３行目の.main-navigation .menu-toggleを指定することで、スマートフォンで表示した場合のトグルメニューの文字の色を変更することができます。
  • ４行目の.main-navigation .dropdown-toggleを指定することで、スマートフォンで表示した時、トグルメニューのサブメニューを開くときに使う矢印の色を変更することができます。
  • ６行目のcolor:で文字の色を白に設定しています。

 

記事本文の背景色を変更

color_customize_03

記事本文の背景色を変更したい場合は、以下のコードをstyle.cssに追記しましょう。

 

解説

  • １行目の.postを指定すると、記事本文に関する設定変更することができます。
  • ３行目のbackground-colorで記事本文の背景色を設定しています。ここでは白を設定していますが、好みの色に設定してください。
  • ４行目のborderで、記事本文とブログ背景の間に境界線を引いており、色を指定しています。

 

サイトトップ画像の背景色を変更

color_customize_04

サイトトップ画像の背景色を変更することもできます。多くの人は、トップ画像を設定していると思いますので、不要だと思いますが、一応ご紹介です。

サイトトップ画像の背景色を変更するは、以下のコードをstyle.cssに追記しましょう。

 

解説

  • １行目の.site-headerを指定すると、サイトトップ画像部分の設定を変更することができます。
  • ３行目のbackground-colorで背景の色を設定しています。

 

タイトルや記事本文の周りの部分の背景色を変更

color_customize_05

タイトル、記事本文、グローバルメニュー、フッター以外のブログ全体の背景部分について色を変更するには、以下のコードをstyle.cssに追記しましょう。

サイドバーの色も変わりますよ！

 

解説

  • １行目の.site-content-containを指定すると、ブログ全体の背景部分の設定を変更することができます。
  • ３行目のbackground-colorで背景の色を設定していますので、好みの色に変更してみてください。

 

アイキャッチ画像を表示する部分の背景色を変更

color_customize_06

アイキャッチ画像を表示する部分の左右の余白も背景色を設定できます。

以下のコードをstyle.cssに追記しましょう。

 

解説

  • １行目の.single-featured-image-headerを指定すると、アイキャッチ画像の左右の余白部分の色を設定することができます。
  • ３行目のbackground-colorで背景の色を設定していますので、好みの色に指定してください。

 

フッターの背景色を変更

color_customize_07

最後に、フッターの背景色の変更方法です。以下のコードをstyle.cssに追記しましょう。

 

解説

  • １行目の.site-footerを指定すると、フッター部分の設定を変更することができます。
  • ３行目のbackground-colorで背景の色を設定しています。
  • ４行目で、フッターの上の線（記事との境界）の色を変えています。

 

フッターの文字の色を変更するには

フッターの背景色を濃くした場合には、文字の色が見えなくなってしまいます。フッターの文字の色を変更したい場合は、以下のコードを追記してみてください。

 

解説

  • １行目から３行目で、フッターの文字の色を白くしています。
  • ４行目から６行目で、ウィジットをフッターに表示した場合、タイトルを白くするように変更しています。
  • ７行目から９行目で、フッターに表示されるリンクの色を白くしています。コピーライト表示をした場合などに有効です。

 

以上です！

ブログの背景色を設定するには、様々な部分をカスタマイズしないといけませんが、オリジナリティーを出すには重要かもしれません。

カスタマイズに苦労されている方は、参考にしてみてください。

カスタマイズ
RELATED POST