ワードプレスLuxeritasでヘッダー画像高さをページごとに変更する方法

2021年5月9日

ワードプレスのテーマLuxeritasは無料でありながら高速・高機能なテーマなので、このウェブチルサイトでも採用中です。

ただよくヘッダー画像の設定については次の声をよく聞きます。
『ヘッダー画像のサイズ（高さ）を大きな画像を選んだ場合、それが全ページに反映されてしまう』
『記事ページなどは高さを低くしたい』

しかし、このウェブチルサイトでは、トップページとそれ以外のページのヘッダー画像の高さを変更して表示させています。

この記事でわかること

テーマLuseritasで、トップページとそれ以外でヘッダー画像の高さを変更する方法

1. ウェブチルサイトで設定中のヘッダー画像
- 1.1. スマホでは縦長画像で固定
- 1.2. PCでは横長画像で高さをページにより変更
2. テーマカスタマイザーでの設定
- 2.1. 背景の設定
- 2.2. パララックス設定（アニメーション）
3. カスタムCSSでの設定
- 3.1. カスタムCSSの内容解説
4. まとめ

ウェブチルサイトで設定中のヘッダー画像

ウェブチルサイトでは、2021年5月現在次のような設定としています。

スマホでは縦長画像で固定

PCでは横長画像で高さをページにより変更

PC（1920×1080px）での画面表示例です。

まずはトップページ

続いて個別記事ページ

このようにPC表示（正確には481px以上のWindow幅の場合）には、トップページはヘッダー画像を大きく表示させ、それ以外のページでは高さ250pxに縮小させています。

この設定内容について、以下に紹介していきます。

テーマカスタマイザーでの設定

まずはテーマカスタマイザーでの設定です。

背景の設定

ダッシュボードメニューの外観＞カスタマイズ＞背景・タイトル・ロゴ画像　の中のヘッダー背景画像を次のように設定しています。

指定している画像は、上のように縦長の画像で、スマホ用を想定したものです。

PC用の画像（横長画像）は、後ほどカスタムCSSで設定します。

画像のサイズとしては
・横幅いっぱい
・画像に合わせて高さを自動的に調節する
背景画像の設定として、
・配置を上・中央
・no-repeat
・カバー
を選択することで、画像の縦横比を固定して横幅いっぱいの表示としています。

このあたりは好みによって設定変更すればよいでしょう。

パララックス設定（アニメーション）

ダッシュボードメニュー　外観＞カスタマイズ＞アニメーション　にてパララックス設定をしています。

これも好みですので、必ずしも設定する必要はありません。

カスタムCSSでの設定

カスタムCSSとして次の記述をすることで、PC用（481px以上のWindowサイズ）での設定をしています。

/* ヘッダー画像の表示  */
@media screen and (min-width:481px){
	div#head-parallax {
		background-image: url("https://web-children.com/wp-content/uploads/2020/10/header_girl-home-pc2.jpg");
		padding-bottom: calc(600/1920*100%);
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
	}
	.single div#head-parallax,
	.page div#head-parallax,
	.archive div#head-parallax,
	.error404 div#head-parallax,
	.search div#head-parallax  {
		padding-bottom: 0;
		height: 250px;
	}
	div#head-in {
		background-color: #EEF9FF;
	}
}

カスタムCSSは、子テーマのstyle.cssに記述します。