THE THOR（ザ･トール）で、ヘッダーボトムエリアの下に表示されるメインビジュアルとメインビジュアル下お知らせの設定手順をご紹介します。いずれもトップページだけに表示されます。
目を引く場所なので、お好みの画像などを設定してみてはいかがでしょうか。
メインビジュアルの設定
メインビジュアルは任意設定ですが、トップページでサイトの顔ともなります。サイトの特徴や売りなどを表現したり、インパクトを与えたりする手助けの一つになります。
以下の砂漠とラクダの部分がメインビジュアルの例になります。
設定するには、まずWordPressメニューの「外観」、「カスタマイズ」を選択して、THE THORメニューを表示させます。以降省略します。
THE THORメニューの「TOPページ設定」、「メインビジュアル設定」を選択します。
メインビジュアル設定
メインビジュアルの表示
メインビジュアルの表示をするかどうか設定できます。また、チェックしてスマホだけ非表示にすることもできます。
表示サイズ（横）
横の表示サイズを以下から選択できます。ビッグサイズとノーマルサイズの違いがほとんどありません。デフォルトのワイドサイズが個人的にはおすすめです。
- ワイドサイズ
- ビッグサイズ
- ノーマルサイズ
表示サイズ（縦）
縦の表示サイズをPC用とスマホ用で別々に設定できます。画面を見ながら設定しましょう。以下のデバイス毎のイメージがかなり役に立ちます。
THET HORでは、サイトのイメージがデバイス毎に見ること（エミュレートすること）ができます。THE THORメニューの下部に以下のようなものがあります。
左から順に「PC」、「タブレット」、「スマホ」のデバイスを選択することによって、それぞれのページイメージが表示されます。すばらしい機能です。
メインビジュアルの表示モード設定
メインビジュアルの表示モードを以下から選択できます。この選択で、その後の設定は変わります。
- 静止画
- YouTube背景動画
- スライドショー
静止画の設定
画像を登録
メインビジュアル用の画像を設定します。
画像のマスク
画像に掛けるマスクを以下から選択します。
- 無し
- ブラック
- ブラックメッシュ
- カラー
- カラー＋画像グレー
4.または5.のカラー系のマスクを選択した場合のみ、マスクをする色を指定することができます。
タイトル、サブタイトルなど
メインビジュアルの中にタイトル、サブタイトル、ボタンを表示させることができます。
以下が設定した時の例です。
YouTube背景動画の設定
動画再生前の画像
動画を再生する前に表示しておく画像を設定します。
YouTube動画
メインビジュアルにYouTube動画を設定します。設定方法はYouTube動画IDを設定するだけです。
動画のマスク～ボタンリンク先URL
動画のマスク以降すべて静止画の場合と同様の設定です。
スライドショーの設定
自動再生
スライドショーを自動再生するかどうか選択します。自動再生OFFの場合、訪問者が手動で動かします。手動だとスライドショーにする意味があまりないと思います。
再生速度
自動再生のを選択した場合の再生速度（スライドする間隔）を指定します。デフォルトでは3000ミリ秒になっています。
スライドエフェクト
4種類から選択します。
【横スライド】
オーソドックスな横にスライドするパターンです。
【平面回転】
忍者屋敷の扉が回転するような感じです。
【キューブ回転】
サイコロみたいに立体的なものが回転する感じです。
【カバーフロー】
古い画像が左にスライドしながら小さくなり、新しい画像が右からスライドしてくる感じです。
スライドショー１～５までの画像設定
スライドショーの画像はマックス５つまで指定できます。
一つ一つの設定方法は、静止画の設定方法と同様です。それぞれにボタンやタイトルが付けられます。
メインビジュアル下お知らせの設定
メインビジュアルの設定が表示になっているときだけ、メインビジュアル下お知らせ機能を使用することができます。メインビジュアル下も表示は任意です。
THE THORメニューの「TOPページ設定」、「メインビジュアル下お知らせ設定」を選択します。
メインビジュアル下の表示
メインビジュアル下の注目エリアを表示するかどうか選択します。
キャッチコピー
キャッチコピーを設定します。左側に表示されます。タブ利用可。
ボタン
ボタンの見出しと、リンク先URLを設定します。
背景色
背景色を指定します。
指定しなければ、THE THORメニューの「基本設定」、「基本スタイル設定」で指定したテーマカラーが表示されます。
以下（ラクダの部分を除く）が設定したサンプル画像になります。
今回は以上で終了です。お疲れさまでした。
コメント