[無料WordPressテーマ] Luxeritasのパララックスヘッダーをカスタマイズしてみた

2019/08/172020/02/25WordPressテーマ

Luxeritasのバージョン3.6.9からヘッダーのパララックス機能が追加されました。実装の予定があると聞いた時から私がずっと楽しみにしていた機能です。

ただ、当サイトではヘッダーにAdSense表示用の枠を作っちゃってますし、これはこれで結構気に入ってたりするのでひとまず他の運営サイトで利用する事になりそうです。

そんなわけでまだお試し中なところはありますが、当エントリーではLuxeritasのパララックスヘッダーのちょっとしたカスタマイズを紹介したいと思います。

パララックスヘッダーのカスタマイズ内容

それでは当エントリーのカスタマイズ内容をざっくり説明いたします。

カスタマイズ結果のサンプル

百聞は一見に如かずという事でまずはサンプルのイメージから。ようやく運営方針が固まりかけたところなのでまだ正式に公開出来る状態ではありませんが、とりあえずこの画像のような感じになります。

ちなみに現物はこちらから確認出来ますのでよろしければどぞ。

トップページだけヘッダーを大きく

せっかくパララックス化したのにヘッダーの高さがあまり無いせいかイマイチ目立たない気もするので、これを大きく表示するようにしました。全ページでやるとちょっとしつこいかな？という事でトップページだけそうなる仕様です。

背景画像に透過オーバーレイ

背景画像の上に直接テキストやサイトロゴなどのバナーを乗せると文字が読みにくい場合があるので、背景画像に透過色でオーバーレイをかけています。

帯状メニューをヘッダーとシームレスに

通常はヘッダーの上に帯状メニューが表示されていますが、帯状メニューの位置を調整して背景を透過させる事でヘッダーの一部のように同化させてみました。

カスタマイズ前の準備と設定

次はカスタマイズに入る前の準備と設定についてです。

背景画像の設定

カスタマイザーの「背景・タイトル・ロゴ画像」は以下の設定が無難でしょうか。

• 「横幅いっぱい」にチェック
• Top
• Left
• no-repeat
• cover

背景画像や表示するデバイスの画面サイズによって挙動は変わってくると思いますが、ポジションをMiddle・Bottom・Centerなどに設定していると、スクロール時に背景画像の位置がズレる場合があります…たぶん。

そこで背景画像の設定を済ませたら、まずはカスタマイザーの「アニメーション」から「ヘッダーの視差スクロール」の値を10くらいにしてパララックスを有効化し、スクロールした時の動きをPC・タブレット・スマホのサイズでそれぞれ確認してみて下さい。

背景画像がズレる可能性があるのは初回スクロール時だけなので、表示サイズを切り替えた場合はリロードしてからあらためて確認した方が確実です。という事でカスタマイザーは一旦保存して閉じる必要があります。

何れにしてもPC・タブレット・スマホと全てのデバイスで背景画像のポジションを思い通りにするのはかなり根気のいる作業なので、ほどほどのところで妥協した方がよろしいかと思われます。

帯状メニューは固定しない

カスタマイザーの「ヘッダーの上の帯状メニュー」から「帯状メニューを固定表示にする」のチェックが入っていない事を確認します。当カスタマイズでは帯状メニューの背景色を透明にするので固定してしまうと非常に見辛くなるからです。

帯状メニューはそのままでいいという事ならこの限りではありませんが、その場合CSSの該当部分はコメントアウトするなり削除するなりして下さいね？

カスタマイズはCSSをコピペするだけ

基本的にはCSSをコピペするだけでカスタマイズ出来るようにしてありますが、あくまでもサンプルのようなものなので使用する背景画像に合わせてオーバーレイやテキスト・リンクの色などは変更する必要があるでしょう。

ヘッダーの高さはpaddingをつける事によって設定しているので、これも好きな値に調整していただいて構いません。とりあえずカスタマイザーを開いて追加CSSに以下のコードをまるっとコピペしたら、後はひと通り表示を確認してからstyle.cssに移動させるというやり方がいいように思います。

パララックスヘッダーカスタマイズ コピペ用CSS

/* 透過オーバーレイ */
#head-parallax {
	background: rgba( 0, 0, 0, 0.25 );
	/* 必要に応じてサイト名・キャッチフレーズの色や表示位置を変更 */
	color: #fff;
	text-align: center;
}

/* トップページのみヘッダーを大きく表示 */
.home #head-parallax {
	padding: 100px 0;
	display: flex;
}

/* タブレット・スマホでの高さ調整 */
@media screen and ( max-width: 767px ) {
	.home #head-parallax { padding: 50px 0; }
}

@media screen and ( max-width: 575px ) {
	.home #head-parallax { padding: 0; }
}

/* 帯状メニューの位置調整と背景を透過 */
#head-in { padding-top: 0; }
div[id*="head-band"] { background: transparent; }

尚、帯状メニューのテキスト・ホバー時の色などはカスタマイザーから設定出来るのでCSSでは何もしていません、念の為。

オーバーレイのバリエーション

先ほどのサンプルでは薄い黒のオーバーレイをかけただけでしたが、透過色でグラデーションをかけるのも結構いい感じでオススメです。

/* 普通に透過させる場合 */
background: rgba( 0, 0, 0, 0.25 );

/* 上から下へのグラデーション */
background: linear-gradient( rgba( 128, 0, 0, 0.5 ), rgba( 0, 128, 128, 0.5 ) );

/* 40度の角度で左下から右上にグラデーション */
background: linear-gradient( 40deg, rgba( 128, 0, 0, 0.5 ), rgba( 0, 128, 128, 0.5 ) );

カラーコードを16進形式からrgb形式に変換したい場合は、こちらのサイトなどを参考にするといいかもです。機会があればそれ用のエントリーを書いてみたいと思っていますが、とりあえず今はリンクだけという事でひとつご容赦を。

AMPページ用のCSS

パララックスはスクリプトを使用しているのでAMPページでは機能しませんが、見た目をオリジナルのページと同じにしたい場合もあるかと思います。

…ですが、AMPページには先ほどオーバーレイを設定した枠にあたる部分（#head-parallax）が無いので、疑似要素を使ってオーバーレイをかけます。

ヘッダーカスタマイズ for AMPページ コピペ用CSS

/* 要素を相対位置に */
#head-in {
	position: relative;
	/* 必要に応じてサイト名・キャッチフレーズの色や表示位置を変更 */
	color: #fff;
	text-align: center;
}

#head-in .head-cover { position: relative; }

/* 疑似要素にオーバーレイ */
#head-in::before {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: "";
	background: rgba( 0, 0, 0, 0.25 );
}

/* 帯状メニューの位置調整と背景透過 */
#head-in { padding-top: 0; }
div[id*="head-band"] { background: transparent; }

パララックスヘッダーのカスタマイズでした

CSSをコピペするだけの簡単作業でなかなかいい感じになるお手軽なカスタマイズではないかと思いますがどうでしょう。気が向いた方はぜひお試しいただければ幸いです。