先日、ビジネスサイト制作教室で、WordPressで制作中の生徒さんから「自動で画像が横にスライダーで、それぞれの写真の説明文やサムネールも同時に表示させたいのですが」と聞かれました。サムネールが必要ならばということでプラグインの「Master Slider」を紹介しましたが、設定項目がすべて英語なので、よくわからないとのことでしたので、ここで簡単に説明しておきました。スライダーのプラグインはたくさんあって迷いますが、サンプルがあるので、とても使いやすいのですよ。
ということで「マスタースライダー」を紹介しましたが、後日インストールしたが、設定項目がすべて英語なので、よくわからないとのことでした。
ということで、ここで簡単に説明しておきます。
画像をあまり使わずに説明しますので、マスタースライダーの設定画面を見ながら読み進んでくださいね。
スライダーは各種設定が可能です。
・画像の自動スライドができます。
・横幅の長さ調節ができます。
・サムネイルが表示できます。
・サムネイルの表示場所が選択できます。
・画像の説明テキストが表示できます。
・画像の説明テキストの表示場所が選択できます。
・Slide duration継続時間（スライドの変移スピード）の設定ができます。
などいろいろと設定できます。
まずプラグインを「Master Slider 」で検索して探し、インストールして有効化します。
通常の操作なのでインストール方法は省略します。
ダッシュボードに「Master Slider 」が表示されるのでクリックしさらに「Creiate New Slider」をクリックします。
「Sample Slider」が8つ表示されるので、左上の「Slider With Horizontal Thumnailes」を選択し「Create」をクリックします。
すると10枚のサンプル写真が入ったスライダーが自動で作成されます。（上のスライダー写真です）
サンプルの写真を削除して自分で用意した写真に差し替えます。
下部に表示されているショートコード（masterslider id=”1″などの形式）をスライダーを表示したいページに貼り付けます。
基本はこれで終了ですが、希望のスライダーに仕上げるために、以下に詳しい設定方法を説明します。
画面上に表示されている項目な中から次の３つのメニューを使います。
■Slider settings スライダーセッティング
スライダーの名前を入力したり、背景色、表示方法を選択する基本設定です。
■Slids スライド
使用するスライドの選択や修正、説明文の入力を行います。
■Slider control スライダーコントロール
サムネールや説明文（SlideInfo）を設定します。
■Slider nameスライダー名
スライダーの名前を入力します。最初は「Untitled Slider」またはサンプル名になっているので変更します。日本語でもOK。
■Slider widthスライダ幅
スライダーの横幅は、ピクセル単位でサイズを変更します。
■Slider heightスライダーの高さ
スライダーのベース高さはピクセル単位で変更します。
■「Automatically crop and resize slider images based on above size」
オンになっている場合は、トリミングによるサイズ変更が自動で行われます。
■Slider sizing methodスライダーサイジング方法
スライダのサイジング方法は「スライダーボックス内」または「全幅」で行うことができます。デフォルトのままでOKです。
■Auto-height Slider自動高さスライダー
オンになっている場合は、各スライドの高さを自動で適応させます。デフォルトのままでOKです。
■Slider wrapper widthスライダーラッパー幅
スライダ（スライダ親）のラッパー幅を設定します。空欄の場合は、スライダーが自動で設定します。デフォルトのままでOKです。
■Transitionトランジション
スライダーのスライドを変更するトランジションを指定します。（normal/fade）
■Transition speed遷移速度 （移動が始まって制止するまでの時間）
トランジションを変更するスピード量。表示時間ではないので注意。20がデフォルト。50以上の高値は推奨されません。
変化の速さを計測、5で5秒、10で2.5秒、20で1.3秒、30で0.7秒？くらいでした。デフォルトのままでOKです。
■Direction方向
スライド変化方向を指定（縦横）いくつかのテンプレートでサポートされていない場合があります。
■Slide spaceスライドスペース
ピクセル単位でスライド間の間隔値。白マージン
■Slide showスライドショー
自動再生スライドショーを有効にします。Onにする！
■Loop navigationループナビゲーション
連続スライディングモードを有効にします。
■Pause at the end slide最後のスライドで一時停止
最後のスライドに到達したとき、スライドショーを一時停止するかどうか。
■Pause on hoverホバーで一時停止
スライダーの上にマウスカーソルが移動の場合、スライドショーを一時休止かどうか。
■Random order順不同
ランダムスライドの順序を使用するかどうか。
■Start with slide スタートするスライド番号
スライダーでスライド番号を指定します。
■Touch swipe navigationタッチスワイプナビゲーション
ドラッグ/スワイプナビゲーションを有効にするかどうか。
■Mouse swipe navigationマウススワイプナビゲーション
ユーザがマウスドラッグのナビゲーションを使用することができます。
■Use grab cursorグラブカーソルを使用
マウスでスワイプしながら、スライダーはグラブマウスカーソルを使用するかどうか。
■Mouse wheelマウスホイール
マウスのスクロールホイールナビゲーションを可能にします。
■Slide preloadingスライドのプリロード
3つの異なる方法をサポートしている。当面デフォルトのままでよいのでは。
■Skinスキン
スライダーのスキンを指定することができます。すべてのスキンを見てみることができます。
■Align center slider controls中央のスライダコントロールを配置
スライダーが中央にUIコントロールを整列するかどうか。このオプションは、全幅モードでのみ有効です。
■Background image背景画像
スライダーの背景画像を選択することができます。
■Background color背景色
スライダーの背景色を指定します
■Class nameクラス名
スライダ主要素にカスタムクラス名を追加することができます。
■Inline styleインラインスタイル
主要素をスライダにカスタムCSSスタイルを追加することができます。
ここではスライドの入れ替えが終わっていれば、説明文を入力するだけです。
「Slide Info」をクリックするとエディタが表示され、該当スライドに説明文をつけることができます。
全部のスライドの入力が終わったら保存します。
デフォルト値は3秒間です。それぞれのスライドごとに変更する必要があります。いっぺんに変更する方法を探してみましたがわかりませんでした。ちょっとめんどうなのでそのまま3秒間にしておきました。
変更部分はの画像が下の方なので隠れて見えてないです。すいません。
ここではサムネイルと説明文の設定を行います。
まず、UsedControlに「Thumblist/Tabs」が表示されているかを確認します。
もしなければ、AddNewControlから追加します。
「Thumblist/Tabs」をクリックするとサムネイルの表示や大きさを設定できるパネルが表示されます。
まず、UsedControlに「Slide Info」が表示されているかを確認します。
もしなければ、AddNewControlから追加します。
「Slide Info」をクリックするとSlide Infoで説明文の表示のON/offや表示場所（上下左右）、表示範囲を設定できるパネルが表示されます。
Pingback: WordPress スライダー系プラグインまとめ – My Tips and Quotes