ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

この記事でわかること

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

目次

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

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

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

スマホでのヘッダー画像表示

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

PC(1920×1080px)での画面表示例です。

まずはトップページ

PCのトップページ表示

続いて個別記事ページ

PCでの個別記事ページの表示

このように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に記述します。

CSSの内容について簡単に解説しておきます。

カスタムCSSの内容解説

カスタムCSSの解説

スマホ用とPC用画像の切り替え

まず、@media screen and (min-width:481px){ ・・・・}とすることで、このCSSを481px以上のWindows幅に適用させています。
480px以下(すなわちスマホ)では適用されず、もともとテーマカスタマイザーで設定した通りとなります。

次に実際に適用するCSSを赤枠の①②③の部分の解説です。

①画像の指定
background-image・・・の記述で、横長のPC用画像に切り替わります。
padding-bottom・・・の記述で、画像の縦横比を固定させます。

このあたりの内容については、こちらの記事で詳しく解説しています。

②ヘッダー画像の高さ設定

height: 250px; でヘッダー画像の高さを250pxに固定しています。

このときにセレクターをトップページ以外を指定することで、トップページでは①で設定した縦横比指定により画像全体が表示されます

③画像が表示されない場合の背景色を指定

この部分のCSSは記述しなくてもよいかもですが、私は保険として記述しています。
ご自分のサイトの雰囲気に合う背景色を指定ください。

まとめ

以上で、ヘッダー画像の切り替えができあがります。

まあぶっちゃけいえば、本記事の目的達成としては、上の②ヘッダー画像の高さ設定のところだけです。

なのでそのほかの部分は参考情報としてとらえて頂ければよいかと。
少し応用すれば、画像の高さだけでなくページごとにヘッダー画像そのものを変更することも可能なのがわかって頂けると思います。

また、Luxeritasのおすすめ機能を次の記事でまとめています。よかったら参考にしてみてくださいね。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる