メインビジュアルの設定

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

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

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

 

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

メインビジュアル設定

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

メインビジュアル設定

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

 

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

 

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

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

 

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

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

 

ザ・トールのスマホ上のメインビジュアル
このように元画像の縦横比率を無視して指定したサイズで縦の長さが変更されてるのでスマホ上でも見えやすいですね!

 

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

 

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

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

・静止画(デフォルト)
・YouTube背景動画
・スライドショー

 

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

 

ザ・トールのメインビジュアルの背景動画※こちらは動画を配置したサンプル画像です

 

静止画時、Youtubeの背景動画時、スライドショー時の設定

こちらでは表示モードで選択した各モードを細かく設定できます。

※選択したモードによって設定できる内容が異なります。
ここでは表示モード「スライドショー」は省略しています。

 

<<静止画時の設定>>

メインビジュアルの設定
メインビジュアルの設定

 

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

 

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

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

 

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

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

 

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

 

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

 

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

 

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

 

<<Youtube背景動画時の設定>>

 

ザ・トールのYoutubeの背景動画の設定

Youtube背景動画設定でも基本は指定された場所に入力するだけなので簡単です。

一番最初の【YouTube動画IDを入力】は説明にある通り
公開されてるYouTube動画のURLの「v=」以降のIDを入力すれば反映されます。

もちろん、動画内にも同様にタイトルや説明文も入力できます。
さらにボタンを配置してリンクも張れるのでご自身で撮影したYoutubeの動画への誘導などにも活用できます!

 

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

スポンサーリンク
>THE THOR(ザ・トール)はサイトアフィエイトの強い味方です

THE THOR(ザ・トール)はサイトアフィエイトの強い味方です

ザ・トールはデザイン性・機能性・利便性・SEO対策・収益面などあらゆる場面で力強いサポートをしてくれます。 一度公式ホームページをご覧ください。

CTR IMG