こんにちは、chieです(^^)

今回は、ワードプレスでメルマガを紹介する
画像のスライドショーを簡単に作れるプラグイン
【Easing Slider】のインストールから設定方法
まで、図解入りで詳しく解説します。

ブログを見ている時に、
画像がスライドショーで表示されている
という状況を見たことがあると思います。

こんな感じですね。
[easingslider id=”1645″]

これ、自分で出来たらかっこいいなあ
と思った事ありませんか？

Easing Sliderを使えば、
スライドショーの画像の細かい設定から
表示速度まで自分で決める事が出来ます。

設定も意外と簡単なのでご安心ください。

ちなみに、画像は自分で用意したものを使います。

私は、無料画像サイトなどでダウンロードした画像に
文字を入れて編集したものを使っています♪

枚数に制限はありません。
設定前に用意しておいて下さいね^^

Easing Sliderのインストール

さっそくインストールしていきましょう。

まずは、ワードプレスのダッシュボードから
【プラグイン】→【新規追加】をクリック。

①画面右上の検索窓にEasing Sliderと打ち込んで、

②今すぐインストールをクリック。

有効化をクリック。

これでインストールは完了です(^^)

Easing Sliderの設定方法

Easing Sliderのインストールにより、
ダッシュボードにSlidersという項目が追加されています。

スライドショーの設定はここから行うので、
【Sliders】→【Add new】をクリックして下さい。

①これから作るスライドショーの名前を決めます。

自分で管理した時に分かりやすい名前であれば
何でも大丈夫です^^

入力したら、②のAdd Slidesをクリック。

事前に準備していた、
スライドショーに使う画像を選択します。

ドラッグ＆ドロップかファイルを選択で選びます。

通常のメディアライブラリと同じ作業ですね。

スライドショーに使いたい画像をすべて選択したら、
右下のInsert into Sliderをクリック。

選択した画像が表示されました。

この順番でスライドショーとして表示されるので、
順番を変えたい場合は画像を左クリックして
選択したまま左右に入れ替えて下さい。

各画像の上にカーソルを合わせると、
このような表示が出ます。

①のマークをクリックすると、画像の設定が出来ます。

②をクリックすると、画像をスライドショーから外す事が出来ます。

①をクリックして設定を行いましょう。

右側の設定をしていきます。

拡大しました。

①まず、Custom URLを選択してください。

②に、メルマガの登録ページのURLを入力します。

③にチェックを入れて、画像をクリックした時に
　違うタブで開かれるように設定をします。

④のUpdateをクリックして設定を確定しましょう。

今の設定を、残りの画像にも同じようにして下さい。

画像の設定ができたら、続いて右側の
細かい設定をしていきましょう。

上から順に説明します。

表示される画像の大きさを決めます。

基本的には、使う画像と同じくらいのサイズが良いです。

Make 100% full width.にチェックを入れる事で、
表示される画面いっぱいに画像を表示させることが出来ます。

チェックを入れた方がバランスよく表示されます。

画面の表示設定です。

Effect:でFedeを選ぶと、フェードアウトするように
画面がぼや～っとなって次の画像に切り替わります。

Slideを選ぶと、横にスライドする形で
次の画像に切り替わります。

ここはお好みで決めて下さい(^^)

下の数字の部分ですが、
ここの数字が大きい程画面が切り替わる
速度が遅くなります。

1000=1秒で計算して下さい。

ここにはチェックを入れておきましょう。

画像の読み込み時間を短縮する事で、
ブログの表示速度を上げる効果があります。

スライドショーを見た人が、
画像を操作できるかどうかの設定です。

Arrows:のEnableを選択する事で可能になります。
画像では、このように矢印が表示されます。

On Hover:のFalseを選択すると、
常にこの矢印が表示される状態にできます。

Position:では、矢印を内側に表示させるか
外側に表示させるかを選べます。

画像の枚数分表示される丸いアイコンの設定です。

この部分ですね。

Pagination:のEnableを選択すると表示されます。

On Hover:のFalseを選択する事で、
常にこの丸い部分を表示させる事が出来ます。

Position:では、この丸い表示をどのように
表示させるかを細かく設定できます。

色々試してみて、お好みの設定にして下さい^^

最後の項目です。

Playback:のEnableを選択する事で、
自動でスライドショーが繰り返し表示されます。

チェックを入れておきましょう。

Pause Duration:で画像1つ1つの表示時間を
設定できます。

1000=1秒で計算して下さい。

ここまで設定が終わったら、
Publishをクリックで完了です。

ダッシュボードから、
【Sliders】→【All Sliders】をクリックしてみて下さい。

先ほど作ったスライドショーが保存されています。

このタイトルをクリックすると、また設定をする事が出来ます。

スライドショーを表示させる方法

作ったスライドショーを記事に表示させたい場合、

投稿ページを表示させると上部に
表示されているAdd Sliderをクリックします。

(固定ページにも同じ表示が出ます。)

①先ほど作ったスライドショーを選択して、

②insert Sliderをクリック。

すると、記事にスライドショーの情報が表示されます。

このままの状態でプレビューをクリックしてみて下さい。

スライドショーを確認する事が出来ます。

嬉しいですよね～(*^^*)

もし、サイドバーに表示させたい場合は

ウィジェットを表示させて、

テキストウィジェットをサイドバーに追加して

先ほど投稿編集ページで表示されていた
スライドショーの情報をそのまま貼り付けて下さい。

保存をクリックして
実際のサイドバーを確認してみると・・・。

このようにちゃんと表示されています♪

先ほども触れましたが、固定ページにも
表示できるので、お好きにスライドショーを
表示させてみて下さい^^

まとめ

少し長くなってしまいましたが、
お好みのスライドショーが
作れましたでしょうか？

細かい設定が出来るので、
慣れてきたら色々と設定を試してみるのも
良いと思います(^^)お疲れ様でした♪