THE THOR(ザ・トール)メインビジュアル設定

THE THOR 記事一覧

THE THOR の特徴でもあるメインビジュアルの良さにやっと気づいた、からあげ棒です。

メインビジュアルは画像サイズとデザインが難しく、いまだ暫定的な運用となっています。

しかしメインビジュアルはサイトの魅力アップに大きく貢献できそうな気がしています。

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

設定自体は簡単です。

テキストとの兼ね合いで画像のサイズ調整、デザインが難所になっています。

 

外観 → カスタマイズ → TOPページ設定[THE] → メインビジュアル設定

メインビジュアルを使う場合は「表示」を選択

 

メインビジュアルの表示サイズ

表示サイズは好みで3種から選んでください。

ワイドサイズ
画像がヘッダーと隙間なくつながりウインドウ幅いっぱいに表示される。ヘッダーの一部のようになる。

ノーマルサイズ
ヘッダーと隙間ができてメインカラムと同じ幅で画像を表示。個別のバナーのようになる。

ビッグサイズ
ヘッダーと隙間ができてノーマルサイズより少し幅が拡がります。

 

表示の縦サイズについて

縦サイズは好みになります。タイトル文字、サブタイトル文字、ボタンが収まるような縦サイズにします。
小さいとボタンやタイトルがはみ出て表示されなくなります。
PC表示はウインドウのサイズによって画像が引き伸ばされるのでSVGファイルを利用したほうが良いかも知れません。

※参考
タイトル一行、サブタイトル一行、ボタンありで使用している僕の場合は、スマホ表示サイズ[縦]150 / PC表示サイズ[縦]300 にしています。必要なモノが収まる最低限のサイズとして暫定的にこのような設定にしています。

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

制止画、YouTube背景動画、スライドショーの3つから選べます。

特に難しいところはなく設定項目を埋めていけOKです。

 

初期設定では文字色が白になっているので色を変更する場合はタグを入力します。

<font color=”#000000″>タイトル</font>
<font color=”#000000″>サブタイトル</font>

 

ボタンはテキストとリンクの両方を入力しないと表示されません。

 

ボタンのカラーは別項目で変更します。プライマリーボタンの設定がメインビジュアルのボタン設定に適用されます。

外観 → カスタマイズ → パーツスタイル設定[THE] → 共通ボタン設定[全ページ用] → プライマリーボタンの設定

 

メインビジュアルで使う画像の適正サイズが不明です。

THE THOR のデモサイトで使われているサイズ 1920×1152px(または1280×853)を目安にしています。

スマホ表示時には中央部分が使用されますのでキャラクターなどの図柄をのせる場合は中央によせておいたほうが良いです。

あとがき

THE THOR のメインビジュアル機能は様々な使い方ができます。

制止画は通常の広告やビジュアル要素として。YouTube背景動画は強烈なインパクトを与えてくれます。スライドショーではトップページの要素を減らさずにスペース確保できます。

メインビジュアルは画像のサイズとデザインがポイントなので何度も調整して上手く活用したいですね。

THE THOR 記事一覧