注目キーワード
  1. the thor
  2. WordPress
  3. Google
  4. プラグイン

THE THOR(ザ・トール)でデザインを意識したフッターを設定しよう!

こんにちは、テンテンです。

 

今回は、THE THOR(ザ・トール)でフッターを設定する方法について解説します。

 

まず、参考例をご覧ください。

 

【参考例】

 

当ブログでは、まだ一部工事中ですが、ブログのトップページ下部をフッターと言います。

 

こちらの設定方法について解説する訳ですが、今回はフッタートップエリア設定[CTA]とフッターエリアの設定に分けて解説していきます。

 

THE THOR(ザ・トール)初心者の方でもわかりやすいように画像を用いて説明していきますので、しっかり確認しながら進んでいきましょう。

 

今回の作業時間:10分〜20分

 

では早速、解説に進みます。

 

WordPressでウィジェットを使い、フッターを作成する方法について

 

まず、フッターを作成していきましょう。

 

WordPressでのフッターの作成・設置方法はどのテンプレートでも基本的には同じなので、すでにわかる方はこちらを読み飛ばしていただいても問題ありません。

 

今まで、WordPressでフッターを作成したことがない方向けの内容です。

 

早速、WordPressでフッターを作成していきましょう。

 

①「外観」→「ウィジェット」に進みます。

 

「利用できるウィジェット」から使用するウィジェットを選択し、フッターエリアにドラッグ&ドロップしていきましょう。

 

THE THOR(ザ・トール)では、フッターは大きく3つに分かれています。

 

【フッターエリアの種類】

①フッターエリア[左]:※自己紹介を設置

②フッターエリア[中央]:※カレンダーを設置

③フッターエリア[右] ※Twitterのタイムラインを埋め込み

※当ブログの場合、このように配置しています。あくまでも参考例です。

 

しっかりウィジェットの場所を確認しながら、設置するようにしましょう。

 

では、各ウィジェットを配置していきましょう。

 

当ブログでは、今のところ、左からプロフィール、カレンダー、Twitterのタイムラインを配置していますので、そちらの設置方法について解説していきます。

 

フッターのプロフィール設置方法について

 

プロフィールの設置方法については、主に2つのウィジェットからプロフィールを設置することができます。

 

①「テキスト」からプロフィールを設置する方法

②  [THE]著作者情報からプロフィールを設置する方法

 

なかなか、文章だと伝わりにくいので、まずは画像で確認してみましょう。

 

【プロフィール作成事例】

 

左側が、ウィジェットの「テキスト」で作成した場合で、右側が「[THE]著作者情報」で作成した場合です。

 

当ブログでは、サイドバーで「[THE]著作者情報」のウィジェットを使い、プロフィールを作成しているので、フッターでは「テキスト」でプロフィールを作成しています。

 

「[THE]著作者情報」の使い方については、下記の記事で画像を使ってわかりやすく解説しています。目次で言うと、3つ目のプロフィールをサイドバーに設定しようで詳しく説明しています。

 

あわせて読みたい記事

こんにちは、テンテン(@tentenmaru77)です。   今回は、THE THOR(ザ・トール)でプロフィール画像の設定方法について解説をします。   プロフィール画像設定参考例 […]

THE THOR(ザ・トール)のプロフィール画像設定編〜超簡単!プラグインを使えば3分で終わる〜

 

一方、「テキスト」でプロフィールを作成する場合は、基本的には「タイトル」と「本文」を入力するだけです。

 

最後に忘れずに「保存」をしましょう。

 

フッターのカレンダー設置について

 

当ブログでは、フッターエリア[中央]にカレンダーを設置しています。特別な目的はなく、なんとなく入れるウィジェットがなかったからカレンダーを設置しています笑

 

ただ、意外と便利な部分もあり、ブログを更新した日程などを把握することができます

 

【カレンダー事例】

 

ウィジェットの設定は特別必要はなく、「タイトル」だけ入力しておけばこのように使用することができます。

 

フッターのTwitterタイムライン設置方法について

 

こちらについては、下記の記事で解説していますのでご参考にください。目次で言うと、フッターやサイドバーにTwitterのタイムラインを埋め込む方法で解説しています。

 

 

 

THE THORでフッターの基本的なデザインを設定してみよう!

 

THE THORの場合、フッターのデザインは、「共通エリア設定」から行うことができます。

 

①「外観」→「カスタマイズ」→「共通エリア設定[THE]」→「フッターエリア設定」に進みます。

 

THE THORでは、かなり細かいところまで設定ができて、どの箇所が変更されているかわからない時もありますので色分けして、変更箇所を示しております。

 

①SNSフォローエリアの背景色は、色を指定しないと、そのスタイルのデフォルト色になる

②ウィジェット見出しデザインを設定する際、デザインを変更してもすぐに反映されない場合、一度、「公開」をして、再度ブログを開き直す。

 

続いてコピーライトの設定についてです。コピーライトとは簡単に説明をしておくと著作権のことです。

 

 

デフォルトの状態だと、THE THEMやWordPressのリンクが貼り付けてされてしまいますので、非表示に設定することをオススメします。

 

コピーライトを変更したい場合は、「タグ利用可」の箇所が空欄になっているので、そちらに入力してください。

 

フッタートップエリアのデザインをしてみよう〜応用編〜

 

THE THORでは、フッターの上部についてもデザインを付け加えることができます。

 

当ブログでは、簡単なデザインしか手を加えておりませんが、細かくデザインをしたい方向けに解説させていただきます。

 

①「外観」→「カスタマイズ」→「共通エリア設定[THE]」→「フッタートップエリア設定[CTA]」に進みます。

 

設定項目がたくさんあるので、色分けしております。今回は、テストデザインの為、適当に設置しています。

 

まず、上記のようにフッタートップのデザインをしたい場合、「フッターCTAを表示するか選択」で「表示」を選択しましょう。

 

 

後は必要に応じて、デザインを加えていきましょう。この辺りは、実際にやってみた方がわかりやすいかと思います。

 

「画像のマスク」については、背景のデザインマスクを変更することができます。

 

一方で、「カラー系マスク利用時の色を指定」については、「画像のマスク」でカラー系のマスクを指定した際に使う設定で色を選択することができます。

 

この辺りの設定はかなり細かい部分になりますので、あまり気にする必要はないかと思います。

 

カスタマイズの変更を終わったら、最後に忘れずに「公開」をしましょう。

 

さいごに

 

今回はいかがだったでしょうか?スムーズに作業はできましたか?

 

当ブログでは、THE THORの使い方をできる限りにわかりやすく伝えられるように、画像をたくさん使って解説をしています。

 

その他にもTHE THORの使い方や設定、WordPressの使い方についても解説していますので、是非ご参考にしていただけると嬉しい限りです。

 

最後まで読んでいただき、ありがとうございました。

最新情報をチェックしよう!