ヘッダー下にパララックス効果のあるお知らせエリアを設置する方法

2018年6月28日
Web制作, WordPress

パララックス効果のお知らせエリアを設置する方法を紹介します。

こちらが作成する予定のパララックスのデモイメージです。
今回は例としてヘッダー下に設置しました。

さやか先生

あ、これよく見かけます！でも難しそうだなー

特殊な動きをするのでなんだか難しそうに感じますよね

やまかわ

さやか先生

Javascriptとかになると私お手上げなんです🤷‍

だいじょうぶです。実はこれ、HTMLとCSSしか使わないから意外にあっさり作れちゃうんですよ

やまかわ

さやか先生

えっ！そうなの！？じゃあ早速設置したいです！

WordPressならプラグインを入れる必要もありません。
もちろんHTMLとCSSで作成された静的ホームページにも実装可能です。

パララックスとは？

パララックス（parallax）は英語で「視差」という意味を持ちます。

パララックスという言葉自体は、Webデザインの業界では5年以上前からトレンドとなっており、今でもゲームや映画の公式サイト、イベントサイトなどで目にすることがあるのではないでしょうか。

レイヤーで分けたコンテンツの動きに差をつけることで、まるで画像が重なっているような奥行き感のあるデザインを表現できます。

訪問者の目を引くという効果も期待できるので、お知らせエリアへのパララックスの利用はうってつけでしょう。

カスタマイズの手順

カスタマイズは以下の手順でおこないます。

HTMLコードを追加する
パララックス用CSSを追加する
表示させるカテゴリーに分岐させる

１．HTMLコードを追加する

設置したい箇所に、以下のHTMLコードを追加してください。

<section>
	<div class="parallax">
	<!-- 内容  -->
	</div>
</section>

２．パララックス用CSSを追加する

次にCSSです。

.parallax {
	width: 100%;
	height: 500px;
	padding: 5%;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: 1.2pt;
	color: #555;
	background-image: url(画像URL);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* media Queries スマホ・タブレット */
@media screen and (min-width : 320px) and (max-width: 1024px) {
	.parallax {
		background-attachment: scroll;
	}
}

大事なのは3行目のheightです。
ここでパララックス背景の高さを指定します。
指定しないと画像自体表示されません。

9行目のbackground-imageには、表示する背景画像のURLを入れてください。

スマホとタブレットではデバイスの仕様上パララックスが使えません。
対策として、20行目～25行目でメディアクエリを使い、画像が固定されるようにします。

３．表示させるカテゴリーに分岐させる

専門ブログであれば全ページで固定のお知らせを表示してもいいでしょう。
ですが、雑記ブログなどの場合、全く関係のないカテゴリーでお知らせが表示されても訪問者にとっては鬱陶しかったりします。

分岐コードを使って、パララックスが表示されるページを変更しましょう。

HTMLサイトではPHPでの分岐はできないので、それぞれのページにHTMLコードを記述してください。

トップページのみで表示する

1行目と7行目のif文で挟むと、トップページのみで表示されるようになります。

<?php if(is_home()) : ?>
<section>
	<div class="parallax">
	<!-- 内容  -->
	</div>
</section>
<?php endif; ?>

特定のカテゴリーを含むページでのみで表示する

a、b、cのカテゴリーを含むページのみで表示します。

<?php if(in_category(array( 'a', 'b', 'c' ))) : ?>
<section>
	<div class="parallax">
	<!-- 内容  -->
	</div>
</section>
<?php endif; ?>

!in_categoryと先頭に!をつけると、「a、b、cを含まないページ」という逆の意味になります。

<?php if(!in_category(array( 'a', 'b', 'c' ))) : ?>
<section>
	<div class="parallax">
	<!-- 内容  -->
	</div>
</section>
<?php endif; ?>

elseで複数のお知らせをページごとに表示する

<?php else : ?>を使い、aのカテゴリでは「内容A」、bのカテゴリでは「内容B」、それ以外では「内容C」のパララックスを表示するといった分岐をおこなうこともできます。

<?php if(in_category ( 'a' ) : ?>
<section>
	<div class="parallax">
	<!-- 内容A  -->
	</div>
</section>
<?php else : ?>
<?php if(in_category ( 'b' ) : ?>
<section>
	<div class="parallax">
	<!-- 内容B  -->
	</div>
</section>
<?php endif; ?>
<section>
	<div class="parallax">
	<!-- 内容C  -->
	</div>
</section>

複数の分岐コードを組み合わせて表示する

以下は当ブログの例です。
3つの分岐コードを組み合わせています。

<?php if(is_front_page() || is_page('profile') || !in_category(array( 'mr-children', 'photo', 'diary', 'gadget' ))) : ?>
<section>
	<div class="parallax">
	<!-- 内容  -->
	</div>
</section>
<?php endif; ?>

トップページと固定ページはプロフィールページで表示。
mr-children、photo、diary、gadgetのスラッグを持つページでは表示しないという意味になります。

その他の分岐タグについては以下を参考にしてください。

参考条件分岐タグ – WordPress Codex 日本語版