THE THORのトップページの設定

THE THORのトップページの設定

2018年11月の下旬にインストールして使い始めたWordPressテーマ「THE THOR」

THE THORは、機能が多いだけに設定項目が多いのが特徴です。

THE THORの前身とも言える無料版のライオンブログを使いこなしていた人であれば設定の仕方も馴染みがあり、少しは当たりがつくと思うのですが、THE THORをはじめて使う人やテーマの使い方にあまり慣れていない人は最初は難解に感じる人も多いのではないかと思います。

そこで、ここでは、初心者や慣れていない人の作業効率が上がるようにと、このサイト風にするためにどこをどう設定したかを簡単に解説したいと思います。

何となく感覚を掴んで頂いて作業効率を上げて頂ければ幸いです。

とはいえ、設定項目は結構な量です。

ここでは、トップページで見える部分、特にヘッダーやグローバルメニュー、中央エリア、フッターエリアのカスタマイズ設定などを中心に解説します。

THE THORのトップページのカスタマイズ設定

トップページ・ヘッダーの設定

まずは、トップページのヘッダーからです。

THE THORの場合、設定する項目の殆どは、「外観」-「カスタマイズ」にあります。

以降は「カスタマイズ」内にあるメニューを前提に解説していきます。

THE THORのカスタマイズメニュー

ヘッダー部分とは、このサイトのトップページでは下図の赤枠の部分です。

ヘッダー部分は「共通エリア」-「ヘッダーエリア設定」で設定

ヘッダーの設定は、トップページだけでなく全てのページで共通です。

ここには、

  • 背景色と文字の組み合わせ、または、
  • 背景色とサイトロゴ画像の組み合わせ

を設定できます。

背景色と文字の組み合わせを設定する場合は、

共通エリア設定」-「ヘッダーエリア設定」の「ヘッダー設定」で設定を行い、

背景色とサイトロゴ画像の組み合わせを設定する場合は、

基本設定」-「サイトロゴ設定」の「ロゴ画像の設定」で行います。

同じヘッダーのカスタマイズですが、それぞれで、設定する場所が異なります。

このサイト(上図)の例では、ヘッダーにサイトロゴ画像を設定しています。

サイトロゴ画像の設定の仕方は下で詳しく解説していますので必要に応じて参考にして下さい。

参考:THE THORでヘッダーにサイトロゴ画像を設定する手順

サイドエリアのタイトル部分の色合いもあわせる

ヘッダーエリアの背景色を変更しましたが、このままでは、ヘッダーエリアの背景色とサイドエリアのタイトル部分の背景色との均衡が取れていません。

勿論、そういうデザインでもOKですが、ホームページ全体の配色のバランスを合せるために、ここではサイドエリアの各ウィジェット部分のタイトル部分の色も変更します。

サイドエリアのウィジェット部分のタイトル部分の色の変更は、

「基本設定」の「基本スタイル設定」で「テーマカラーを指定」の部分を変更します。

※「投稿内テキストリンク色」の指定も「全体の背景色」の指定もここで行います。

グローバルメニューを表示する設定

グローバルメニューとは、ヘッダーの赤枠に表示されるメニューです。

このサイトでは、表示させていませんが、ヘッダー部分にグローバルメニューを表示するように設定することができます。

グローバルメニュー

グローバルメニューを表示する場合も、

「共通エリア設定」-「ヘッダーエリア設定」で行います。

とはいえ、デフォルトで表示するようになっていますので、実際にグローバルメニューを表示したい場合は、WordPress管理画面の「外観」-「メニュー」でメニューを作成します。

そして、「メニューの位置」で「ヘッダーエリア」にチェックを入れます。

メニューの作成

同様にフッター部分にグローバルメニューを表示したい場合は、フッターエリアの箇所にチェックを入れます。

カスタマイズの「共通エリア設定」の「ヘッダーエリア設定」では、PCやスマホで表示させる、させないをコントロールするために使います

メニューパネルを表示する方法

メニューパネルとは、画面右上にある三本線のところをクリックすると表示されるメニューのことです。ハンバーガーメニューとも呼ばれています。

メニューパネル

こちらは、別のページで解説していますのでそちらを参照して下さい。

参考:THE THORのメニューパネルの設定の仕方

トップページのメインビジュアルは「TOPページ設定」の「メインビジュアル設定」で設定

トップページのヘッダーの下に画像がありますが、これがメインビジュアルです。

メインビジュアル画面

メインビジュアルは、

「TOPページ設定」の「メインビジュアル設定」で設定します。

「メインビジュアルを表示するか選択」で「表示」にし、

「メインビジュアルの表示モード設定」で「静止画(default)」を選択、

「静止画時の設定」で画像を貼りつけます。

ここでは、好みに応じてスライドショーも表示設定可能です。

メインビジュアルのサイズの調整

画像の表示サイズは、PC、スマホ別に設定できます。

ちなみに当サイトでは、

・スマホ時の表示サイズを「170」に設定し、
・PCでの表示サイズを「300」に設定しています。

見かけ上、PCでは画像を表示せず、スマホでは画像を表示するといったことも可能で、この場合はスマホ時の表示サイズを「170」に、PCでの表示サイズを「1」にすることで対応できます。

※逆に、PCで表示してスマホでは非表示にする場合は、メインビジュアルの表示選択で「スマホは非表示にする」にチェックすることで対応できますが、この場合は、下で設定する「メインビジュアル下のお知らせ部分」もスマホでは表示されなくなります。

スマホでメインビジュアルは表示せずにメインビジュアル下お知らせを表示させたい場合などは表示サイズで調整が可能です。

メインビジュアルでタイトル・サブタイトルを表示

また、メインビジュアルでは、タイトルやサブタイトルを表示することもできますが、そのタイトルやサブタイトルも必要に応じてここで設定します。

メインビジュアルでタイトル・サブタイトルを表示

ヘッダー下のお知らせは「TOPページ設定」の「メインビジュアル下お知らせ設定」で設定

トップページのメインビジュアルの下に「お知らせ」を表示させることができます。

これは「TOPページ設定」の「メインビジュアル下お知らせ設定」を使います。

メインビジュアル下お知らせ設定

お知らせを表示したい場合は、「メインビジュアル下の注目エリア設定」で

「キャッチコピー」に「お知らせしたい文章」を、

リンク先を表示したければ、

「ボタンのテキストを入力」に「リンク先の名称」を、

「ボタンのリンク先」に「リンク先のURL」

を入力します。

流れるお知らせは「共通エリア設定」の「ヘッダーボトムエリア設定」で設定

トップページだけではなく全てのページのヘッダーエリアのすぐ下に「流れるお知らせの文字」を表示することができます。

流れるお知らせの表示は、

「共通エリア設定」の「ヘッダーボトムエリア設定(検索窓・お知らせ)」を使います。

文字とリンク先を設定できます(ボタンは無し)。

流れるお知らせはヘッダーの下

メインビジュアル下のお知らせはメインビジュアルの下

への表示です。

従ってメインビジュアルを表示する設定にした場合、流れるお知らせは、ヘッダーとメインビジュアルの間に表示されます。

必要に応じてカルーセルスライダーを設定

カルーセルスライダーとは、トップページに画像を順次回転させながら表示させる機能です。

よく画像が数秒ごとに左に流れて表示されるあれです。当サイトでは表示させていませんが、必要に応じて「カルーセルスライダー設定」で表示させることができます。

その他、トップページには、「ピックアップ3記事設定」、「記事ランキング設定」、「カテゴリ最新記事設定」などもあります。当サイトではこれらは表示させていません。

トップページ・中央エリアの設定

次にトップページの中央部分(下図の赤枠の部分)です。

トップページの中央部分

トップページのこの部分は、予め、

固定ページを表示するか
最新の投稿を表示するか

の設定がありますが、上図の例では「固定ページ」を設定しています。

どちらを表示するかは、WordPress管理画面の「設定」-「表示設定」で指定することもできますが、「カスタマイズ」の「ホームページ設定」でも指定できます。

下の図は、このサイトを立ち上げた当初、「最近の投稿」に設定して記事を横に2列並ばせた表示にしているときのトップページです。

最近の投稿に設定した場合の表示例 これは、

「アーカーブ設定」の「コントローラー設定」「レイアウト切り替えボタンの初期checkedを選択」で、「カードレイアウト」を選択し、

カードのコントラストを浮き上がらせるために、

「アーカーブ設定」の「記事一覧リスト設定」において、

「記事一覧リストのフレームを選択」で「シャドウフレーム」を選択しています。

トップページ・フッターの設定

最後にフッターです。

フッターもヘッダー同様、トップページだけでなく全てのページで共通の設定です。

デフォルトでは、THE・THOR製作者のFITさんへのリンクが表示されていますが、これを非表示にするためには、「共通エリア設定」-「フッターエリア設定」の「コピーライト設定」で、コピーライト下のリンクを非表示にします。

SEO対策としてもFITさんへのリンクは非表示にしておいた方が良いでしょう。

フッターメニューは「外観」-「メニュー」で設定

フッターのメニューは、

「外観」-「メニュー」で作成し、「フッターエリア」にチェックを入れることで表示されます。

メニューでフッターエリア作成

固定フッターエリアの設定

最後に、スマホでは、固定フッターエリアを表示しています。

スマホの固定フッターエリア

この設定は、「共通エリア設定」の「固定フッターエリア設定(スマホ専用)」で行います。

「スマホ用固定フッター表示するか選択」で「表示」を選択し、ここに表示するボタンの項目を選択または排除します。

まとめ

以上、WordPressテーマTHE THORのトップページ周りの設定を解説してみました。

これらの設定で、見かけ上は、当サイトの80%ほどの設定ができていると思います。

他にもトップページの上部・下部に表示したい項目があれば、「外観」-「ウィジェット」の「トップページ上部エリア」「トップページ下部エリア」に設定することができます。

言うなればたったこれだけで、とりあえず、このようなサイトが出来上がる訳です。

関連記事

このサイトは、THE THORという有料のWordPressテーマを使用しています。 管理人は、このサイト以外にもいくつかのサイトを運営していますが、そのうちの毎週更新している個人用ブログでもこのTHE […]

THE THORの評価・レビューと口コミ
関連記事

現在、当サイトでは、WordPressテーマに「THE THOR」を使用しています。 THE THORは標準で多くの機能を搭載している分、設定項目が多く、使いこなせるようになるまで少し時間がかかりそうです[…]

THE THORのカスタマイズまとめ