コンテンツスライダーでレスポンシブ対応なWordPressプラグインEasing Slider Liteの設定&使い方

どうも、こんにちはジュンペイです。

今回は、これがひとつあるだけでスタイリッシュになる!
そんな”動く画像”について説明していきます。

 

いろいろなところで画像がスライドしているのを見て、
ちょっと「自分でもやってみたいな」と思っても、
探せば結構種類があって結局どれがいのかわからないなんて事がよくあります。

 

それに、HTLMもそうですが、jqueryとかjavascriptと言われても
結局、どうすればいいんだ?と思いますよね?

 

そこで今回、非常に使いやすく、無料で、
それでいてかなりスタイリッシュなword pressプラグインの
コンテンツスライダー「Easing Slider “Lite”」を紹介します。

 

「Easing Slider “Lite”」

 

sraid13

 

「Easing Slider “Lite”」はword pressのプラグインで
英語表示ですがとにかく設定も簡単で汎用性もあり、
画像サイズやエフェクト、表示時間から切り替え時間まで設定可能です。

 

一見は百聞にしかづということで
「Easing Slider “Lite”」完成形はこんな感じです。

 

 

どうですか?
無料で作れるのになかなかいい感じです。

 

そして、何より「Easing Slider “Lite”」は何が良いかと言うと、
レスポンシブwebに対応しているということです。

 

レスポンシブwebとはここ最近普及の勢いがあるスマホでの
表示が可能で、自動的に画像サイズを変えてくれます。

 

これまでにもコンテンツスライダーのwordpressプラグインはありましたが、
レスポンシブwebに対応していないものもありました。

 

レスポンシブwebに対応していないと
PC表示とスマホ表示ではどうしても画像サイズが変わり崩れてしまいます。

 

なので、スマホ表示時にレイアウトを崩さないでコンテンツスライダーを使いたい場合は、
今回の「Easing Slider “Lite”」を参考にしてみてくださいね。

 

wordpressプラグイン「Easing Slider “Lite”」インストール方法

 

それでは「Easing Slider “Lite”」の設定方法を解説していきます。

 

▼まずwordpressから「Easing Slider “Lite”」とプラグインを検索します。

sraid10

 

検索してEasing Slider Liteと出てくれば、
▼今すぐインストールをクリック。

sraid11

 

▼インストール後、wordpress管理画面左に「SlideShow」が出てくるのでそちらをクリック

sraid12

 

 

「Easing Slider “Lite”」コンテンツスライダー表示設定

 

では、続いて「Easing Slider “Lite”」の詳細設定をしていきます。
英語表示ですが、日本語解説していきますし特に難しい事はありません。

 

▼add imagesをクリックして表示させたい画像を選択

 

srid1

 

▼画像にURL、タイトルテキストなどを入力しています。

 

sraid3

 

▼表示させたいリンク先を挿入。

▼Open link in  new tabを選択して新しいページを指定。

▼画像のタイトルと、カーソルを合わせたときに表示されるタイトルを挿入

 

sraid2

 

 

続いて、画像のエフェクト表示時間、切り替え時間などを設定していきます。

 

▼Dimensionsから、画像表示サイズ(Width:横幅、Height:縦)を指定

▼Make this slideshow responsiveにチェック
(これでレスポンンシブwebが対応します)

 

sraid4

 

▼Transitionsでエフェクトと画像表示時間の設定をします。

Effectではフェードとスライドを選択できます。

Durationで表示時間の設定
(100=1秒)

sraid5

 

▼Next&Previous Arrowsは矢印の設定をする事ができます。

▼Arrows
スライドに矢印を表示するか非表示にするか
Enable: 表示
Disable: 非表示

▼On Hover 矢印をカーソルを合わせた時に表示or常時表示
True:カーソルを合わせた時に表示
False:常時表示

▼Position 矢印を外側表示or内側表示

 

sraid6

 

▼Pagination lcons
スライドにページボタンを表示するか非表示にするか
Enable: 表示
Disable: 非表示

▼On Hover ページボタンをカーソルを合わせた時に表示or常時表示
True:カーソルを合わせた時に表示
False:常時表示

▼Position 矢印を外側表示or内側表示、表示位置

 

sraid7

 

▼Automatic Playback 画像の自動切替設定、切り替えスピード設定

▼Playback 画像を自動で切り替えるかどうか
Enable: 自動切替
Disable: 手動切替

▼Pause Duration 切替スピード変更

sraid8

 

全ての設定が完了したらSave Slideshowで保存をしましょう。

sraid9

 

これで一通り設定は完了です。
あとはHTMLかショートコードを表示させたいところに挿入すれば表示されるようになります。

 

▼HTMLとショートコード

SlideshowからView the Documentationをクリック
sraid14

 

▼ウィジェットなどに挿入する場合はショートコード

▼HTMLに直接書き込む場合はphpコード

sraid15

 

これでコンテンツスライダーの挿入完了です。
設定もボタンを選択していくだけなので、
比較的簡単でレスポンシブ対応も対応しているのでぜひ取り入れてみてくださいね。

 

 

 

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


コメントを残す