WordPressでメルマガ紹介などの画像のスライドショーを簡単に作れるプラグイン
【Easing Slider】

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

 

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

 

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

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

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

 

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

 

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

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

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

 

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

 

Easing Sliderのインストール

 

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

 

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

 

 

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

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

 

 

有効化をクリック。

 

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

 

Easing Sliderの設定方法

 

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

 

スライドショーの設定はここから行うので、
SlidersAdd 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をクリック。

 

 

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

 

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

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

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

 

 

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

 

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

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

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

 

 

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

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

 

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

 

 

まとめ

 

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

 

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

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

      ■私が「就職」ではなく「ネットビジネス」という生き方を選択した理由
      ■自由を手に入れた今の現状
      ■あなたに伝えたい、ネットビジネスにおいて大事な考え方

などについての音声講座(無料メルマガ)を配信しています^^*

メルマガ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です