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

フッター
フッター

 

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

 

フッター以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]

トップページカスタマイズ

 

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

 

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

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

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

 

snsフォロー背景

 

フッターSNSフォローアイコン

 

フッターメニュー

 

フッターウィジェット角丸

角丸

フッターウィジェットシンプル

シンプル

フッターウィジェットボトムボーダー

ボトムボーダー

フッターウィジェットはみ出すボーダー

はみ出すボーダー

フッターウィジェットシンプルワイド

シンプルワイド

フッターウィジェット内側ボーダー

内側ボーダー

 

コピーライト表示

リンク表示あり

コピーライト非表示

リンク表示なし

 

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

 

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

 

snsフォロー背景

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー フッター
カスタマイザー フッター

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

選択してカスタマイザー公開 をクリック

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

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

 

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

 

フッターSNSフォローアイコン

 

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

SNS設定>Follow設定>それぞれのSNSの設定

それぞれ選択してカスタマイザー公開 をクリック

 

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

 

THE THORフッターエリアのメニューは、表示・非表示、表示させたいメニュー項目を選ぶことができます。

 

フッターメニュー

 

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

メニュー

 今回は、THE THOR(ザ・トール)グローバルメニューのカスタマイズ方法についてお伝えします。 グローバルメニュー以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参[…]

メニュー

 

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

 

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

 

THE THORはレスポンシブ対応していますので、スマホで表示する場合にフッターエリアのウィジェットは、下に回り込んで表示されます。

 

the thor レスポンシブ
THE THORはスマホやタブレットで表示されるとき、画像のようにフッターのウィジェットがメインカラムとフッターの間に回り込んで縦長のレイアウトで表示さるようになっています。

 

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

 

フッターウィジェット角丸

角丸

フッターウィジェットシンプル

シンプル

フッターウィジェットボトムボーダー

ボトムボーダー

フッターウィジェットはみ出すボーダー

はみ出すボーダー

フッターウィジェットシンプルワイド

シンプルワイド

フッターウィジェット内側ボーダー

内側ボーダー

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー フッター
カスタマイザー フッター

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

選択してカスタマイザー公開 をクリック

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力します。

 

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

 

THE THORは、フッターエリアに表示するコピーライト(著作権)の設定ができます。未設定のときは「© Copyright 2020 〇〇〇.」が表示されます。(〇〇〇は、ブログ名

 

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

 

THE THORはフッターのコピーライトに、THE THORへのリンク・WordPressへのリンクが表示されるようになっています。

 

SEO対策のために非表示にカスタマイズすることをおすすめします。

 

コピーライト表示

リンク表示あり

コピーライト非表示

リンク表示なし

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー 共通エリア
カスタマイザー フッター
カスタマイザー フッター

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

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

 

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

 

THE THORは、フッターの背景色と文字色の変更をカスタマイザーで対応していません。

 

カスタマイズは自己責任になりますが、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フッターのカスタマイズ】初心者向に画像付きで解説でした。

 

わからないことや、ご相談は、お気軽にお声がけくださいね。

 

お問い合わせはこちら

 

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

Chiharu