フッターの色を変更する手順を紹介する。テーマごとに設定の箇所が若干違ってくるかと思うが、基本的に似たような部分の修正で済むはずだ。
場所
下の画像部分が元のフッターだ。
イメージと違うので色を変更してみようと思う。
変更箇所の確認
Google Chromeで該当ページを開いて、F12キーを押下しデベロッパーツールを起動する。ショートカット Ctrl + Shift + C を押下すると、ページ上のパーツを指定できるのでフッター全体が反転する箇所でクリック。
そうすると下のイメージのような感じで、HTMLの該当箇所と読み込んでいるスタイルシートが表示される。
変更箇所はココだ
WordPress管理画面の左メニューから、外観 → テーマの編集をクリックし、Style.cssを表示
先ほど見つけた箇所
.site-footer .sidebar-container
を検索すると、修正箇所がすぐ見つかる。
色の確認
ココのbackground-colorを修正するのだがあらかじめデベロッパーツールでイメージを確認しておいた方が良いだろう。
先ほど確認したデベロッパーツールのbackground-color右の黒四角■をクリックすると、色をグラフィカルに選択できるウインドウが表示される。
このツールで選らんだ色がページに反映(この時点では保存されない)されるので、実際のイメージを確認できる。
選んだ色のコードがコピーできるので、コピーして
Style.cssの該当箇所にペースト
ファイル更新をして、実際のイメージを確認してほしい。
このように文字が見にくくなれば、
同じ手順で変更するとよいだろう。
まとめ
フッターの色変更の方法を解説したが、Chromeのデベロッパーツールを使いこなせるようになる方が大事だろう。一度コツを覚えてしまえば、以降のサイト修正にかなり役立つはずだ。
