WordPressにJavaScript背景画像スライダーVegasを導入する

デザイン上、問題ないレベルのレイアウトを安易に実現出来るため屡々採られる一部を幅広に取るモデルがあります。

Webページの一部分だけ幅広にするデザインモデルに於いて幅広のメイン画像部分を画像スライダーにするデザインモデル

画像スライダー導入で発生する問題

中でも図示した様にメイン画像の部分を幅広にするだけでなく其の画像が次々に切り替わる所謂画像スライダーを実現したいと言う要請は決して少なくはないようです。

しかし此の要請の実現に於いては問題が発生します。画像スライダー部分をページ全体を規定する一定の幅より広く取るとブラウザの表示時、デスクトップパソコンなどで充分画面サイズが広ければ問題ないのですが一般にノートPCなどの小さな画面では横幅が収まり切らず横スクロールが発生し、ちょっとしたことで画面が左右に動き扱い難いだけでなく此の様なデザインを良しとする向きには許容範囲を超える横スクロールバーが表示されてしまいます。

処で解決のために画像スライダー部分をレスポンシブ対応にするとブラウザの横表示が狭い場合には横幅はきっちり収まるのですが縦幅も応じて小さくなってしまい、他のコンテンツ部分と著しい差が生まれてしまいます。此の時画像だけならまだしもメイン画像部分には惹句などが記されることも多く其れ等の文字は極めて読み難い状態が招かれざるを得ません。

問題解決の基本方針

此の問題を解決するためにメイン画像部分を背景画像、即ちスタイルシートで background-images に指定する方法が考えられるでしょう。此の手法を取れば画像を常に一定のサイズで表示されるにも関わらず幅広の部分の横幅がブラウザサイズを超えてもブラウザサイズがページ全体を規定する一定の幅以上であれば横スクロールは発生しません。

画像スライダーについてはJavaScriptで実装するのが一般的ですが探してみた処其の様な要請を満たすライブラリが存在しましたので実際に実装してみた処を記事にものするものです。

JavaScriptの絵本第2版 Webプログラミングを始める新しい9つの扉 Kindle版

背景として利用可能な画像スライダーWordPressプラグイン

処で手元のWebサイトのシステムとしてはWordPressを採用していますから妥当なプラグインがあれば利用したいのですが、定番の画像スライダープラグインは余り背景として表示するには向いておらず実現の為には大幅な調整が必要となります。其処で背景で利用出来る画像スライダーと言う機能面から探してみた処以下のプラグインが見つかりました。 cbVegas 此のプラグインでは勿論背景画像をスライドさせる機能は実装されているのですが分かり易さに主眼を置いているようで例えば各ページ毎に設定が効いてワンクリックで表示させ得る簡便さはあるのですが些かカスタマイズ性は低い感があります。従って冒頭に記した様な要請には応え難いものとなっています。

非WordPressプラグインとしてのjQuery画像スライダー

適切なプラグインがあれば其れが望ましいのですが残念ながら見つけられませんでしたのででは生のJavaScriptならば必然的にカスタマイズ性も高いだろうと思い探してみた処、見付けたのが以下のJavaScriptライブラリ jQuery を利用した以下が公式サイトとなっているものです。 Vegas Background SlideShow 実を言えば順序は逆で先に Vegas を見付け、背景で処理できるスライダーの存在を確認し、ではと、WordPressで便利なプラグインを探して cbVegas を見付けたと言う経緯なのですが設定が思う通り行かなかったという次第、背景画像スライダー cbVegas プラグイン導入は却下してカスタマイズ性の高いJavaScript導入に踏み切ったのが先ず見付け出しておいた Vegas と言う塩梅です。名前が似通っているのですが製作者が同じなのか如何かなどの関係性は分かりません。参考になる情報としては ウェブラボ（株）スタッフブログ の2017年3月24日の記事がありました。背景画像でスライドショーを実装する

非WordPressプラグイン画像スライダーのWordPressへの適用

VegasプログラムのダウンロードはTransitions設定の説明ページでもある以下からZIPファイルでまとめてダウンロードできます。 Transitions - Documentation 実際にダウンロードした最新のバージョンは 2.4.0 でした。ダウンロードしたZIPファイルを解凍したフォルダを其の儘WordPressのテーマ内に設けた jsフォルダの下階層へアップロードします。 WordPressのheader.phpには jsフォルダ内のvegasフォルダの vegas.min.css ファイルを読み込ませる様に記述しました。 jQueryライブラリですので勿論jQueryを読み込んだ後に読み込ませる必要があります。また同様に専用のスタイルシートのvegasフォルダ内の vegas.min.css も読み込ませる様に記述します。

あとは最終的に稼働させるための設定JavaScriptを htmlのheadタグ内に記述するだけで、上のTransitions設定の説明ページのコードでも以下のセットアップページのコードでも利用すれば表示されるでしょう。 Set Up - Documentation ただ参考サイトのも設定コードが記述されており一般的に必要とされる要請は満たしていると思いますので其れを利用しても良いかも知れません。手元の作成WebサイトはWordPressですので $ で開始されるコードだとコンフリクトの問題が出る可能性がありますので例によって必要部分を jQuery に書き換える必要もあります。以上鑑みて設定コードは以下の様な記述にし、目論見通り表示されました。なお外部ファイルのして此れもheader.phpで読み込ませる様に記述しました。

jQuery(function(){
	jQuery('#vegasSlider').vegas({ //背景画像でスライドショーしたい場所の設定
		slides: [
			//スライドする画像を配列で設定
			{ src: './wp-content/themes/theme_name/js/vegas/img/slide01.jpg' },
			{ src: './wp-content/themes/theme_name/js/vegas/img/slide02.jpg', transition: 'slideRight2' },
			{ src: './wp-content/themes/theme_name/js/vegas/img/slide03.jpg', transition: 'slideDown2' }
		],
		delay: 5000, //スライドまでの時間ををミリ秒単位で設定
		timer: true, //タイマーバーの表示/非表示を切り替え // overlay: 'img/01.png', //オーバーレイする画像の設定
		animation: 'originalanime', //スライドのアニメーションを設定
		transition: 'blur', // 'swirlLeft2', //スライド間のエフェクトを設定
		transitionDuration: 1000 //エフェクト時間をミリ秒単位で設定
	});
});

独自CSSアニメーションの追加

Vegas公式サイトからはイメージスライド毎にtransition指定の可能なのが読み取れます。其れを記述したのがコード中の最初と2番目の赤字部分です。また同じく公式サイトからはanimationが独自追加可能であるのが読み取れます。其の独自アニメーションはスタイルシートに記述する仕様となっています。独自アニメーションを指定しているのが3番目の赤字部分になります。此処で指定した独自アニメーション animation: 'originalanime' の記述はスタイルシートに以下のように記しました。デフォルトのアニメーションのズームが少しきつく感じられたのでズームの幅を小さく変更したものです。

.vegas-animation-originalanime {
	animation: setouchi 5s ease-out -1s 1 alternate;
}
@keyframes originalanime {
	0% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

まとめ

HTML＆CSSとWebデザインが 1冊できちんと身につく本 Kindle版

WordPressのプラグインのcbVegasでは各投稿記事、固定ページに於いてチェックするとページ全体の背景に適用されてしまいましたが Vegasでは設定コードの冒頭にDOMのセレクタで適用範囲を指定可能ですので其れだけでも今回の要請は満たせます。

加えて各スライド毎に遷移仕様を変えたり独自アニメーションの追加迄可能となっています。設定コードに望みの動作を書き加えるに上の Transitions設定の説明ページや以下の公式の設定ページが用立つでしょう。 Settings - Documentation 独自のアニメーションを使用したい場合には CSS3で実装する仕様となっていますので、スタイルシートのアニメーションとしては以下の様な CSS3リファレンス情報ページが参考になるかも知れません。 animation－CSS3リファレンス

スタイルシートのアニメーションは思い通りに動かすのはなかなか難易度が高い気もします。ただ一般には最も目を引く部分でもありますので上手く嵌まれば訴求力も高い画像スライダーとなるものと思います。斯くなる上で此れも一般には気になられる向きの多いだろう横スクロールが無駄に発生せず、下手に縮小も発生しない今回の画像スライダーは時に依っては実に使い勝手の宜しからんものと思います。