Easing Slider “Lite” スライドショープラグインの設定方法と使い方

どうも青春野郎です。

ここではワードプレスのレスポンシブwebに対応したスライドショープラグインである、

「Easing Slider “Lite”」 の設定方法と使い方について解説していきます。

サイトの差別化・装飾に有利に働いてくれるのがスライドショーです。

ちなみに当サイトでもトップページにスライドショーを使用しています。

ワードプレスではスライドショーのプラグインがいくつかあり、どれを使っていいのかが分からなかったりします。

その中で一番使いやすいのが「Easing Slider “Lite”」というプラグインでした。

このプラグインは、とにかく使いやすく、設定も非常にシンプルです。

それでは設定をしていきましょう。

Easing Slider “Lite”の設定方法と使い方

まず、「Easing Slider “Lite”」をインストールし、有効化します。

するとサイドバーに「SlideShow」が表示されますのでクリックします。

スクリーンショット 2014-01-31 23.05.49

1.Manage Slides

Manage Slidesから、Add Lmagesをクリックしてスライドさせたい画像を取り込みます。

スクリーンショット 2014-01-31 23.10.22

取り込んだ画像をクリックし、リンクを入力します。

スクリーンショット 2014-01-31 23.31.30

そして、

Open Link same tab/window(同ウインドウでリンクを開く)

Open Link in new tab/window(別ウインドウでリンクを開く)

どちらかを選択します。

タグは任意で入力し、完了です。

2.Dimensions

次にサイズ設定です。

サイトに合わせて「横×高さ」を設定します。

レスポンンシブwebに対応させるために「Make this slideshow responsive.」にチェックをしてくださいね。

スクリーンショット 2014-02-01 0.06.20

3.Transitions

Effectでエフェクトの変更を行います。

Durationでは、画像の切り替わるスピードを変更できます。

(500=5秒)

スクリーンショット 2014-02-01 0.16.01

4.Next & Previous Arrows

Arrows:スライドの両端に矢印を表示させる

On Hover:マウスにあてたときだけに矢印を表示させる

Position:矢印の表示を内側か外側にする

スクリーンショット 2014-02-01 0.20.19

5.Pagination Icons

Pagination:ページ送りのボタンを表示するかどうか

On Hover:マウスをあてたときだけに表示するか

Position:ページ送りボタンの位置を指定(外側or内側)
設置場所も指定可能

スクリーンショット 2014-02-01 0.25.49

6.Automatic Playback

Playback:スライドショーを自動で動かすかどうか

Pause Duration:画像を切り替えるスピードを指定

スクリーンショット 2014-02-01 0.30.42

最後に「save」をクリックし設定完了です。

設置方法

スライドショーの設置方法ですが、こちらのコードを入力することで簡単に設置が可能です。

ウィジェットや投稿記事などに表示させる場合

easingsliderlite
( [ ] をつけてください )

テーマ編集(HTML)に直接入力する場合

<?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>

以上で「Easing Slider “Lite”」の設定〜導入が完了です。

是非導入しておいてくださいね☆

この記事はあなたのお役に立てたでしょうか?

ブログランキングへ破ってみませんか?

破る

ビリビリビリ・・。


本日も破って頂きありがとうございました(´∀`)
dogezas.gif

 
看板      
お名前 メールアドレス
記事を読んで少しでも興味深く思われましたら、
以下のソーシャルメディアボタンで共有してもらえると青春野郎は喜びます!

yaji-006

コメントを残す




CAPTCHA