[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にカラーコードを張り付け

 

 

 

 

 

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

 

 

 

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

 

 

 

 

 

 

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