THE THOR ザ・トール メインビジュアルの画像が切れない カスタマイズ

THE THOR のメインビジュアルはPCでもスマホでもインパクトのある表示が出来るようそれぞれに高さを設定することができます。とても簡単。

ただしメインビジュアルの範囲に入らない部分は切れてしまいます。表示が必要な部分は中央に寄せて切れないように対処すれば良し。

でもやっぱり「画像を全部表示したい」って思いますよね。

というわけで「メインビジュアルが切れないカスタマイズ」をしてみました。

 

 

そうなんです。だから標準仕様は結構良くできていると思います。このカスタマイズは工夫しだいで色々な表現ができるのとウインドウサイズの変化に画像が対応できるようになるのが良い点です。

理想のメインビジュアルを目指してチャンジしてみてください。

 

この記事のカスタマイズとは別に、メインビジュアルの基準点を変更するカスタマイズもあります。かなり印象が変わるのでこちらも参考にどうぞ。

 

THE THOR メインビジュアルの画像が切れない カスタマイズの条件

 

このカスタマイズには少し条件があります。

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

メインビジュアルは3種類あります。使用するのはワイドサイズ(default)です。それ以外のサイズでも適用できますが少し画像が切れることになります。

• ワイドサイズ(default)
• ノーマルサイズ
• ビッグサイズ

ノーマルサイズとビッグサイズでは少し画像が切れます。対処法もありますが今回は割愛。

 

メインビジュアルの範囲に合わせた画像を準備

使用する画像のアスペクト比を設定する必要があります。例えば 16:9 や 4:3 など画像の縦横比がわからないと対応することができません。メインビジュアルを 16:9 にするとしたら1600px×900pxのように比率通りの画像が必要になります。

この記事では 16:9 のメインビジュアルを作っていきます。

 

THE THOR メインビジュアルの画像が切れない カスタマイズ

 

画像の縦横比は決まりましたか？ちなみに 4:3 や 1:1 だとPCでとんでもなく大きくなるので注意してください。

カスタマイズはCSSで行います。

 

メインビジュアルの設定を準備

メインビジュアルを表示するように設定。表示サイズはワイド(default)を推奨します。縦幅は入力しなくてOK

メインビジュアルの表示モードは静止画(default)を設定。用意した画像を登録してください。マスクやボタンは好みに応じて設定。

 

 

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用の数値）画像は縦横全ての範囲をカバーするまで拡大します。範囲からはみ出た縦(または横)が非表示になるのを想像しつつ設定してみてください。

[wpap service=”with” type=”detail” id=”B08548F5NF” title=”初心者からちゃんとしたプロになる　HTML+CSS標準入門”]

 

あとがき

 

今回使用した vwは、画面サイズ(ウインドウサイズ)に対して何%という数値です。

ワイド(default)は、画面いっぱい（つまり画面サイズ）なので縦を 56.25vwにすることで縦横比が16:9になります。ノーマルサイズやビッグサイズは余白があるため正確な 16:9 にはなりません。もちろん余白分と最大幅を指定すれば完全な表示も可能となります。