こんにちは、あゆりです。
今回は、THE THOR(ザ・トール)でのトップページの設定方法を画像付きで解説します。
トップページで設定できる項目は、以下の「本記事の内容」で記載されている6項目です。
・メインビジュアル下お知らせの設定方法
・カルーセルスライダーの設定方法
・ピックアップ3記事の設定方法
・記事ランキングの設定方法
・カテゴリ最新記事の設定方法
トップページ設定は、必須の設定ではないのですべて行う必要はありません。
ちなみに当ブログではあまりトップページ設定をしていないのですが、好みで良いと思います。
一通り解説するので、試しにやってみて自分が必要だなと思う箇所やカスタマイズしたいなと思う箇所を設定しましょう。
それでは1つずつ解説していきます。
メインビジュアルの設定方法
まずは、メインビジュアルの設定です。
メインビジュアルとは、下記画像の赤枠で囲っている箇所です。
それでは設定方法の解説をしていきます。
①「外観」→「カスタマイズ」に進む
②「TOPページ設定[THE]」→「メインビジュアル設定」に進む
上記画像の赤枠で囲っている箇所で、メインビジュアルの「表示/非表示」を選択できます。
また、スマホのみメインビジュアルを非表示にすることも可能なので、そうしたい場合は「スマホは非表示にする」にチェックを入れましょう。
一方で、青枠で囲っている箇所では、メインビジュアルの画像サイズを設定できます。
設定する場合は、好みのサイズに設定してくださいね。
③「メインビジュアルの表示モード設定」を設定する
ここでは、メインビジュアルの表示モードを設定できます。
好みに合わせて表示モードを選択しましょう。
④各設定を行う
「③ メインビジュアルの表示モード設定」で選択したモードによってそれぞれ細かい設定が必要です。
まずは、「静止画(default)」を選択した場合です。
赤枠で囲っている箇所は必須項目で、青枠で囲っている箇所は必要に応じてあるいは好みに合わせて設定していきましょう。
設定項目は以下の通りです。
②画像のマスクを選択：マスクとは、設定した静止画に色味を付けることです。好みのマスクを選択
③カラー系マスク利用時の色を指定：マスク利用の場合は、好みの色を指定
④タイトルを入力：画像の上にタイトルを表示できます。
⑤サブタイトルを入力：画像の上にサブタイトルを表示できます。
⑥ボタンのテキストを入力：画像の上にボタンを表示できます。
⑦ボタンのリンク先URLを入力：ボタンを表示する場合は、リンク先URLを入力
次は、「YouTube背景動画」を選択した場合です。
赤枠で囲っている箇所は必須項目で、青枠で囲っている箇所は必要に応じてあるいは好みに合わせて設定していきましょう。
設定項目は以下の通りです。
・YouTube動画IDを入力：背景動画として再生するYouTube動画IDを入力(※下で詳しく解説)
・動画のマスクを選択：静止画と同じ
・カラー系マスク利用時の色を指定：静止画と同じ
・タイトルを入力：静止画と同じ
・サブタイトルを入力：静止画と同じ
・ボタンのテキストを入力：静止画と同じ
・ボタンのリンク先URLを入力：静止画と同じ
「動画再生前に表示する画像を登録」ですが、そもそもYouTube背景動画はトップページへアクセスした際に読み込まれる仕組みです。
再生されるまで時間がかかる場合があるので、動画をロードしている間に表示する画像を設定することが可能です。
「YouTube動画IDを入力」ですが、YouTube動画のURLは「https://www.youtube.com/watch?v=IsX-Es-LnjI」のようになっているので、赤字の箇所だけ入力しましょう。
最後は、「スライドショー」を選択した場合です。
赤枠で囲っている箇所は必須項目で、青枠で囲っている箇所は必要に応じてあるいは好みに合わせて設定していきましょう。
設定項目は以下の通りです。
・自動再生ON時の再生速度をミリ秒で入力：入力例のように再生速度を入力
・スライドエフェクトの選択：スライドの形式を選択
・画像を登録：好きな画像を登録
・画像のマスクを選択：静止画と同じ
・カラー系マスク利用時の色を指定：静止画と同じ
・タイトルを入力：静止画と同じ
・サブタイトルを入力：静止画と同じ
・ボタンのテキストを入力：静止画と同じ
・ボタンのリンク先URLを入力：静止画と同じ
お好きな枚数を登録しましょう。
以上で、メインビジュアルの設定は完了です。
忘れずに「公開」ボタンをクリックしましょう。
メインビジュアル下お知らせの設定方法
次は、メインビジュアル下お知らせの設定です。
メインビジュアル下お知らせとは、下記画像の赤枠で囲っている箇所です。
それでは設定方法を解説します。
①「TOPページ設定[THE]」→「メインビジュアル下お知らせ設定」に進む
赤枠で囲っている箇所は必須項目で、青枠で囲っている箇所は必要に応じてあるいは好みに合わせて設定していきましょう。
設定項目は以下の通りです。
・キャッチコピーを入力：注目エリアにテキストを表示できます。
・ボタンのテキストを入力：注目エリアにボタンを表示できます。
・ボタンのリンク先URLを入力：ボタンを表示する場合は、リンク先URLを入力
・背景色を指定：注目エリアの背景色を指定
忘れずに「公開」ボタンをクリックしましょう。
スポンサードサーチ
カルーセルスライダーの設定方法
次は、カルーセルスライダーの設定です。
カルーセルスライダーとは、「横にスライドしていくスライドショー」のようなもので、完成例としては下記画像のようなものです。
それでは設定方法を解説します。
①「TOPページ設定[THE]」→「カルーセルスライダー設定」に進む
赤枠で囲っている箇所は必須項目で、青枠で囲っている箇所は必要に応じてあるいは好みに合わせて設定していきましょう。
設定項目は以下の通りです。
・表示条件を選択：表示する条件を指定することも可能
・指定するIDを入力：表示する記事のIDを指定することも可能
・表示件数を指定：表示したい件数を指定
・画像アスペクト比を選択：画像サイズを選択できる
・アイキャッチ上のカテゴリを非表示にする：カテゴリを非表示にしたい場合はチェック
忘れずに「公開」ボタンをクリックしましょう。
ピックアップ3記事の設定方法
次は、ピックアップ3記事の設定です。
ピックアップ3記事とはその名の通りですが、読者に読んでほしい記事をピックアップして表示することができます。
【完成例】
それでは設定方法を解説します。
①「TOPページ設定[THE]」→「ピックアップ3記事設定」に進む
設定項目ですが、少し細かいので画像で色分けして解説します。
設定項目は以下の通りです。
※上記画像にある項目です。好みに合わせていろいろ試して設定してみてください。
・セクションの見出しを入力：好きな見出しを入力(太文字にしたい場合はチェック)
・見出しの左に表示するアイコンを入力：好きなアイコンを入力
・見出しの右に表示する補足情報を入力：サブ見出しを入力
・画像アスペクト比を選択：好みのサイズを選択
・画像のマスクを選択：マスクとは、設定した静止画に色味を付けることです。設定したい場合は、好みのマスクを選択
・カラー系マスク利用時の色を指定：マスク利用の場合は、好みの色を指定
・アイキャッチ上のカテゴリを非表示にする：カテゴリを非表示にしたい場合はチェック
上記のようにピックアップしたい記事を3つ埋め込みます。
記事IDは、「投稿一覧」から確認します。
こちらですね。
以上で、ピックアップ3記事の設定は完了です。
忘れずに「公開」ボタンをクリックしましょう。
スポンサードサーチ
記事ランキングの設定方法
次は、記事ランキングの設定です。
記事ランキングもその名の通りですが、実際によく読まれている記事をランキング化してTOPページに表示することができます。
【完成例】
それでは設定方法を解説します。
①「TOPページ設定[THE]」→「記事ランキング設定」に進む
赤枠で囲っている箇所は必須項目で、青枠で囲っている箇所は必要に応じてあるいは好みに合わせて設定していきましょう。
設定項目は以下の通りです。
・ランキングの対象期間を選択：ランキング対象の期間を選択
・表示件数を指定(5〜10件)：最低5記事、最大10記事まで設定可能
・表示条件を選択：表示する条件を指定することも可能
・指定するIDを入力：IDを指定することも可能
・セクションの見出しを入力：好きな見出しを入力「例) 人気記事一覧」
・見出しを太文字にする：太文字にしたい場合はチェック
・見出しの左に表示するアイコンを入力：アイコンの設定
・見出しの右に表示する補足情報を入力：好きなサブ見出しを入力「例) ランキングTOP10」
・画像アスペクト比を選択：画像サイズを選択できる
・カラー系マスク利用時の色を指定：マスク利用時の好みの色を選択
・アイキャッチ上のカテゴリを非表示にする：カテゴリの表示/非表示を選択可能
・投稿日/更新日/閲覧数を表示：各項目の表示/非表示を選択可能
忘れずに「公開」ボタンをクリックしましょう。
カテゴリ最新記事の設定方法
次は、カテゴリ最新記事の設定です。
カテゴリ最新記事とは、各カテゴリの最新記事をTOPページのフッター上部付近に表示することができます。
【完成例】
それでは設定方法を解説します。
①「TOPページ設定[THE]」→「カテゴリ最新記事設定」に進む
赤枠で囲っている箇所は必須項目で、青枠で囲っている箇所は必要に応じてあるいは好みに合わせて設定していきましょう。
設定項目は以下の通りです。
・表示条件を選択：表示する条件を選択可能
・指定するIDを入力：表示したいカテゴリのIDを指定
・セクションの見出しを入力：好きな見出しを入力「例) CATEGORY」
・見出しを太文字にする：太文字にしたい場合はチェック
・見出しの左に表示するアイコンを入力：アイコンの設定
・見出しの右に表示する補足情報を入力：好きなサブ見出しを入力「例) カテゴリ別の最新記事」
・画像アスペクト比を選択：画像サイズを選択できる
・投稿日/更新日を表示：各項目の表示/非表示を選択可能
「指定するIDを入力」で入力するカテゴリーのIDは、「投稿」→「カテゴリー」で確認することができます。
こちらですね。
以上で、カテゴリ最新記事の設定は完了です。
忘れずに「公開」ボタンをクリックしましょう。
スポンサードサーチ
おわりに
無事にトップページの設定はできましたか？
トップページは、ブログの1番メインとなる場所なので、自分の好みに合わせて設定しましょう。
さて、トップページの設定が完了したら、メインエリア・サイドエリアの設定をしていきましょう。
別記事のTHE THOR(ザ・トール)でメイン・サイドエリアの設定方法【画像付き】で詳しく解説しているのでよかったらぜひ。
というわけで、今回は以上です。
こんにちは、あゆりです。今回は、THE THOR(ザ・トール)でのメインエリアとサイドエリアの設定方法を画像付きで解説します。・THE THORでのメインカラムエリアの設定方法・THE THORでのサイドカラムエリアの設定方法[…]