[WordPress] フッターの色を変更


フッターの色を変更する手順を紹介する。テーマごとに設定の箇所が若干違ってくるかと思うが、基本的に似たような部分の修正で済むはずだ。

場所

下の画像部分が元のフッターだ。
フッターのサンプル

 

イメージと違うので色を変更してみようと思う。

 

変更箇所の確認

Google Chromeで該当ページを開いて、F12キーを押下しデベロッパーツールを起動する。ショートカット Ctrl + Shift + C を押下すると、ページ上のパーツを指定できるのでフッター全体が反転する箇所でクリック。
デベロッパーツールで選択

そうすると下のイメージのような感じで、HTMLの該当箇所と読み込んでいるスタイルシートが表示される。
Chromeデベロッパーツール

 

変更箇所はココだ
色の指定箇所

 

WordPress管理画面の左メニューから、外観 テーマの編集をクリックし、Style.cssを表示
Style.cssを選択

 

先ほど見つけた箇所

.site-footer .sidebar-container

を検索すると、修正箇所がすぐ見つかる。
修正箇所

 

色の確認

ココのbackground-colorを修正するのだがあらかじめデベロッパーツールでイメージを確認しておいた方が良いだろう。

先ほど確認したデベロッパーツールのbackground-color右の黒四角■をクリックすると、色をグラフィカルに選択できるウインドウが表示される。
色指摘を変更

 

このツールで選らんだ色がページに反映(この時点では保存されない)されるので、実際のイメージを確認できる。
色を選択できる

 

選んだ色のコードがコピーできるので、コピーして
色コードをここからコピー

 

Style.cssの該当箇所にペースト
Style.cssにカラーコードを張り付け

 

ファイル更新をして、実際のイメージを確認してほしい。
ファイルを更新ボタン

 

このように文字が見にくくなれば、
背景を変えたので、文字が見にくくなった

 

同じ手順で変更するとよいだろう。
文字の色を変更して、見やすくした

 

まとめ

フッターの色変更の方法を解説したが、Chromeのデベロッパーツールを使いこなせるようになる方が大事だろう。一度コツを覚えてしまえば、以降のサイト修正にかなり役立つはずだ。