メインビジュアルの設定

あなたのサイトに訪問した際、まず目につくのがドン！とヘッダーに表示されるメインビジュアル。

このメインビジュアルはいわゆるサイトの「顔」といっていい重要な部分です。
訪問者はファーストインプレッションで視覚的にどんなサイトか全体のイメージを捉える傾向があります。

このメインビジュアルについてはザ・トールで簡単に様々な表現が可能です。

【カスタマイズ→TOPページ設定→メインビジュアル設定】

「メインビジュアル設定」内では以下の設定が可能です。

メインビジュアル設定

こちらではPCとスマホでのメインビジュアルの表示/非表示や縦のサイズが変更でできます。

【メインビジュアルを表示するか選択】
「表示」にすることでメインビジュアルが表示されます。
その下のチェックボックスをONにすることでスマホでは非表示にできます。

【表示サイズ[横]を選択】
メインビジュアルの横サイズを以下の中から選択します。

・ワイドサイズ
・ノーマルサイズ
・ビッグサイズ

【スマホ表示時の表示サイズ[縦]を指定】
通常、このページの一番上の画像のようにPC上で横長の画像は、スマホを縦にして見る場合は横幅がスマホの画面の横幅に合わせて縮小されるので見えにくくなります。

それを回避する為にこちらの設定でスマホ表示上での縦サイズを入力して調整することができます。

このように元画像の縦横比率を無視して指定したサイズで縦の長さが変更されてるのでスマホ上でも見えやすいですね！

【PC表示時の表示サイズ[縦]を指定】
縦サイズの変更はスマホだけではなく、こちらで数字を入力すればPC上の縦サイズも変更できます。
意図しない表示になった場合は利用してみてください。

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

こちらではメインビジュアルの表示方法を以下の3種類から選ぶことができます。

飲食店などのホームページのメインビジュアルには稀に背景動画を使われていますが、ザ・トールでも簡単にインパクト抜群のビジュアルが設定できます。

ここからは表示モードで選択した各モードごとの細かい設定内容をご案内しきます。

※選択したモードによって設定できる内容が異なります。

静止画時の設定

【画像を登録】
メインビジュアルとして表示させたい画像を選択します。

【画像のマスクを選択】
選択した画像に以下の中からマスク効果などを選択できます。

・無し
・ブラック
・ブラックメッシュ
・カラー
・カラー+画像グレー

【カラー系マスク利用時の色を指定】
カラー系を選択し際に指定した色でマスク効果が施されます。

画像によって文字が見えにくくなる場合はカラーやマスクを利用することで画像の色調や明るさを調整ができます。

【タイトルを入力】
指定したメインビジュアルの画像に対してタイトルを設定できます。
ここのタイトルはh2タグなのでなるべくSEO対策を意識した文言が望ましいです。

【サブタイトルを入力】
補足的なテキストを入力します。

【ボタンのテキストを入力】
ここに入力したテキストのボタンが表示されます。

【ボタンのリンク先URLを入力】
ボタンを押した時のリンク先のURLを入力します。

Youtube背景動画時の設定

【動画再生前に表示する画像を登録】
設定した動画が再生される前に表示される画像（プレビュー）を設定します。
こちらはスマホ時にも表示されます。

【YouTube動画IDを入力】
こちらで背景動画にしたいYoutubeにアップされてる動画のURLのIDを入力します。

説明にある通りIDとはURLの「v=」以降の部分となります。

それ以降のカラーマスクやボタン、タイトルや説明文なども静止画と同様の設定をすることで動画内に表示できます。

※こちらは動画を配置したサンプル画像です

スライドショー時の設定

【自動再生機能の選択】
自動再生ONでスライドショーを自動で再生することができます。

【自動再生ON時の再生速度をミリ秒で入力】
自動再生時の速度を数字入力で決定します。（3秒=3000）

【スライドエフェクトの選択】
最大5枚のスライドの切り替えのエフェクトを以下から選択します。

・横スライド
・平面回転
・キューブ回転
・カバーフロー

以降のスライドショー1～5までの設定につきましては、使用したい分だけ
静止画やYotube背景動画と同様に画像やマスクやボタンを設定します。

あなただけのオリジナルのメインビジュアルを作成してみて下さい！