THE THORでフッターの色を1分でカスタマイズ【コピペでOK】

悩む人
THE THOR(ザ・トール)のフッターの
背景色を黒から変える方法を教えて。

サイトの雰囲気に合わないんです…

このような悩みにお答えします。

フッターってどこのこと?


これからカスタマイズしようとしているのは、サイトの一番下に表示される黒い帯の部分です。ここにはコピーライト情報が表示されています。

フッターエリア



なぜか、THE THOR(ザ・トール)にはフッターの色を変える設定メニューが備わっていません。

そこで今回は、コピペだけでカンタンにフッターの色をカスタマイズする方法を紹介させていただきます。

 
つるさん
・THE THOR(ザ・トール)でフッターの
 色を変更したいけどやり方がわからない

・黒のフッターがサイトのイメージカラーと
 合わない



こういった方は、ぜひ本記事を参考にしてください。

それではさっそく本編スタートです( ´∀` )

THE THOR(ザ・トール)でフッターの色を1分でカスタマイズする方法

THE THOR(ザ・トール)でフッターの色を1分でカスタマイズする方法

THE THOR(ザ・トール)でフッターの色を変える手順は2つ

  1. CSSコードをコピペする
  2. カラーコードを指定する



たったこれだけです!
手順通りに進めてもらえれば、1分で完了しちゃいます。

ひとつだけ注意点があります!

設定を行うときは、カスタマイズ画面のプレビューでトップページが表示されている状態にしてください。

投稿ページが表示されている状態で設定すると、そのページにしか適用されません。

ステップ①:CSSコードをコピペする

WordPressの管理画面から【外観】➡【カスタマイズ】


メニュー下までスクロールして【追加CSS】をクリック

メニュー下までスクロールして【追加CSS】をクリック


CSSコードをコピペします

以下のCSSコードをコピーし、追加CSSに貼り付けます。

.l-footer .wider .bottomFooter{background:#1a4db2;}

ステップ②:カラーコードを指定する

さきほどのCSSコード内の{background:#1a4db2;}#1a4bd2の部分が
カラーコードです。



ご自身のサイトのテーマカラーに設定してください。

 
つるさん
例えば僕のブログだと、ブルーを基調と
しているのでヘッダーと同色に変えました


おどろく人
あっという間にできました♪
でも『カラーコード』ってどうやって
調べたらいいんですか?
 
つるさん
調べる方法は2パターンあるので
どちらか採用してもらえれば
OKですよ!

カラーコードの調べ方は2パターン

カラーコードの調べ方は2パターンです。

  • 「WEB色見本 原色大辞典 – HTMLカラーコード」で調べる
  • カスタマイズメニューの「基本スタイル設定」で調べる



何色にしようか迷ったときは、どちらかを採用すればOKかと。

それぞれ詳しく解説しますね。

「WEB色見本 原色大辞典 – HTMLカラーコード」で調べる

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…



上記のサイトにアクセスしてください。
配色パターンも学べるので、これを機にテーマカラーも一新させたい方には
とてもオススメです。

カスタマイズメニューの「基本スタイル設定」で調べる

すでにお気に入りのテーマカラーがあり、あなたのサイトにも設定された色があるなら、それを使って統一感を持たせましょう。

テーマカラー



僕のブログを例にすると、赤枠の部分が「テーマカラー」です。

この部分のカラーコードは以下の手順で調べることができます。

【基本設定】➡【基本スタイル設定】➡【テーマカラーを設定】の順でタップ

✔【基本設定】➡【基本スタイル設定】➡【テーマカラーを設定】の順でタップ


 
つるさん
初期の段階では、割とテーマカラーの
設定がたくさん出てきます。 なので
お気に入りのカラーコードができたら
メモをしておくのをオススメします♪

フッターエリアの文字の色も変えたい【これもコピペでOK】

フッターエリアの文字の色も変えたい【これもコピペでOK】


おねがいする人
背景色を変えたら文字の色も
変えたくなりました!
 
つるさん
そうなりますよね!
ここからは、文字の色を
カスタマイズしていきましょう!

「サイト名」と、「©copyright」の文字色のカスタマイズ方法も紹介していきすが、手順はまったく同じです。

どちらもまずはWordPressの管理画面【外観】➡【カスタマイズ】をタップします。

WordPressの管理画面【外観】➡【カスタマイズ】をタップします。


サイト名の文字色をカスタマイズする方法

【追加CSS】をタップします。

追加CSS


CSSコードをコピペします

以下のCSSコードをコピーし、追加CSSに貼り付けます。



.l-footer .wider .bottomFooter .container .bottomFooter__navi .bottomFooter__list li{color:#FFFFFF;}

カラーコードを設定する

貼り付けたCSSコード内の{color:#FFFFFF;}#FFFFFF部分が
サイト名のカラーコードです。


設定したいカラーコードに変更しましょう。

©copyrightの文字色をカスタマイズする方法

【追加CSS】をタップします。

追加CSS


CSSコードをコピペします

以下のCSSコードをコピーし、追加CSSに貼り付けます。



.l-footer .wider .bottomFooter .container .bottomFooter__copyright{color:#191919;}

カラーコードを設定する

貼り付けたCSSコード内の{color:#191919;}#191919部分が、
©copyrightのカラーコードです。

設定したいカラーコードに変更しましょう。

 
つるさん
これでフッターエリア全体の
カスタマイズが完了です!

まとめ|THE THORフッターの色を1分でカスタマイズ【手順のおさらい】

まとめ|THE THORフッターの色を1分でカスタマイズ【手順のおさらい】

ここまでTHE THOR(ザ・トール)でフッターの色をカスタマイズする方法を紹介してきました。

最後におさらいの意味も兼ねて、スムーズに作業を進めるコツをお伝えします。

  1. 準備①:好きな色のカラーコードを調べておく
  2. 準備②:カスタマイズ画面のプレビュー表示をトップページにする
  3. ステップ①:追加CSSにコードをコピペする
  4. ステップ②:カラーコードを書き換え、プレビューで確認したら『公開』



カラーコードは『 WEB色見本 原色大辞典』で調べることができます。


この記事がお役に立てたなら嬉しいです。

WordPressテーマ『THE THOR』
圧倒的にSEOに強く・抜群に上位表示されやすい究極のSEO最適化テーマ『THE THOR(ザ・トール)』であなたもインターネットビジネスを本格的に始めてみませんか?