ご訪問ありがとうございます

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

  • 2019年12月16日
  • 2020年2月7日
  • THE THOR

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

 

・TOPページ設定の使い方がよく分からない!

・TOPページ設定の使い方を詳しく知りたい!

・サイトのトップページを良い感じにしたい!

という方はぜひ参考にしてください。
ケンノスケ
【THE THOR】の公式マニュアルサイトよりは分かり易いと思うよ!
【TOPページ設定】ではサイトのトップページにいろんな方式で記事を表示する機能を追加することができます。

・メインビジュアルを表示する(画像・動画・スライドショー)

・メインビジュアルの下にお知らせを設置する

・カルーセルスライダーを設置する

・ピックアップ3記事を設置する

・記事ランキングを設置する

・カテゴリ最新記事を設置する

【TOPページ設定】のメニューは以下のようになっています。

 

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

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

 

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

 

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

 

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

 

メインビジュアル設定

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

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

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

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

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

 

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

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

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

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

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

ノーマルサイズ
ビッグサイズ
画像サイズが大きいせいか「ノーマルサイズ」と「ビッグサイズ」ではほぼ変化がありませんでした。
若干「ビッグサイズ」の方が画質が良くなったかなと…。

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

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

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

 

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

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

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

縦550pxの場合
縦300pxの場合

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

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

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

 

静止画時の設定

■画像を登録

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

 

■画像のマスクを選択

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

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

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

ブラックマスク
ブラックメッシュマスク

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

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

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

カラー
カラー+画像グレー
テキストやリンクボタンを表示することもできます。
入力例
表示例

YouTube背景動画時の設定

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

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

■YouTube動画IDを入力

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

 

スライドショー時の設定1
スライドショー時の設定2
スライドショー時の設定3
スライドショー時の設定4
スライドショー時の設定5

スライドショー時の設定

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

 

■自動再生機能の選択

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

 

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

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

 

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

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

 

スライドショー1〜4の設定

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

 

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

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

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

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

記入例
表示例

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

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

 

■キャッチコピーを入力

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

 

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

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

 

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

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

■背景色を指定

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

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

記事一覧の表示スタイルの1つで、横に並べられた記事アイキャッチが自動で横にスクロールするものです。

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

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

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

 

■表示条件を選択

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

 

■指定するIDを入力

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

 

■表示件数を指定

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

PC表示の場合5件表示されるため6件以上をオススメします。

スマホ表示だと3件表示されます。

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

画像の横と縦の長さの比率のことです。16(横):9(縦)ということになります。
「16:9」「4:3」「1:1」から選択します。
もともとの画像サイズを選択した比率に縮尺して表示します。

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記事を設置する

・記事ランキングを設置する

・カテゴリ最新記事を設置する

色々試してみて、サイト目的に合ったトップページを作りましょう。
KENNOSUKE TWITTER