Easing Slider “Lite”のインストール方法と使い方【画像解説】

ホームページ上に複数の画像を切替えるスライドを設置すれば、より訪問者に対して視覚に訴えることが出来るととともに、限られたスペースを有効に活用して、訪問者に対して意図することを訴求することが出来ます。

そこで、今回は、WordPressブログにスライドショーを簡単に設置することのできるWordPressプラグイン『Easing Slider “Lite”』のインストール方法と使い方について画像を用いて丁寧に解説していきたいと思います。

Easing Slider “Lite”でできることと導入の必要性について

このプラグインを使えば、下記のようなスライドを簡単に設置することが出来ます。
以下では、このやり方について解説していきます。
[easingsliderlite]

Easing Slider “Lite”のインストール方法

WordPressへのログインとプラグインの新規追加

WordPressにログイン後、『プラグイン』⇒『新規追加』をクリックします。
EasingSliderLite00

検索窓に『Easing Slider “Lite”』と入力し、Enterキーを押します。
EasingSliderLite01

検索結果に表示された『Easing Slider “Lite”』のところの『いますぐインストール』をクリックします。
EasingSliderLite02

『OK』をクリックします。
EasingSliderLite03

プラグインの有効化

『プラグインを有効化』をクリックします。
EasingSliderLite04

Easing Slider “Lite”を使ってスライドを設置する方法

設定画面の呼び出し

メニューに追加されている『Slideshow』をクリックします。
EasingSliderLite05

スライドに使用する画像のアップロードと追加

『Add Image』をクリックします。
EasingSliderLite06

メディアライブラリが起動します。
ファイルを選択して追加するか、メディアライブラリ上に画像ファイルをドラッグ&ドロップすることにより、アップロードします。
ここでは、後者の方法によります。
EasingSliderLite07

スライドを作成するための画像素材をドラッグ&ドロップによりアップロードします。
※画像素材は、サイズを揃えておくようにしてください。
EasingSliderLite08

画像が追加されました。
『Insert into slideshow』をクリックします。
EasingSliderLite09

スライドに使用する画像の設定

リンク・タイトル・Alt属性などを付加する場合は、それぞれの画像をクリックして設定していきます。
EasingSliderLite10

リンク先のURL等を必要に応じて設定の上、『Apply Changes』をクリックします。
EasingSliderLite11

下にスクロールしていくと、他にも設定項目があります。

1.スライドをランダム表示にする場合は、『Rundamize the slideshow order.』にチェックを入れます。
2.『Dimensions』のところで、必要に応じて、スライドの幅と高さを設定します。
3.同じく『Dimensions』のところで、レスポンシブ対応にする場合は、『Make this slideshow responsive.』にチェックを入れます。(レスポンシブと言うのは、パソコンとスマートフォンなど画面サイズの異なる複数のデバイスで見た時に自動的に表示を最適化する設定です。)
4.設定が完了したら、画面左下の『Save Slideshow』をクリックして、保存します。
EasingSliderLite12

記事本文へのスライドの設置

記事本文にスライドを設置する場合、

という文字列を挿入します。
EasingSliderLite13

実際に記事をプレビューして確認してみると、正しくスライドが設置されていることがわかります。
EasingSliderLite14

テンプレートへのスライドの設置

記事本文ではなくヘッダー等、直接テンプレート全体に適用して表示させたい場合は、テンプレートの必要箇所に下記のコードを記述してください。

以上になります。

公式メルマガ


コメントを残す

サブコンテンツ

このページの先頭へ