テーマTwentySeventeenの背景色をCSSでカスタマイズ

2017/04/22[公開] 2017/04/24[最終更新]

 ここのサイトのテーマTwenty Seventeenの背景色を変更しました。テーマ カスタマイザーを使わずに、追加CSSで設定しました。このテーマはカスタマイザーでカラーが変更できますが、全体的に単色です。ナビゲーションメニューとフッターエリアの背景色を変更してメリハリを出したかったのです。ついでに高解像度ディスプレイで見たときに、左右にたっぷりある余白にも背景を付けてみたかったのです。

スポンサー リンク

標準テーマカラー「ライト」が基本

 TwentySeventeen標準のテーマカラーである「ライト」の設定になっていることが前提です。カスタマイザーで「ダーク」や「カスタム」でカラーを選ぶと、テーマディレクトリーの inc/color-patterns.php のカラー設定が優先されてしまうので、この記事で設定する追加CSSが反映されない箇所が出てきます。「ライト」設定でないと都合が悪いです。

基本方針

 まずは、背景色を設定したい場所のクラス名を調べました。

  • ナビゲーションメニュー…navigation-top
  • フッター…site-footer
  • コンテンツ全体…site-content
  • コンテンツ中身…site-content + wrap
17background-color2
投稿ページでのcssクラス名

 背景色の選択は、なるべく簡単に設定できるように考えました。

 背景を濃い色にすると、そこの文字は見づらくなるので白にしたくなります。ナビゲーションメニューなら白文字にするのは簡単ですが、フッターの場合はウィジェットの種類によっては設定が面倒です。

 さらに、このテーマはリンクの下線が場所により白か黒で指定されており、背景色を付けると、いままで同色で見えていなかった下線が出てしまうことになり、これを潰していくのもかなり面倒そうです。

 そういう理由で、ナビゲーションメニューは濃いめの背景色にして、文字色を白にしました。フッターは同系色の薄めにして文字色はそのまま。コンテンツ部分は同系色でほぼ白に近い色、さらにコンテンツの中身の場所は元の真っ白にしました。

追加CSS

 下記のCSSを、管理画面の外観→カスタマイズ→追加CSSに追記します。もしくは、子テーマのstyle.cssに追記します。

(2017/04/24追記)トップページの矢印と、モバイル画面でのメニューの記述追加しました。

 私は、まずは追加CSSに追記して、ライブビューでちゃんと反映されているかテストしてから、子テーマのstyle.cssに移して保存しています。

リンクの下線が出たら

 フッター部分に出しているウィジェットによっては、リンクの下線が白い線で出ているので、透明な線に変更するのはコチラの過去記事を参考にしてください。

TwentySeventeenでリンクの下線を非表示にする

設定完了

 以上で、背景の色を設定できました。カラーコードをいろいろ変更して個性を出せます。画像ファイルを背景にしても良いかもしれません。コンテンツ部分はド派手な色にすると、トップページを固定ページにしていたり、アーカイブページなどでおかしな事になるかもしれません。その場合は、さらに細かく追記しなといけなくなるので、コンテンツ部分は変更なしの白のままにするのがお手軽です。

スポンサー リンク

 

こちらの記事もどうぞ

コメントを残す

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