この記事では、トップページのメインビジュアルを設定する方法について、解説しています。
メインビジュアルには、静止画以外に、Youtube、スライドショーを設定することができます。
どこで設定するの？
外観 ＞ カスタマイズ ＞ TOPページ設定 ＞ メインビジュアル設定 で行います。
メインビジュアル設定
メインビジュアル設定では、表示に関する設定を行います。
メインビジュアルを表示するか選択
「非表示（デフォルト）」「表示」の選択をします。
非表示(デフォルト）
表示
スマホは非表示にする
メインビジュアルを「表示」に設定すると、PCとスマホの両方に表示されます。スマホのみ非表示にしたい場合は、チェックを入れます。
表示サイズを変更する
画像などをそのまま配置した場合、大きく表示されたり、思っていたイメージとは違うと感じることがあります。
そんなときは、縦や横のサイズを調整してみましょう。
横幅を変更する
横幅の表示サイズは、「ワイドサイズ（デフォルト）」「ノーマル」「ビッグワイド」から選択します。
ワイドサイズ（デフォルト）
ノーマルサイズ
ビッグワイド
スマホ表示
スマホの場合、「ノーマルサイズ」「ビッグサイズ」の差はありませんでした。
高さ（縦）を変更する
高さは、数値で指定します。PC、スマホ、別々に設定することができます。
スマホの場合
ワイドサイズ（デフォルト）のイメージ（「ヘッダー検索窓」「固定フッター」は非表示にしています）。
高さを100に設定してみます。
高さを「100」に設定
150に設定してみます。
高さ「150」に設定
設定するときに、ライブプレビューを「スマホ」に切り替えておけば、イメージをつかみやすいですよ。
パソコンの場合
ワイドサイズ（デフォルト）
高さ「500」に設定
メインビジュアルの表示をモードを設定する
「静止画」「YouTube動画」「スライドショー」から選ぶことができます。
静止画時の設定
静止画を選択すると、「静止画時の設定」が表示されます。
選択した画像には、マスクをかけたり、タイトルやボタンなどをのせることができます。
画像を登録
「画像を選択」をクリックするとメディアライブラリが表示されます。メインビジュアルに設定したい画像を選択します。
選択した画像がカスタマイザー上にも表示されます。
YouTube背景動画時の設定
メインビジュアルに「YouTube背景動画」を選択した場合に表示されます。
動画再生前に表示する画像を登録
動画の読み込みを行っている間に表示される静止画像を設定します。
「画像を選択」をクリックすると、メディアライブラリが表示されるので、表示させたい画像を選択します。
サイトイメージ
真ん中に表示されているのは、動画の読み込みをしているときに表示されるマークです。
YouTube動画IDを入力
YouTubeの動画IDを入力します。YoutubeページのURLが「htts://www.youtube.com/watch?v=***********」の場合、「***********」の部分を入力します。
スライドショー時の設定
メインビジュアルに「スライドショー」を設定した場合に表示されます。
スライドショーの場合、画像上にカーソルを合わせると、ボタンが表示され、クリックすると次の画像を見ることができます。
画像を登録する
スライドショーは、画像を５枚まで設定することができます。スライドショー１の設定、２の設定・・・というように、登録項目が設けられているので、１から順番に必要な画像を登録していきます。
画像の登録方法は、静止画像の登録と同じです。
自動再生機能の選択
スライドショーを自動再生するかどうかの設定を行います。デフォルトでは、自動再生がOFFになっています。
再生速度の設定
自動再生をONにしているとき、再生速度を調整することができます。入力方法は、1秒=1000として設定します。スライド速度を3秒にしたい場合は、3000と入力します。
スライドエフェクトの設定
初期設定は、横スライドです。その他、平面回転、キューブ回転、カバーフローに変更することができます。
マスク、タイトル、ボタン
マスク、タイトル、ボタンの設定については、この後にまとめて解説しています。スライドショーについては、画像ごとに異なる「タイトル」「サブタイトル」「ボタン」の設定が可能となっています。
共通の設定（マスク、タイトル、ボタン）
画像のマスクを選択
デフォルトは「無し」ですが、「ブラック」「ブラックメッシュ」「カラー」「カラー + 画像グレー」から選択することができます。
また、「カラー」「カラー + 画像グレー」を選んだ場合は、色を指定することもできます。
カラー系マスク利用時の色の指定方法
- 「色を選択」ボタンをクリックします。
- クリックするとカラーピッカーが表示されるので、色を選択します。
サトコハ 色は、カラーコードでも指定することができるよ。「色を選択」ボタンの横にある欄（#00a568と表示があるところ）にコードを入力してね。
画像マスクのイメージ
カラーは#eded9aを使用。
タイトル、サブタイトルを設定する
タイトルやサブタイトルを入力すると、メインビジュアル上に表示することができます。
タイトル：BEACH RESORT
サブタイトル：非日常的な贅沢なひとときを過ごす
ボタンを配置する
ボタンテキストとURLを入力すると、メインビジュアル上にボタンを配置することができます。
