【WordPress】Luxeritasでフロントページにのみウィンドウ幅いっぱいのヘッダー画像を表示するCSS

2022.06.19WordPress

Luxeritasには標準でヘッダー画像表示機能がありますが、すべてのページで表示されてしまいます。
それだとちょっと使い勝手に影響するので、カスタマイザーを使わずCSSで表示できるようにしたいと思います。

当サイトでは以下のようにCSSを書きました。
子テーマの編集からスタイルシートに書き込んでもいいし、デザインファイルのstyle.cssを編集してもオッケーです。

.home #head-in { /* .homeを先頭につけることによってフロントページにのみヘッダー画像が表示されます */
  background-image: url("画像URL");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 90VH; /* ウィンドウの縦幅いっぱいに画像を表示したい時は100VHにします */
}
@media (max-width: 576px) { /* スマホ幅の時だけ高さを変えたいので以下のように記述 */
	.home #head-in {
	height: 60VH;
	}
}
.home .info { /* フロントページのみサイトロゴやサイト説明を非表示にする */
	display:none;
}

このように記述すると、当サイトでは以下のような画面表示になります。
帯状メニューは非表示にしています。ヘッダーナビの表示位置など、カスタマイザーの設定次第では違う画面になると思います。

PCでの表示
スマホでの表示

フロントページのみに適用されるCSSを記述したい時は、「.home」を先頭につければおおよそ解決します。参考までに。

ちなみにヘッダー背景画像や一部のアイキャッチ画像はCANVAで作成しています。デザインする気力が湧かない時は本当に頼りになります。（頑張って自力で作ってる時もありますよ！）

CSS,Luxeritas,WordPress