【THE THOR】カスタマイズメニュー【TOPページ設定】の使い方！

THE THORのカスタマイズ機能【TOPページ設定】の使い方を詳しく解説します。

では１つ１つ解説していきます。

TOPページ設定　１．【メインビジュアル設定】の使い方

メインビジュアル設定ではトップページのメインビジュアルのスタイルや表示するコンテンツなどを設定します。

メインビジュアルはサイトを訪れたとき最初に目にするところです。

第一印象に大きく影響するのでサイトイメージに合ったコンテンツを表示しましょう。

メインビジュアル設定

■メインビジュアルを表示するか選択

メインビジュアルを表示するかしないかを選択します。

表示する場合はこんな感じです↓

僕は静止画に設定しています。

表示しない場合、以下の設定は必要ありません。

■表示サイズ[横]を選択

メインビジュアルの横幅を「ワイドサイズ」「ノーマルサイズ」「ビッグサイズ」から選択します。

当ブログでは「ワイドサイズ」に設定しています。

画像が横幅いっぱいまで広がっていますね。

ちなみに画像サイズは[2560px×1440px]のものを使っています。

ノーマルサイズ

ビッグサイズ

■スマホ表示時の表示サイズ[縦]を指定

スマホ表示での縦幅をpxで指定します。

当ブログの場合そのままでちょうど良かったので記入していません。

■PC表示時の表示サイズ[縦]を指定

PC表示での縦幅をpxで指定します。

当ブログでは550pxに設定しています。

縦550pxの場合

縦300pxの場合

メインビジュアルの表示モード設定

■メインビジュアルの表示モードを選択

「静止画」「YouTube背景動画」「スライドショー」から選択します。

静止画時の設定

■画像を登録

「静止画」に指定している場合に表示する画像を登録します。

■画像のマスクを選択

画像にかけるマスクエフェクトを選択します。

「無し」「ブラック」「ブラックメッシュ」「カラー」「カラー＋画像グレー」から選択します。

当ブログは「無し」にしています。

ブラックマスク

ブラックメッシュマスク

■カラー系マスク利用時の色を指定

「カラー」「カラー＋画像グレー」のマスクの色を指定します。

下画像はヘッダーと同じ色にしてみました。

カラー

カラー＋画像グレー

入力例

表示例

YouTube背景動画時の設定

「YouTube背景動画」を指定した場合はこちらで設定します。

■動画再生前に表示する画像を登録

■YouTube動画IDを入力

「静止画」と同じように、マスクエフェクトをかけたり、テキストやリンクボタンを表示することができます。

スライドショー時の設定１

スライドショー時の設定２

スライドショー時の設定３

スライドショー時の設定４

スライドショー時の設定５

スライドショー時の設定

「スライドショー」を選択している場合はここで設定します。

■自動再生機能の選択

自動でスライドさせるか手動でスライドさせるか選択します。

■自動再生ON時の再生速度をミリ秒で入力

自動でスライドさせる場合の間隔をミリ秒で指定します。

■スライドエフェクトの選択

スライドのスタイルを４つのパターンから選択します。

スライドショー１〜４の設定

表示させるコンテンツの設定は「静止画」と同じですね。

TOPページ設定　２．【メインビジュアル下お知らせ設定】の使い方

メインビジュアルの下にもお知らせを表示することができます。

当ブログではデザイン的に背景のみ表示しています。

メインビジュアル下の注目エリア設定

記入例

表示例

■メインビジュアル下の注目エリアを表示するか選択

メインビジュアルの下にお知らせを表示するか選択します。

■キャッチコピーを入力

お知らせに表示させるテキストを入力します。

■ボタンのテキストを入力

リンクボタンに表示させるテキストを入力します。

■ボタンのリンク先のURLを入力

ボタンをクリックした時の移動先のURLを記入します。

■背景色を指定

カラーチャートで好きな色を指定します。

TOPページ設定　３．【カルーセルスライダー設定】の使い方

カルーセルスライダー設定

■カルーセルスライダーを表示するか選択

カルーセルスライダーを表示する場合は「表示」を選択しましょう。

■表示条件を選択

表示する記事の条件を選択します。

■指定するIDを入力

選択した「表示条件」に適したIDを記入します。

■表示件数を指定

表示させたい記事の件数を指定します。

■画像アスペクト比を選択

TOPページ設定　４．【ピックアップ３記事設定】の使い方

指定した３つの記事を目立つように表示します。

ピックアップ３記事設定

■ピックアップ３記事を表示するか選択

ピックアップ３記事を表示す場合は「表示」を選択しましょう。

■セクションの見出しを入力

上画像の見出し部分に表示させるテキストを入力します。

■見出しの左に表示するアイコンを入力

「アイコン一覧」から表示したいアイコンのコードをコピペしてください。

■見出しの右に表示する補足情報を入力

セクションの説明文などはここに記入します。

■画像アスペクト比を選択

表示する画像のアスペクト比を選択します。

■画像のマスクを選択

ここで選択したマスクエフェクトは背景画像に反映されます。

背景画像は１番目に指定した記事のアイキャッチ画像が表示されます。

■カラー系マスク利用時の色を指定

マスクの色を指定します。

■１〜３番目の記事IDを入力

表示させたい３つの記事IDを入力します。

記事IDはWordPress管理画面の「投稿一覧」で記されています。

TOPページ設定　５．【記事ランキング設定】の使い方

記事一覧の下に閲覧数が多い順に記事を並べて表示します。

記事ランキング設定

■記事ランキングを表示するか選択

記事ランキングを表示する場合は「表示」を選択しましょう。

■表示件数を指定

表示する記事数を５〜１０件から指定します。

多い方が読者の選択肢が増えるので当ブログでは１０件に設定しています。

■表示条件を選択

表示する記事の条件を選択します。

■指定するIDを入力

「表示条件」に適したIDを入力しましょう。

■セクションの見出しを入力

画像の「RANKING」の部分に表示されます。

■見出しの左に表示するアイコンを入力

「アイコン一覧」から表示させたいアイコンのコードをコピペしましょう。

■見出しの右に表示する補足情報を入力

セクションの説明文などがあれば分かりやすいかもです。

■画像アスペクト比を選択

表示するアイキャッチのサイズを選択します。

「０：０」を選択するとアイキャッチ画像は非表示になります。

■カラー系マスク利用時の色を指定

TOPページ設定　６．【カテゴリ最新記事設定】の使い方

カテゴリーごとに分かれてそれぞれの最新記事が表示されます。

カテゴリ最新記事設定

■カテゴリ最新記事を表示するか選択

カテゴリー最新記事を表示する場合は「表示」を選択します。

■表示条件を選択

表示するカテゴリーの条件を選択します。

■指定するIDを入力

「表示条件」に適したIDを入力します。

■セクションの見出しを入力

上画像の「CATEGORY」部分に表示されます。

■見出しの左に表示するアイコンを入力

「アイコン一覧」から好きなアイコンコードをコピペしましょう。

■見出しの右に表示する補足情報を入力

ちょっとした説明があるといいのかもですね。

■画像アスペクト比を選択

画像サイズによって適するアスペクト比が違うので、試してみてちゃんと表示されるものを選択してください。

【THE THOR】カスタマイズ機能【TOPページ設定】の使い方〜まとめ〜

良い感じのトップページになりましたか？

最後にもう一度【TOPページ設定】で出来る事を見てみましょう。