THE THORのカスタマイズ機能【TOPページ設定】の使い方を詳しく解説します。
・TOPページ設定の使い方がよく分からない!
・TOPページ設定の使い方を詳しく知りたい!
・サイトのトップページを良い感じにしたい!
・メインビジュアルを表示する(画像・動画・スライドショー)
・メインビジュアルの下にお知らせを設置する
・カルーセルスライダーを設置する
・ピックアップ3記事を設置する
・記事ランキングを設置する
・カテゴリ最新記事を設置する
では1つ1つ解説していきます。
TOPページ設定 1.【メインビジュアル設定】の使い方
メインビジュアル設定ではトップページのメインビジュアルのスタイルや表示するコンテンツなどを設定します。
メインビジュアルはサイトを訪れたとき最初に目にするところです。
第一印象に大きく影響するのでサイトイメージに合ったコンテンツを表示しましょう。
メインビジュアル設定
■メインビジュアルを表示するか選択
メインビジュアルを表示するかしないかを選択します。
表示する場合はこんな感じです↓
僕は静止画に設定しています。
表示しない場合、以下の設定は必要ありません。
■表示サイズ[横]を選択
メインビジュアルの横幅を「ワイドサイズ」「ノーマルサイズ」「ビッグサイズ」から選択します。
当ブログでは「ワイドサイズ」に設定しています。
画像が横幅いっぱいまで広がっていますね。
ちなみに画像サイズは[2560px×1440px]のものを使っています。


■スマホ表示時の表示サイズ[縦]を指定
スマホ表示での縦幅をpxで指定します。
当ブログの場合そのままでちょうど良かったので記入していません。
■PC表示時の表示サイズ[縦]を指定
PC表示での縦幅をpxで指定します。
当ブログでは550pxに設定しています。


メインビジュアルの表示モード設定
■メインビジュアルの表示モードを選択
「静止画」「YouTube背景動画」「スライドショー」から選択します。
静止画時の設定
■画像を登録
「静止画」に指定している場合に表示する画像を登録します。
■画像のマスクを選択
画像にかけるマスクエフェクトを選択します。
「無し」「ブラック」「ブラックメッシュ」「カラー」「カラー+画像グレー」から選択します。
当ブログは「無し」にしています。


■カラー系マスク利用時の色を指定
「カラー」「カラー+画像グレー」のマスクの色を指定します。
下画像はヘッダーと同じ色にしてみました。




YouTube背景動画時の設定
「YouTube背景動画」を指定した場合はこちらで設定します。
■動画再生前に表示する画像を登録
■YouTube動画IDを入力
「静止画」と同じように、マスクエフェクトをかけたり、テキストやリンクボタンを表示することができます。





スライドショー時の設定
「スライドショー」を選択している場合はここで設定します。
■自動再生機能の選択
自動でスライドさせるか手動でスライドさせるか選択します。
■自動再生ON時の再生速度をミリ秒で入力
自動でスライドさせる場合の間隔をミリ秒で指定します。
■スライドエフェクトの選択
スライドのスタイルを4つのパターンから選択します。
スライドショー1〜4の設定
表示させるコンテンツの設定は「静止画」と同じですね。
TOPページ設定 2.【メインビジュアル下お知らせ設定】の使い方
メインビジュアルの下にもお知らせを表示することができます。
当ブログではデザイン的に背景のみ表示しています。
メインビジュアル下の注目エリア設定


■メインビジュアル下の注目エリアを表示するか選択
メインビジュアルの下にお知らせを表示するか選択します。
■キャッチコピーを入力
お知らせに表示させるテキストを入力します。
■ボタンのテキストを入力
リンクボタンに表示させるテキストを入力します。
■ボタンのリンク先のURLを入力
ボタンをクリックした時の移動先のURLを記入します。
■背景色を指定
カラーチャートで好きな色を指定します。
TOPページ設定 3.【カルーセルスライダー設定】の使い方

カルーセルスライダー設定
■カルーセルスライダーを表示するか選択
カルーセルスライダーを表示する場合は「表示」を選択しましょう。
■表示条件を選択
表示する記事の条件を選択します。
■指定するIDを入力
選択した「表示条件」に適したIDを記入します。
■表示件数を指定
表示させたい記事の件数を指定します。
PC表示の場合5件表示されるため6件以上をオススメします。
スマホ表示だと3件表示されます。
■画像アスペクト比を選択
TOPページ設定 4.【ピックアップ3記事設定】の使い方
指定した3つの記事を目立つように表示します。
ピックアップ3記事設定
■ピックアップ3記事を表示するか選択
ピックアップ3記事を表示す場合は「表示」を選択しましょう。
■セクションの見出しを入力
上画像の見出し部分に表示させるテキストを入力します。
■見出しの左に表示するアイコンを入力
「アイコン一覧」から表示したいアイコンのコードをコピペしてください。
■見出しの右に表示する補足情報を入力
セクションの説明文などはここに記入します。
■画像アスペクト比を選択
表示する画像のアスペクト比を選択します。
■画像のマスクを選択
ここで選択したマスクエフェクトは背景画像に反映されます。
背景画像は1番目に指定した記事のアイキャッチ画像が表示されます。
■カラー系マスク利用時の色を指定
マスクの色を指定します。
■1〜3番目の記事IDを入力
表示させたい3つの記事IDを入力します。
記事IDはWordPress管理画面の「投稿一覧」で記されています。
TOPページ設定 5.【記事ランキング設定】の使い方
記事一覧の下に閲覧数が多い順に記事を並べて表示します。
記事ランキング設定
■記事ランキングを表示するか選択
記事ランキングを表示する場合は「表示」を選択しましょう。
■表示件数を指定
表示する記事数を5〜10件から指定します。
多い方が読者の選択肢が増えるので当ブログでは10件に設定しています。
■表示条件を選択
表示する記事の条件を選択します。
■指定するIDを入力
「表示条件」に適したIDを入力しましょう。
■セクションの見出しを入力
画像の「RANKING」の部分に表示されます。
■見出しの左に表示するアイコンを入力
「アイコン一覧」から表示させたいアイコンのコードをコピペしましょう。
■見出しの右に表示する補足情報を入力
セクションの説明文などがあれば分かりやすいかもです。
■画像アスペクト比を選択
表示するアイキャッチのサイズを選択します。
「0:0」を選択するとアイキャッチ画像は非表示になります。
■カラー系マスク利用時の色を指定
TOPページ設定 6.【カテゴリ最新記事設定】の使い方
カテゴリーごとに分かれてそれぞれの最新記事が表示されます。
カテゴリ最新記事設定
■カテゴリ最新記事を表示するか選択
カテゴリー最新記事を表示する場合は「表示」を選択します。
■表示条件を選択
表示するカテゴリーの条件を選択します。
■指定するIDを入力
「表示条件」に適したIDを入力します。
■セクションの見出しを入力
上画像の「CATEGORY」部分に表示されます。
■見出しの左に表示するアイコンを入力
「アイコン一覧」から好きなアイコンコードをコピペしましょう。
■見出しの右に表示する補足情報を入力
ちょっとした説明があるといいのかもですね。
■画像アスペクト比を選択
画像サイズによって適するアスペクト比が違うので、試してみてちゃんと表示されるものを選択してください。
【THE THOR】カスタマイズ機能【TOPページ設定】の使い方〜まとめ〜
良い感じのトップページになりましたか?
最後にもう一度【TOPページ設定】で出来る事を見てみましょう。
・メインビジュアルを表示する(画像・動画・スライドショー)
・メインビジュアルの下にお知らせを設置する
・カルーセルスライダーを設置する
・ピックアップ3記事を設置する
・記事ランキングを設置する
・カテゴリ最新記事を設置する
WPテーマ【THE THORザ・トール】のブログサイト例【50サイト】他のカスタマイズ設定は済んでいますか?
・【基本設定】→【THE THORザ・トール】カスタマイズ機能マニュアル!【基本設定】の使い方!
・【共通エリア設定】→【THE THORザ・トール】カスタマイズ機能マニュアル!【共通エリア設定】を詳しく解説!
・【アーカイブページ設定】→【THE THORザ・トール】カスタマイズ機能【アーカイブページ設定】のマニュアル!
・【投稿ページ設定】→【THE THORザ・トール】カスタマイズ機能【投稿ページ設定】のマニュアル!
・【固定ページ設定】→【THE THORザ・トール】カスタマイズ機能【固定ページ設定】のマニュアル!
・【カスタム投稿タイプ設定】→【THE THORザ・トール】カスタマイズ機能【カスタム投稿タイプ設定】のマニュアル!