THE THOR の特徴でもあるメインビジュアルを【 ビッグサイズ 】に設定変更しました。
メインビジュアルはページの顔とも言える部分。より良い状態を目指して変更を繰り返しています。
いまさらながらビッグサイズを採用したのは「トップページ上部を雑誌の表紙のように表現したい」「画像サイズをシンプルに考えたい」「あまり使っている人を見かけない」などを理由です。
THE THORのメインビジュアル基本設定
設定自体は簡単です。
メインビジュアルの中に使うタイトルテキストや説明文、ボタンと画像サイズのバランスが難所になっています。
メインビジュアルを使う場合は「表示」を選択
メインビジュアルの表示サイズ設定
表示サイズは好みで3種から選んでください。
この記事ではビッグサイズを紹介しています。
ワイドサイズ
画像がヘッダーと隙間なくつながりウインドウ幅いっぱいに表示される。ヘッダーの一部のようになる。
ノーマルサイズ
画像がヘッダーと隙間なくつながりメインカラムと同じ幅で画像を表示。
ビッグサイズ
ヘッダーと隙間ができます。下側とも隙間が出来るのでメインビジュアル画像が独立した状態になります。
表示の縦サイズについて
縦サイズは好みになります。参考までに当サイトでは、スマホ400px/PC400pxに設定しています。
※設定は頻繁に変更しています。
THE THOR メインビジュアル ビッグサイズ をカスタマイズ
設定は前述のとおりで進んでいけば簡単です。
標準のまま設定するとメインビジュアルの上下に大きな隙間ができるので追加CSSを使って隙間を若干小さく変更しました。
外観 → カスタマイズ → 追加CSS
以下のコードを追加。
/*メインビジュアル上下余白を小さく変更*/
.keyBig {
margin-top: 15px;
margin-bottom: 15px;
}
カルーセルスライダーとの隙間もちょうど良くなりスッキリしました。
メインビジュアル下のお知らせも表示するようにしました。メインビジュアルは画像のみにしてリンク先はお知らせ設定で表示するのも良いかも知れません。
さらに当サイトではカルーセルスライダーの画像サイズを変更しています。
トップページを開くとヘッダー、メインビジュアル、カルーセルで画面がいっぱいになり狙いの通り雑誌表紙のようなトップとなりました。（スマホ表示）
あとがき
メインビジュアルについては他の記事でも書いています。
THE THOR の特徴でもあるメインビジュアルの良さにやっと気づいた、からあげ棒です。 メインビジュアルは画像サイズとデザインが難しく、いまだ暫定的な運用となっています。 だいぶ固まってきました。メインビジュアルはサイトの魅力[…]
こちらはワイドサイズでの画像サイズについてがメインの記事になります。
小さな会社&お店の Canva超入門 ~お洒落で目を引くチラシ・ポスター・名刺・ポストカードを無料で作る本
