ララランド鳥獣戯画

前回の記事、記事の中の画像スライダーにはMetaSliderプラグインがいい感じではシンプルなスライダー用プラグインを紹介しました。

直感的な操作で使い勝手がよく、かなり多岐に渡って設定ができる優れたプラグインでしたが、実はサムネイル表示には対応していないんですよね(スライダーの下とかに小っちゃい画像を並べて表示させるやつ)。

 

 

サムネイル付きのスライダーのほうがオシャレだぜイエーーーーーッ!

なんて人のために。

 

 

今回はサムネイル付きスライダーが簡単に実現できるWordPressプラグインの紹介です。その名も「Master Slider」だ!!

 

 

Master Sliderの特徴

・基本スライダーレイアウトは8種類
・デザインかなりオシャレ
・デモとして完成したスライダーを編集して作れるので操作が直観的
・ショートコードを埋め込んで使う
・phpに埋め込むためのコードも発行してくれる
・有料ライセンスを買えば、さらにレイアウト70種類追加

 

Master Sliderの導入方法

Master-Slider

まずはプラグインをインストールしてきましょう。

「Master Slider」でプラグイン検索すると上記のような「Master Slider – Responsive Touch Slider」というのが見つかりますので、これをインストールしてちゃちゃっと有効化しちゃいましょう。

 

 

マスタースライダー

すると左側のメニューバーに「Master Slider」の文字が現れます。ここから管理画面に進んでいきましょう。

 

 

まずは何もスライダーの設定が存在していないので、新しく作るところから。

左下の「Create New Slider」のボタンから作成画面へ進んでいきます。

 

 

 

Master Slider

ここではスライダーの基本デザインを選びます。最初から自由に選択できるのは8種類あって、どれも個性的で整ったレイアウトをしています。

画面を下にスクロールするとさらに70種類のデザインがありますが、これは有料ライセンス限定。ライセンスの取得には24$かかります。しかもドメインごとにかかってくる上に商用利用はNGのようなので、とりあえずこだわりなければ無料のままでよいかと思います。

 

 

Slider with Horizontal Thumbn

とりあえず今回はスタンダードそうなやつで。一番左上にあった「Slider with Horizontal Thumbnails」で試してみましょー!

 

 

 

選択すると、こういった感じでスライダーの詳細を設定する画面に進みます。

なんと、最初からにサンプルとして画像の登録がされた状態で、すでにスライダーとして実働可能な状態にあるじゃあないですか! 表示されたショートコードを記事内に埋め込むだけでスライダーが使用できちゃいます!

 

 

できた!

サムネイル画像つきスライダーだ!!

 

 

 

スライダー設置完了。

みなさん、またどこかでお会いしましょーーーー!

 

 

 

 

 

 

うそです、ごめんなさい。

ちゃんと設定方法の解説します。

 

Master Sliderの具体的な設定方法

1. Slider Settingタブ

SliderSettingタブ

まずは一番左上の「Slider Setting」タブの画面から設定できる項目から。スライダーデザインや挙動についての基本項目の設定です。全部の機能の説明は難しいですが、代表的な設定項目だけリストアップするとこんな感じです。

【基本設定】
・スライダーの名称
・スライダーのサイズ
・トリミングやリサイズによる画像のサイズ合わせ ON/OFF
・フルスクリーン表示 ON/OFF

【スライダー遷移】
・画像の切り替え方法 スライド/フェード
・切り替え演出の速度
・スライド方向 縦/横

【ナビゲーション設定】
・画像のループ ON/OF
・自動スライド ON/OFF
・自動スライド時にカーソルを置いたとき一時ストップ ON/OFF
・自動スライド時に最終画像で一時ストップ ON/OFF
・画像ランダム表示 ON/OFF
・一番最初に表示する画像選択
・タッチスワイプでの切り替え ON/OFF
・マウススワイプでの切り替え ON/OFF
・マウスホイールでの切り替え ON/OFF
・カーソルを手袋アイコンにする ON/OFF
・スライダーが初めて画面内に入ってから画像表示開始 ON/OFF
・画像を読み込むタイミング

【外観】
・スライダーコントロールボタンのデザイン変更
・背景色や背景画像の設定
・CSSの設定

 

2. Slideタブ

ここでは画像そのものの設定を行います。指定のマスに順番に、画像もしくは動画を設定していくような感覚で操作ができます。

・画像の設定
・画像サイズの合わせ方の選択
・サムネイル画像の設定
・動画の設定
・テキストの設定
・CSSの設定
・Altタグの設定
・自動切り替え時の1枚ごとの表示時間の設定

 

3. Slider Controlタブ

スライダーを操作するため、左右の矢印アイコン、バレット(横並びの丸いアイコンのこと)、サムネイルなどの設定を行うことができます。

・スライダーコントロール7種を設置可能(複数化)
・コントロールのサイズ設定
・コントロールの位置設定
・マウスを離したときに非表示 ON/OFF
・動画再生時に非表示 ON/OFF
・スライダーサイズが小さいときに表示 ON/OFF

 

4. Slider Callbacksタブ

コールバック関数の設定ができます。スライダーが読み込まれたとき、スライダーが操作されたとき、クリックされたときなどのタイミングそれぞれに、自由に実行プログラムを記述することができます。編集にはJavaScriptの知識が必要になるので、よくわからない場合は触らないようにしましょう。

 

5. Upgrade To PROタブ

有料ライセンス取得へのリンクがあるページです。有料化するとテンプレートが70種類追加されたり、背景を動画にできたり、記事のスライダー、ネットショップ用の商品スライダーを設置できたりするみたいです。すいません、自分も有料ライセンスを使ったことがあるわけではないのであまり解説できませんが(汗)

 


Master Sliderでいくつかスライダーサンプル作ってた

スライダーサンプルその1

 
サムネイルを右側に縦に表示して、画像の切り替えは自動2秒ごと、カーソルを合わせると自動切り替えが一時停止する使用です。コントロールバレットは四角いデザインを選択して上側にセットしてみました。レスポンシブ考えずに設定したのでモバイルで見るとぐちゃっとしてますスイマセン。そもそも縦サムネデザインはモバイルに向いていないですね。

 

スライダーサンプルその2

テキストも埋め込める

こんな風にスライダーの中に文章を記載して、画像の切り替えと一緒に文章も同時に切り替えることが可能です。

HTMLベースで書けるので書体もかなり融通が利きます。
テーブルタグとかもこんな感じでOK!(使う予定があるとは言っていない)

セル1セル2
セル3セル4
ねこのてホームページ
画像だって挿入できちゃいまーす!!

 
スライダー内にテキストを埋め込んでみました。HTMLベースで書けるので、CSSを使えばデザインは自由自在です。作り手のセンスによってはかなりオシャレなレベルまで作り込めそう!こちらもレスポンシブ考えずに作っちゃってるのでモバイルだとテキストエリアがでかすぎですが(笑)モバイルの時はテキストエリア縮めるか、いっそ非表示がいいかもしれません。

 


Master Sliderまとめ

結論。
Master Sliderプラグインはめっちゃ便利です、ハイ。

シンプルなスライダーであれば以前紹介したMetaSliderプラグインで十分です(スライダーの切り替え挙動などではMetaSliderのほうが細かい設定ができる)。でもサムネイルコントロールやテキスト表示をするならこちらのMaster Sliderのほうが向いていて、カッコいいスライダーが手軽に作れます。それぞれ長所があるので作りたいデザインに合わせて選んでみてはいかがでしょうか♪

ではまた!