こんにちは、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をクリック。
すると、記事にスライドショーの情報が表示されます。
このままの状態でプレビューをクリックしてみて下さい。
スライドショーを確認する事が出来ます。
嬉しいですよね～(*^^*)
もし、サイドバーに表示させたい場合は
ウィジェットを表示させて、
テキストウィジェットをサイドバーに追加して
先ほど投稿編集ページで表示されていた
スライドショーの情報をそのまま貼り付けて下さい。
保存をクリックして
実際のサイドバーを確認してみると・・・。
このようにちゃんと表示されています♪
先ほども触れましたが、固定ページにも
表示できるので、お好きにスライドショーを
表示させてみて下さい^^
まとめ
少し長くなってしまいましたが、
お好みのスライドショーが
作れましたでしょうか？
細かい設定が出来るので、
慣れてきたら色々と設定を試してみるのも
良いと思います(^^)お疲れ様でした♪
