Responsive Slider の設定


Responsive Slider ( Huge IT Responsive Slider ) の設定

WordPress のプラグインである「Responsive Slider」は、レスポンシブ対応のスライダーをページ、ウィジェット、あるいはギャラリーなどを簡単に設定する事ができます。

Responsive Slider のインストール

まず、「Responsive Slider」をインストールします。インストールするには、WordPress の管理画面から

プラグイン」 > 「新規追加」 の順にクリックして 「プラグインを追加」 のページを表示します。

表示されたページのプラグインを検索する検索欄にプラグイン名を入力します。

すると、目的のプラグインが表示されるのでその中の「今すぐインストール」ボタンをクリックします。すぐに、インストールが完了して、「今すぐインストール」 から 「有効化」に変化します。

「有効化」ボタンをクリックしてプラグインを有効にします。

プラグインを有効にすると、管理画面に「Responsive Slider」が追加されています。これで、プラグインのインストールの完了です。

 

Responsive Slider の設定

Responsive Slider のインストールが完了すれば、スライダーの設定をします。

管理画面の「Responsive Slider」 > 「Sliders」の順にクリックすると、

上図のように、スライダーを追加する画面が表示されます。

新しいスライダーを作成するには、ID の下にある  をクリックします。クリックすると下のような画面が表示されます。   

左上部の「Add Image  をクリックしてメディアを選択して追加していきます。

選択した画像が左側に順に下に追加されていきます。その右側では、詳細設定する画面があります。

「General (一般設定) 」

Name : New Slider

Width(px) : 800

Height(px) : 480

Slider Autoplay:   | Pause On Hover:   | Right Click Protection:    |  Slider Effect:   Fade      

Image Behavior:   Stretch          Change Speed:   1500      Paouse Time:   1000    

以上の設定は無料で自由に変更して利用することが出来ます。

スライダーの名前・幅・高さ

オートプレイ・カーソルがオンしたときに静止する・右クリックの保護・スライダーの効果(フェードに変更)

イメージの振舞い(引き伸ばす or 適す or いっぱいに)・スライドのスピード「1500(ミリ秒)」・静止時間「1000(ミリ秒)」

以上の設定をして、右上部の「Preview」ボタンでプレビューを確認することが出来ます。プレビューで  OK  ならば、「Save」ボタンで設定を保存します。保存すれば「Shortcode」をクリックすれば、下にショートコードが表示されます。  

但し、「Title」・「Description」の表示、非表示「Slider Custom Element」のボタン、テキスト、画像の中から選択することができますが、それぞれの編集をするためには、有料プランにしないといけないようです。

表示された「ショートコード」をコピーして、投稿・固定ページ・ウィジェットなどで、その「ショートコード」をペーストすると、スライダーを表示することができます。

以上で、Responsive Slider の設定の完了です。

http://youyou123.wpblog.jp/wp-content/uploads/2017/01/aircraft-1362586_1280.jpg
http://youyou123.wpblog.jp/wp-content/uploads/2017/01/landscape-644323_1280.jpg
http://youyou123.wpblog.jp/wp-content/uploads/2017/01/aqua-shooting-1736419_1280.jpg
http://youyou123.wpblog.jp/wp-content/uploads/2017/01/night-view-888678_1280.jpg
http://youyou123.wpblog.jp/wp-content/uploads/2017/01/model-1924000_1280.jpg
http://youyou123.wpblog.jp/wp-content/uploads/2017/01/mount-fuji-580598_1280.jpg

SNSでもご購読できます。