この記事は約 3 分で読むことができます。

【最新版】Easing Slider “Lite”の設置方法(図解入り)

今回は、簡単にスライド式のバナーを設置することがでいる
Easing Slider “Lite”の設定手順を解説していきたと思います。

 

当ブログもEasing Slider “Lite”を使ってバナーを設置しています。

bn1

1つのスペースで複数のバナーを置くことができて大変便利なうえ、
サイトのデザイン性も上がるのでぜひ取り入れてみてください^^

 

まずは、プラグインの新規追加からEasing Slider “Lite”をインストールし、有効化します。

メニューに『Slideshow』が出現するので、『Edit Slideshow』をクリック

esl1

 

 

右側にある『Add Image』をクリック

esl2

 

 

あらかじめ用意しておいたバナーをメディアから選択し、『Insert into slideshow』で追加

追加した画像をクリック

esl3

 

 

各画像にリンク先URLなどを挿入し『Apply Cahnges』で確定

esl4

 

 

これでほぼ完了です。ここからは右端にある機能から微調整していきます。

esl5

 

 

『Dimensions』でバナーサイズ、レスポンシブ対応を決めます。レスポンシブ対にチェックを入れておくとスマホで見た時に画像サイズが最適化されます。

esl6

 

 

『Transitions』で画像が切り替わる効果と間隔時間を決めます。効果はFadeとSlideの2種類から選択。切り替わるスピードは1/100秒で記入します(例:3秒なら300と記入)

esl7

 

 

『Next&Previous Arrows』で、バナーを切り替える矢印を表示するかどうかを決めます。常に表示された状態にするか?マウスオーバー時だけにするか?矢印の表示は画像の内側か外側か?などを選択できます。

esl8

 

 

『Pagination Icons』で、ページマークの調整ができます。表示の有無、マウスオーバー設定、表示位置など細かく設定できます。

esl9

 

 

『Automatic Playback』で、自動スライドか手動か?を選択できます。画像を変えるスピードというのは、一つの画像を固定させておく時間です。1/1000秒で記入します(例:4秒なら4000)

esl10

 

 

最後に『Save Slideshow』をクリック

esl11

 

これで設定完了です!
お疲れ様でした^^

 

バナーはブログやサイトの顔となる部分です。

訪問者の目を引く綺麗なバナーを設置することで
即離脱防止にもなるので、このプラグインで自分のサイトの
デザイン性を高めてみてはどうでしょうか^^

 

 

このエントリーをはてなブックマークに追加

■まずはゼロから10万円を目指す!無料メール講座

meilmagazine

コメントを残す