THE THOR のメインビジュアルはPCでもスマホでもインパクトのある表示が出来るようそれぞれに高さを設定することができます。とても簡単。
ただしメインビジュアルの範囲に入らない部分は切れてしまいます。表示が必要な部分は中央に寄せて切れないように対処すれば良し。
でもやっぱり「画像を全部表示したい」って思いますよね。
というわけで「メインビジュアルが切れないカスタマイズ」をしてみました。
そうなんです。だから標準仕様は結構良くできていると思います。このカスタマイズは工夫しだいで色々な表現ができるのとウインドウサイズの変化に画像が対応できるようになるのが良い点です。
理想のメインビジュアルを目指してチャンジしてみてください。
- 画像が切れない
- ウインドウサイズの変化に対応
- PC/スマホとも同じ画像表示が可能
- 個別に変更もOK
この記事のカスタマイズとは別に、メインビジュアルの基準点を変更するカスタマイズもあります。かなり印象が変わるのでこちらも参考にどうぞ。
THE THOR のメインビジュアル の基準位置を変更するカスタマイズを行いました。 例えば「メインビジュアルの左上にロゴを表記」した場合、画面サイズにより切れてしまうことがありますよね。画像の左上を基準にして配置することでこれを防ぎ[…]
THE THOR メインビジュアルの画像が切れない カスタマイズの条件
このカスタマイズには少し条件があります。
メインビジュアルのサイズ設定
メインビジュアルは3種類あります。使用するのはワイドサイズ(default)です。それ以外のサイズでも適用できますが少し画像が切れることになります。
- ワイドサイズ(default)
- ノーマルサイズ
- ビッグサイズ
ノーマルサイズとビッグサイズでは少し画像が切れます。対処法もありますが今回は割愛。
メインビジュアルの範囲に合わせた画像を準備
使用する画像のアスペクト比を設定する必要があります。例えば 16:9 や 4:3 など画像の縦横比がわからないと対応することができません。メインビジュアルを 16:9 にするとしたら1600px×900pxのように比率通りの画像が必要になります。
この記事では 16:9 のメインビジュアルを作っていきます。
THE THOR メインビジュアルの画像が切れない カスタマイズ
画像の縦横比は決まりましたか？ちなみに 4:3 や 1:1 だとPCでとんでもなく大きくなるので注意してください。
カスタマイズはCSSで行います。
メインビジュアルの設定を準備
外観 → カスタマイズ → TOPページ設定[THE] → メインビジュアル設定
メインビジュアルを表示するように設定。表示サイズはワイド(default)を推奨します。縦幅は入力しなくてOK
メインビジュアルの表示モードは静止画(default)を設定。用意した画像を登録してください。マスクやボタンは好みに応じて設定。
- メインビジュアルを表示
- ワイド(default)
- 静止画(default)
CSSの記述
追加CSSに以下のコードをコピペしてください。
外観 → カスタマイズ → 追加CSS
/* メインビジュアルをそのままのアスペクト比で */
.still{
height: 56.25vw;
}
.still__bg, .still__box, .still__img {
height: 56.25vw;
}
@media only screen and (min-width: 768px){
.still {
height: 56.25vw;
}
.still__bg, .still__box, .still__img {
height: 56.25vw;
}
}
以上で完成です。
PC画面でウインドウ幅を変えて動作を確認してください。またスマホで画像が切れずに表示されているかもチェックしてくださいね。思ったよりスマホで小さくて、PCで大きいでしょ？w
他の縦横比にする場合
56.25vwの数値を変更してください。
例えば 4:3 であれば 75vw、1:1 であれば 100vw という感じで 縦÷横で数値がでます。
またスマホとPCで比率を変更することも可能です。（上の数値がスマホで下の数値がPC用の数値）画像は縦横全ての範囲をカバーするまで拡大します。範囲からはみ出た縦(または横)が非表示になるのを想像しつつ設定してみてください。
あとがき
今回使用した vwは、画面サイズ(ウインドウサイズ)に対して何%という数値です。
ワイド(default)は、画面いっぱい（つまり画面サイズ）なので縦を 56.25vwにすることで縦横比が16:9になります。ノーマルサイズやビッグサイズは余白があるため正確な 16:9 にはなりません。もちろん余白分と最大幅を指定すれば完全な表示も可能となります。
