THE THOR の特徴でもあるメインビジュアルの良さにやっと気づいた、からあげ棒です。
メインビジュアルは画像サイズとデザインが難しく、いまだ暫定的な運用となっています。
だいぶ固まってきました。メインビジュアルはサイトの魅力アップに大きく貢献できる要素だと思います。
THE THORのメインビジュアル設定
設定自体は簡単です。
メインビジュアルの中に使うタイトルテキストや説明文、ボタンと画像サイズのバランスが難所になっています。
メインビジュアルを使う場合は「表示」を選択
メインビジュアルの表示サイズ設定
表示サイズは好みで3種から選んでください。
ワイドサイズ
画像がヘッダーと隙間なくつながりウインドウ幅いっぱいに表示される。ヘッダーの一部のようになる。
ノーマルサイズ
画像がヘッダーと隙間なくつながりメインカラムと同じ幅で画像を表示。
ビッグサイズ
ヘッダーと隙間ができます。下側とも隙間が出来るのでメインビジュアル画像が独立した状態になります。
表示の縦サイズについて
縦サイズは好みになります。タイトル文字、サブタイトル文字、ボタンが収まるような縦サイズにします。縦幅が小さ過ぎるとボタンやタイトルがはみ出て表示されなくなります。
THE THOR メインビジュアルの表示モード設定
制止画、YouTube背景動画、スライドショーの3つから選べます。
特に難しいところはなく設定項目を埋めていけOKです。
POINT初期設定では文字色が白になっているので色を変更する場合はタグを入力します。
<font color=”#000000″>サブタイトル</font>
POINTボタンはテキストとリンクの両方を入力しないと表示されません。
ボタンのカラーは別項目で変更します。プライマリーボタンの設定がメインビジュアルのボタン設定に適用されます。
※プライマリーボタンとメインビジュアルを指定して個別にCSSで装飾することも可能です。
メインビジュアルの画像サイズについて
メインビジュアル設定ワイドサイズでの話となります。他の設定では検証していないのでご了承ください。
メインビジュアルの画像サイズについては推奨サイズがありません。
公式フォーラムでも大きい画像というだけでオススメサイズは明記されていません。
THE THOR のデモサイトで使われているサイズ 1920×1152px（または1280×853）となっています。
当サイトでのサイズは、1700×765 / 1920×500 の2種類のサイズを使用しています。
縦幅は前述通りスマホ[縦]300px / PC表示[縦]450px の設定です。
メインビジュアルは画面サイズ幅（ウインドウ幅）によって画像サイズが変化します。
自分で設定する縦幅が基本になります。画像の横幅が足りている間、画像の縦幅は維持されます。画像よりもウインドウ幅が大きくなるとその分画像が拡大されます。縦幅のスペースは設定で固定しているので、はみ出した画像は表示されないこととなります。
※以上は公式での解説ではありません。あくまで私の推測です。
メインビジュアル画像の挙動サンプル
以下はメインビジュアルの縦幅を450pxにした場合のサンプルです。
画像は縦横比は保ったまま縮小されます。
画像の縦幅は設定値になり、横幅はウインドウ幅（画面幅）にあわせて成り行きでカットされます。
画像が足りなくなるとウインドウ幅にあわせて画像が拡大されます。縦横比は保ったままなので縦幅が設定値を超えて大きくなります。
設定値より大きくなった分の画像はカットされます。
以上、間違っているかもしれませんが概ねこのような挙動をすると思います。
全てのサイズで思ったような表示をするのは難しいかも知れません。PC表示でウインドウ幅を極端に大きくした場合の表示は妥協して良いと思います。
からあげ棒、オススメのメインビジュアルサイズ
メインビジュアルに設定する縦幅によって必要な横幅が大きく変わってきます。
オススメの画像サイズはケースバイケースということになります。
当サイトの実践上では1920×500 というサイズがどの端末でもほとんど変化なく表示ができています。ただし表示されるのは真ん中部分がほとんどで左右は色があるだけです。画像が足りなくなり縦幅が変動するのを嫌ってかなり横長の画像となっています。
現状でのオススメのメインビジュアル画像サイズは 1920×500 くらいです。
※縦幅設定300〜450pxの場合
※今後変更になる場合があります
あとがき
THE THOR のメインビジュアル機能は様々な使い方ができます。
制止画は通常の広告やビジュアル要素として。YouTube背景動画は強烈なインパクトを与えてくれます。スライドショーではトップページの要素を減らさずにスペース確保できます。
メインビジュアルは画像のサイズとデザインがポイントなので何度も調整して上手く活用したいですね。
