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

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

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

だいぶ固まってきました。メインビジュアルはサイトの魅力アップに大きく貢献できる要素だと思います。




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

THE THOR

設定自体は簡単です。

メインビジュアルの中に使うタイトルテキストや説明文、ボタンと画像サイズのバランスが難所になっています。


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

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

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

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

ワイドサイズ(使用中です)

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

ノーマルサイズ

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

ビッグサイズ

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


表示の縦サイズについて

縦サイズは好みになります。タイトル文字、サブタイトル文字、ボタンが収まるような縦サイズにします。縦幅が小さ過ぎるとボタンやタイトルがはみ出て表示されなくなります。

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

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

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

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


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

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

 


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

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

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

※プライマリーボタンとメインビジュアルを指定して個別にCSSで装飾することも可能です。



メインビジュアルの画像サイズについて

メインビジュアル設定ワイドサイズでの話となります。他の設定では検証していないのでご了承ください。

メインビジュアルの画像サイズについては推奨サイズがありません。

公式フォーラムでも大きい画像というだけでオススメサイズは明記されていません。

THE THOR のデモサイトで使われているサイズ 1920×1152px(または1280×853)となっています。


当サイトでのサイズは、1700×765 / 1920×500 の2種類のサイズを使用しています。

縦幅は前述通りスマホ[縦]300px / PC表示[縦]450px の設定です。

 

メインビジュアルは画面サイズ幅(ウインドウ幅)によって画像サイズが変化します。

自分で設定する縦幅が基本になります。画像の横幅が足りている間、画像の縦幅は維持されます。画像よりもウインドウ幅が大きくなるとその分画像が拡大されます。縦幅のスペースは設定で固定しているので、はみ出した画像は表示されないこととなります。

※以上は公式での解説ではありません。あくまで私の推測です。

メインビジュアル画像の挙動サンプル

以下はメインビジュアルの縦幅を450pxにした場合のサンプルです。

メインビジュアル画像の挙動1

画像は縦横比は保ったまま縮小されます。

メインビジュアル画像の挙動2

画像の縦幅は設定値になり、横幅はウインドウ幅(画面幅)にあわせて成り行きでカットされます。

メインビジュアル画像の挙動3

画像が足りなくなるとウインドウ幅にあわせて画像が拡大されます。縦横比は保ったままなので縦幅が設定値を超えて大きくなります。
設定値より大きくなった分の画像はカットされます。


以上、間違っているかもしれませんが概ねこのような挙動をすると思います。

全てのサイズで思ったような表示をするのは難しいかも知れません。PC表示でウインドウ幅を極端に大きくした場合の表示は妥協して良いと思います。

からあげ棒、オススメのメインビジュアルサイズ

メインビジュアルに設定する縦幅によって必要な横幅が大きく変わってきます。

オススメの画像サイズはケースバイケースということになります。

当サイトの実践上では1920×500 というサイズがどの端末でもほとんど変化なく表示ができています。ただし表示されるのは真ん中部分がほとんどで左右は色があるだけです。画像が足りなくなり縦幅が変動するのを嫌ってかなり横長の画像となっています。

現状でのオススメのメインビジュアル画像サイズは 1920×500 くらいです。
※縦幅設定300〜450pxの場合
※今後変更になる場合があります

あとがき

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

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

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

THE THOR 記事一覧