THE THOR

THE THOR(ザ・トール)トップページのレイアウトを変更する方法!

悩める人
「THE THOR」のトップページのレイアウトを変更したい。けど、設定メニューが分からない。

このような疑問を解決できる記事となっています。

 

「THE THOR」のトップページには最新記事を表示したり、カラム数を変更できたりと、様々なカスタマイズ項目が用意されています。

デモサイトを見て、設定してみようと考えた方も多いのではないでしょうか?

しかし、レイアウトの設定メニューは散見しており、一見どこからカスタマイズを行えばよいのか分かりにくくなっています。

本記事では、「THE THOR」のトップページのレイアウト変更方法を詳細に解説するので、是非参考にしてください。

 

 

THE THOR(ザ・トール)トップページのレイアウト変更方法

「THE THOR」のトップページには、最新記事の一覧を表示することができます。

最新記事一覧の表示イメージとしては、下記の通りです。

トップページの最新記事

 

しかし、最新記事にも様々な表示方法が用意されており、お好みでカスタマイズが可能です。

順番に各カスタマイズ項目の詳細を見ていきます。

 

最新記事のリンクレイアウト設定

「THE THOR」の最新記事リンクには、下記3つのレイアウトが用意されています。

ワイドレイアウト

ワイドレイアウト

 

カードレイアウト

カードレイアウト

 

ノーマルレイアウト

ノーマルレイアウト

 

初期状態ではワイドレイアウトとなっていますが、カードレイアウト、ノーマルレイアウトを利用しているサイトも多く見かけますね。

最新記事のリンクレイアウトの設定方法ですが、WordPressのダッシュボードから「外観 > カスタマイズ」をクリックします。

外観 > カスタマイズ

 

次に、「アーカイブページ設定 > コントローラー設定」と遷移します。

アーカイブページ設定 > コントローラー設定

 

「レイアウト切替ボタンの初期checkedを選択」の項目があるので、ご紹介した3つのレイアウトから選びましょう。

「レイアウト切替ボタンの初期checkedを選択」の項目

 

最後に「公開」ボタンのクリックを忘れないようにしましょう。

「公開」ボタン

レイアウトが反映されていれば、完了となります。

 

カラム設定

カラムとは、ブログを何列で表示するか設定する項目となります。

「THE THOR」には1カラムと2カラムが用意されており、それぞれのカラムイメージは下記の通りです。

1カラム

1カラム

1カラムはサイドバーを表示せず、最新記事の一覧のみを表示したレイアウトです。

 

2カラム

2カラム

2カラムは最新記事一覧とサイドバーを表示するレイアウトです。

最新記事を多く表示したい場合は1カラムのレイアウトがおすすめですが、サイドバーにも新着記事やおすすめ記事を表示できます。

よって、個人的には読者の回遊率アップも狙える2カラムのレイアウトがおすすめです。

 

「THE THOR」は初期状態で2カラムのレイアウトとなっているので、1カラムにしたい場合に設定変更を行います。

カラムの設定方法ですが、WordPressのカスタマイザー画面から「アーカイブページ設定 > レイアウト設定」と遷移します。

アーカイブページ設定 > レイアウト設定

 

「カラムを選択」のカスタマイズ項目から、「1カラム」へ設定を変更し、「公開」ボタンをクリックしましょう。

「カラム選択」のカスタマイズ項目

トップページのカラムが変更されていれば、完了です。

 

コントローラー設定

コントローラーとは、最新記事一覧の上部に表示されるボタンのことを言います。

例えば、下記のような「新着順」「人気順」「お勧めカテゴリ」と表示されている項目です。

コントローラー

最新記事の並び替えや指定したカテゴリを表示できるのが、コントローラー機能です。

いくつか設定項目があるので、それぞれ詳細を解説します。

 

コントローラーの表示設定

「THE THOR」のコントローラーは初期状態で非表示となっているので、表示設定から行います。

設定方法ですが、WordPressのカスタマイザー画面から「アーカイブページ設定 > コントローラー設定」をクリックします。

アーカイブページ設定 > コントローラー設定

 

「コントローラーを表示するか選択」の項目があるので、「表示」へ変更しましょう。

「コントローラーを表示するか選択」の項目

 

なお、「コントローラーのフレームを選択」の設定項目から、コントローラー回りに枠を付けることができます。

例えば、下記はシャドウフレームのコントローラーです。

シャドウフレームのコントローラー

デザインをおしゃれにしたい方は、変更してみてくださいね。

 

新着・人気順ソートリンクの設定

次に、コントローラーに表示するボタンの設定を行います。

コントローラーにはソート機能、いわゆる並び替え機能が備わっており、新着順と人気順でソートが可能です。

ソートリンクボタンを表示する場合は、「新着・人気順ソートリンクを表示するか選択」の項目を「表示」とします。

「新着・人気順ソートリンクを表示するか選択」の項目

なお、新着順・人気順の片方だけを表示することはできません。

 

また、新着順・人気順の表記は変更可能となっています。

変更する際は、「新着順の表記を変更する場合は入力」と「人気順の表記を変更する場合は入力」の項目を入力してください。

「新着順の表記を変更する場合は入力」と「人気順の表記を変更する場合は入力」の項目

未入力の場合は「新着順」「人気順」とそれぞれ表記されます。

「新着順」「人気順」でも読者に意味は十分伝わるので、特に入力しなくても問題ないでしょう。

 

お勧めカテゴリの設定

コントローラーのもう1つの機能として、指定したカテゴリの表示機能があります。

例えば、下記は「THE THOR」と「STORK19」というカテゴリを表示したトップページです。

「THE THOR」と「STORK19」のカテゴリを表示

最新記事だけでなく、カテゴリまでアピールできる優秀な機能となっています。

 

おすすめカテゴリを表示したい場合は、「お勧めカテゴリを表示するか選択」の項目を「表示」とします。

「お勧めカテゴリを表示するか選択」の項目

先ほどの新着順・人気順と同様に表記を変更することも可能なので、設定する場合は「お勧めカテゴリの表記を変更する場合は入力」の項目を変更しましょう。

 

次に、おすすめとして表示するカテゴリの設定方法ですが、IDを入力する必要があります。

IDはカテゴリ一覧のID列から調べることができます。

カテゴリー一覧のID列

 

カテゴリIDを取得後、「表示するカテゴリIDを入力」の項目へ登録しましょう。

「表示するカテゴリIDを入力」の項目

なお、カテゴリを複数表示したい場合は、カンマ(,)区切りで入力します。

「公開」ボタンをクリック後、おすすめカテゴリのボタンが表示されるか確認してください。

 

レイアウト切替ボタンの設定

最新記事のリンクレイアウト設定」の章で解説しました最新記事のレイアウトですが、下記のような切り替えボタンを設置できます。

レイアウト切り替えボタン

 

レイアウト切り替えボタンの表示・非表示設定があるので、変更する場合は「レイアウト切替ボタンを表示するか選択」の項目を設定しましょう。

「レイアウト切替ボタンを表示するか選択」の項目

コントローラーの設定方法は以上となります。

 

記事一覧リスト設定

「THE THOR」の記事一覧リストには、下記のように様々な情報を表示することができます。

記事一覧リストの表示情報

表示項目 内容
NEWマーク 最新記事にNEWマークを付けます。マークの表示日数は設定可能です。
カテゴリー 記事のカテゴリーを表示します。
投稿日 投稿日を表示します。
更新日 更新日を表示します。
コメント数 コメント数を表示します。
本文 本文の抜粋分を表示します。表示する文字数は選択可能です。
「続きを読む」ボタン 本文へ移るリンクボタンを表示します。ボタン上のテキストは変更可能です。

 

各項目の設定方法ですが、カスタマイザー画面から「アーカイブページ設定 > 記事一覧リスト設定」と遷移します。

アーカイブページ設定 > 記事一覧リスト設定

 

「記事一覧リスト設定」から、各項目の設定を行っていきましょう。

記事一覧リスト設定

 

「THE THOR」トップページのレイアウト設定に関しては、以上となります。

トップページだけでも、非常に多種多様なカスタマイズ項目が用意されていましたね!
はらちゃん

 

THE THOR(ザ・トール)トップページを固定ページに変更する方法

「THE THOR」のトップページには、先述の通り最新記事の一覧が初期状態で表示されます。

しかし、自由に本文を入力したり、記事と同様に装飾したいという方もおられるでしょう。

そのような時に、「THE THOR」のトップページを固定ページへ変更することができます。

 

固定ページへの変更方法ですが、WordPressカスタマイザー画面の「ホームページ設定」をクリックします。

ホームページ設定

 

「ホームページ設定」の画面に固定ページボタンがあるので、選択します。

固定ページボタン

 

「ホームページ」の項目から、作成した固定ページを選べるようになります。

作成した固定ページの選択

あらかじめ、トップページ用の固定ページは作成しておくようにしましょう。

トップページの設定変更方法は以上です。

その他、「THE THOR」のトップページカスタマイズ方法、機能全般の使い方について知りたい方は、下記記事を参考にしてください。

関連記事THE THOR(ザ・トール)トップページの全カスタマイズを徹底解説!

関連記事THE THOR(ザ・トール)の使い方・カスタマイズ操作マニュアル【完全版】

 

THE THOR(ザ・トール)トップページまとめ

「THE THOR」のトップページは自由度が高く、レイアウトのカスタマイズ項目も非常に豊富です。

設定自体は難しくありませんが、設定メニューがカスタマイザーの至るところに配置されているのが分かりました。

初見でトップページのカスタマイズ項目を探すのは、少々手間が掛かります。

本記事を参考に、トップページのレイアウト設定を手早く済ませてくださいね。

読者が目を引くトップページに仕上げ、回遊率アップを図りましょう!
はらちゃん
 
  • この記事を書いた人
  • 最新記事

はらちゃん

専業ブロガー【経歴】開始6ヶ月のブログ収益月400円 ▶︎ 2年半で月50万円 | 私が実践した初心者の方に役立つブログ運営術・SEOノウハウを発信 | 現在4つのブログを運営中 | Twitterフォロワー2,000人超え | 25歳で結婚し、現在27歳の超童顔若手ブロガー

-THE THOR

© 2020 アフィリエイトゼミ