【THE THORフッターのカスタマイズ】初心者向に画像付きで解説

the thor フッター

 

Chiharu
Chiharu
今回は、WordPressテーマ「THE THOR(ザ・トール)」フッターのカスタマイズについてお伝えします。

 

THE THORフッターカスタマイズの手順

 

  1. サンプルを見てカスタマイズする内容を決める
  2. それぞれのカスタマイズをする
    1. フッターエリアのSNSフォロー背景
    2. フッターエリアのSNSフォローアイコン
    3. フッターエリアのメニュー
    4. フッターエリアのウィジェット見出しデザイン
    5. フッターエリアのコピーライト
    6. フッターの背景色・文字色

 

THE THORフッターのカスタマイズサンプル

 

the thor フッターフォロー背景色

 

the thor フッターフォローアイコン

 

the thor フッターメニュー

 

the thor ウィジェット 角丸

角丸

the thor ウィジェット シンプル

シンプル

the thor ウィジェット ボトムボーダー

ボトムボーダー

the thor ウィジェット はみ出すボーダー

はみ出すボーダー

the thor ウィジェット シンプルワイド

シンプルワイド

the thor ウィジェット 内側ボーダー

内側ボーダー

 

the thor フッター コピーライト

リンク表示あり

the thor フッター コピーライト

リンク表示なし

 

【カスタマイズ1】フッターエリアのSNSフォロー背景色

 

THE THORフッターエリアのSNSフォロー背景色は、色のカスタマイズができます。

 

the thor フッターフォロー背景色

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー SNSフォロー共通エリア設定>フッターエリア設定>SNSフォロー背景色の設定>SNSフォローエリアの背景色を指定

選択して公開 をクリック

THE THOR カラーパネル

色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

公開 をクリック

 

【カスタマイズ2】フッターエリアのSNSフォローアイコン

 

THE THORフッターエリアのSNSフォローアイコンは、表示させたいSNSアイコンを選ぶことができます。

 

the thor フッターフォローアイコン

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー SNSフォローSNS設定>Follow設定>それぞれのSNSの設定

それぞれ選択して公開 をクリック

 

【カスタマイズ3】フッターエリアのメニュー

 

THE THORフッターエリアのメニューは、表示・非表示・メニュー項目の選択ができます。

 

the thor フッターメニュー

 

メニューのカスタマイズ方法はこちらを参考にしてください。

メニュー

Chiharu今回は、WordPressテーマ「THE THOR(ザ・トール)」グローバルメニューのカスタマイズ方法についてお伝えします。グローバルメニューとはグローバルメニューとは、ヘッダメニ[…]

the thor メニュー

 

【カスタマイズ4】フッターエリアウィジェットの見出しデザイン

 

THE THORはフッターにウィジェットを表示できます。

 

ウィジェットとは、Webサイトのサイドバーやフッターにさまざまな情報やメニュー、機能を追加することのできるパーツのこと。

 

レスポンシブ

THE THORは、PC・スマホ・タブレットに対応するため、モニターの大きさによってレイアウトが変わります。

モニターが小さくなると、ウィジェットが下に回り込み縦長のレイアウトになります。

 

THE THORのウィジェット見出しデザインは、角丸・シンプル・ボトムボーダー・はみ出すボーダー・シンプルワイド・内側ボーダーから選択できます。

 

the thor ウィジェット 角丸

角丸

the thor ウィジェット シンプル

シンプル

the thor ウィジェット ボトムボーダー

ボトムボーダー

the thor ウィジェット はみ出すボーダー

はみ出すボーダー

the thor ウィジェット シンプルワイド

シンプルワイド

the thor ウィジェット 内側ボーダー

内側ボーダー

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

カスタマイザー SNSフォロー共通エリア設定>フッターエリア設定>ウィジェット見出しデザイン設定

選択して公開 をクリック

THE THOR カラーパネル

色の指定は「色を選択」をクリック

白い丸・白い四角をクリックしながら動かして色を選択

または、カラーコードを直接入力

公開 をクリック

 

【カスタマイズ5】フッターエリアのコピーライト

 

THE THORは、フッターエリアに表示するコピーライト(著作権)の設定ができます。

 

未設定時は「© Copyright 2020 〇〇〇.」となります。(〇〇〇は、ブログ名

 

・発行年
・©(c)Copyright のいずれかひとつ
・著作権者の名前またはブログ名順番は決まっていないので、好きな順番に組み合わせればOK

 

THE THORはフッターのコピーライトに、THE THOR・WordPressのリンクが自動で表示されます。SEO対策のために非表示にしましょう。

 

the thor フッター コピーライト

リンク表示あり

the thor フッター コピーライト

リンク表示なし

 

ダッシュボード>外観>カスタマイズ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ

 

the thor フッター コピーライト共通エリア設定>フッターエリア設定>フッターエリアのコピーライトを入力

コピーライトの入力・THE THORとWordPressへのリンク非表示を選択をして公開 をクリック

 

【カスタマイズ6】フッターの背景色・文字色

 

フッター背景色・文字色のカスタマイズは、カスタマイザーで対応していません。

 

そのため、自己責任になりますがCSSを使ってカスタマイズします。

 

カスタムCSS
  1. ダッシュボード
  2. 外観
  3. テーマエディター
  4. style-user.css

 

.l-footer .bottomFooter {
background: #背景色に使う色番号;
}
Copy

 

.bottomFooter__copyright {
color: #コピーライトに使う色番号;
}
.bottomFooter__list li {
color: #フッターのメニュー色に使う色番号;
}
.bottomFooter__link {
color: #フッターのブログ名に使う色番号;
}
Copy

 

カスタムCSS
入力できたらファイルを更新 をクリック

 

フッターエリアのカスタマイズは完了です。

 


 

以上、【THE THORフッターのカスタマイズ】初心者向に画像付きで解説でした。

 

お読みいただき、ありがとうございました。

THE THORカスタマイズ

1人で悩んでいませんか?
設定やカスタマイズでお困りのときは
お気軽にご相談ください。

ご相談はこちらへどうぞ >