ホームページ上に複数の画像を切替えるスライドを設置すれば、より訪問者に対して視覚に訴えることが出来るととともに、限られたスペースを有効に活用して、訪問者に対して意図することを訴求することが出来ます。
そこで、今回は、WordPressブログにスライドショーを簡単に設置することのできるWordPressプラグイン『Easing Slider “Lite”』のインストール方法と使い方について画像を用いて丁寧に解説していきたいと思います。
Easing Slider “Lite”でできることと導入の必要性について
このプラグインを使えば、下記のようなスライドを簡単に設置することが出来ます。
以下では、このやり方について解説していきます。
[easingsliderlite]
Easing Slider “Lite”のインストール方法
WordPressへのログインとプラグインの新規追加
WordPressにログイン後、『プラグイン』⇒『新規追加』をクリックします。
検索窓に『Easing Slider “Lite”』と入力し、Enterキーを押します。
検索結果に表示された『Easing Slider “Lite”』のところの『いますぐインストール』をクリックします。
『OK』をクリックします。
プラグインの有効化
『プラグインを有効化』をクリックします。
Easing Slider “Lite”を使ってスライドを設置する方法
設定画面の呼び出し
メニューに追加されている『Slideshow』をクリックします。
スライドに使用する画像のアップロードと追加
『Add Image』をクリックします。
メディアライブラリが起動します。
ファイルを選択して追加するか、メディアライブラリ上に画像ファイルをドラッグ&ドロップすることにより、アップロードします。
ここでは、後者の方法によります。
スライドを作成するための画像素材をドラッグ&ドロップによりアップロードします。
※画像素材は、サイズを揃えておくようにしてください。
画像が追加されました。
『Insert into slideshow』をクリックします。
スライドに使用する画像の設定
リンク・タイトル・Alt属性などを付加する場合は、それぞれの画像をクリックして設定していきます。
リンク先のURL等を必要に応じて設定の上、『Apply Changes』をクリックします。
下にスクロールしていくと、他にも設定項目があります。
1.スライドをランダム表示にする場合は、『Rundamize the slideshow order.』にチェックを入れます。
2.『Dimensions』のところで、必要に応じて、スライドの幅と高さを設定します。
3.同じく『Dimensions』のところで、レスポンシブ対応にする場合は、『Make this slideshow responsive.』にチェックを入れます。(レスポンシブと言うのは、パソコンとスマートフォンなど画面サイズの異なる複数のデバイスで見た時に自動的に表示を最適化する設定です。)
4.設定が完了したら、画面左下の『Save Slideshow』をクリックして、保存します。
記事本文へのスライドの設置
記事本文にスライドを設置する場合、
[easingsliderlite]
という文字列を挿入します。
実際に記事をプレビューして確認してみると、正しくスライドが設置されていることがわかります。
テンプレートへのスライドの設置
記事本文ではなくヘッダー等、直接テンプレート全体に適用して表示させたい場合は、テンプレートの必要箇所に下記のコードを記述してください。
<?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>
以上になります。