wordpressをCSSでフッターデザインする方法　【余白調整、背景・文字色の変更】

日記

素晴らしく多機能なwordpressテーマ「THE THOR」ですが、
たまに出てくる「もっと変えたい」願望（笑）。

今回の願望は、
「フッターの色などを、サイトに合うようにカスタマイズしたい！」
です。

初期設定は、黒バックに白文字となっているため、どうしても他の部分と馴染まないんですよね・・・。

デフォルトのカスタマイズ機能には入っていませんが、
CSSを少し追記するだけで、サクッと変更できるんです。

CSSの追記なので、この方法を使えば
THE THORに限らず、どんなテーマを使っていてもフッターの編集ができます！

全体的な流れとしては、こちらで紹介した方法と同じです↓

(adsbygoogle = window.adsbygoogle || []).push({}); こんにちは、sateです。私はwordpressのテーマ「THE THOR ザ・トール」を使って、このブ[…]

では、1ステップずつ見ていきましょう。

1. CSSを追記できる場所を探す

以前の記事で紹介した通り、CSSの追記場所としては、
・「style.css」内に直接書く方法
・カスタマイズ機能の「追加CSS」内に書く方法（THE THORの場合）
の2つが候補です。

メリット・デメリットについては以前の記事に書きましたが、
今回も前回同様、「追加CSS」内に書くことにしました。

「外観」→「カスタマイズ」→「基本設定」→「追加CSS」を選択しておきましょう。

次に、開発者ツールで変更したいフッター部分の”名前”を調べましょう。

開発者ツールの詳しい使い方は、こちらを参照ください。↓

(adsbygoogle = window.adsbygoogle || []).push({}); こんにちは、sateです。私はwordpressのテーマ「THE THOR ザ・トール」を使って、このブ[…]

では、いよいよコーディングです。

まだ何もしていない時点では、こんな状態。

フッターエリアだけ明らかに浮いていますね（笑）

以下、実際に書いたコードとサイトの変化を併せて載せていきます。

もしも、フッターメニューのリストやコピーライト名の文字色も変えたい場合は、最後のコードを

.bottomFooter__list > li, .bottomFooter__copyright, .bottomFooter__link {
color: black;
}

とすればOKです。（上記は黒色にする場合）

いかがでしたか？簡単ですよね！

今回の3つのステップ

を覚えておけば、いろんなパーツを自分好みに変更することができます。

CSSの追記と言っても、慣れれば難しくありません。
ぜひ、試してみてくださいね。