どうも、マルコです^^

WordPressブログの中で、画像が数秒おきに切り替わっていく【スライドショー】というのを見た事はありませんか?

こういうヤツです。
↓↓↓

 

ブログの中にこういったスライドショーがあると、華やかできれいな印象になりますよね(#^.^#)

上のスライドショーをクリックすると、マルコのメルマガのご登録ページに飛ぶのですが、

このように、リンク先を設定することもできます。

 

ブログの記事の下に、こういったスライドショーを置いて、メルマガ登録を促すと

目に留まりやすいですし、複数の画像を使う事が出来るので、多くのメッセージを込める事が出来て便利です。

 

今回は、この、【スライドショー】を、WordPressブログに埋め込む方法をご紹介したいと思います(#^.^#)

利用するのは、【Easing Slider】というプラグインです。

ではでは、いってみましょう♪

 

スライドショーに使用する画像は、あらかじめ準備しておいてくださいね。

今回は、3枚の画像を使用しますが、2枚でも、4枚、5枚でも大丈夫です^^

Easing Sliderをインストールしよう

WordPressのダッシュボードにログインしておきます。

左メニューの【プラグイン】をクリックします。

Wordpress Popular Posts

 

画面が切り替わったら、【新規追加】をクリック。

wordpress  popular posts

 

プラグインの検索画面が表示されますので、

右上の【プラグインの検索】欄に、【Easing Slider】と入力します。

wordpress  popular posts

 

入力したところを拡大してみました♪

入力が出来たら、キーボードの【Enterキー】を押します。

 

検索結果に【Easing Slider】が表示されますので【今すぐインストール】をクリックします。

 

インストールが終わったら【今すぐインストール】のボタンが【有効化】に切り替わりますので、そちらをクリック。

 

画面が切り替わって【プラグインを有効化しました】という表示が出たらOKです♪

 

【Easing Slider】が有効化されると、ダッシュボード左側の黒いエリアに【Sliders】という表示が現れます。

これで、【Easing Slider】のインストールと有効化は完了です(#^.^#)

では、次に、スライドショーを作成していきましょう♪

 

スライドショーの作成と設定をしよう

①【Sliders】にマウスを合わせ

②【Add New】をクリックします。

 

画面が下の画像のように切り替わります。

 

①【Name】の部分にこれから作成するスライドショーの名前を入力しましょう。

※ご自分が分かりやすい名前ならなんでもOKです♪

②名前の入力が出来たら【Add Sliders】をクリックします。

 

 

画面が切り替わります。

【ファイルをアップロード】をクリックします。

 

ここで、準備しておいた画像をアップロードしていきます。アップロードするには、

①表示されている部分に画像ファイルをドラッグ&ドロップする方法と

②【ファイルを選択】のボタンから選択していく方法があります。

ここでは、②の方法でやってみますね(#^.^#)

 

それでは、【ファイルを選択】をクリックします。

 

ファイルを選択する画面が表示されますので、あらかじめ準備しておいた画像を探して

キーボードの【Ctrl】キーを押しながらスライドショーに使う画像をクリックして選択していきます。

②画像の選択が出来たら、【開く】をクリック。

 

画面が切り替わり、メディアライブラリに画像が追加されます。

追加した画像(今回は3枚)に、チェックが入っている事を確認しましょう。

 

確認できたら、右下の【Insert into Slider】をクリック。

 

スライドショー作成の画面に戻りました。

3枚の画像が追加されていますね。

では次は、それぞれの画像をクリックしたときに特定のページにジャンプできるように

リンクを設定していきましょう。

 

画像にマウスを合わせると、鉛筆のようなマークが表示されますので、そちらをクリック。

※ちなみに、【×】マークをクリックすると画像が削除されます。

 

切り替わった画面の右側に、下の画像のような表示があります。

【Link To】の部分をクリックすると、リストが表示されるので

【Custom URL】をクリックします。

 

【Custom URL】に切り替えたら

①の欄にジャンプさせたいページのURLを入力し

②【Open Link in a new window/tab】にチェックを入れておきます。

※ここにチェックを入れておくと、スライドショーをクリックしたときに、リンク先のページが新しいタブで開くので、読者さんに元のページに戻る手間をかけずに済みます。

③最後に、【Update】をクリックして設定を確定させます。

 

元の画面に戻ってきます。

同じようにして、2枚目、3枚目の画像にも、リンクを設定しましょう。

では、次は、そのほかの設定を行っていきます♪

 

画面の右側に、下の画像のような表示がありますね。これが色々な設定をしていく所です。

では、①から順番に見ていきましょう。

 

 

①Dimensions

画像の大きさを設定するところです。

①の部分で画像の幅と高さを設定します。単位はpx(ピクセル)です。

 最初は準備しておいた画像サイズと同じにしておいて、

 実際の表示を見てから調整していくと良いでしょう。

②【Make 100% full width】にチェックを入れておきましょう

※設置場所の幅いっぱいになるように調整してくれます。

 

②Transitions

スライドショーで画像が切り替わるときの動作を設定します。

①の【Slide】を選択すると画像が横にスライドするように切り替わっていきます。

②の【Fade】を選択すると、画像がふわっとぼやけて次の画像が出てくる、という切り替わり方になります。

③この数字を調整することで、画像が切り替わる速度を調整できます。

 数字を大きくするとスライドする速度がゆっくりになり、小さくすると早くなります。

 まずは、初期設定のままにしておいて、後で表示を確認してから調整していくと良いでしょう。

 

 

③Preloading

【Enable Lasy Loading】にチェックが入っている事を確認しましょう。

※これは、サイトを表示させるときにスライドショーの部分だけを遅れて読み込ませることで、サイト全体の表示速度をUPさせる効果があります。

 

④Next & Previous Arrows

この部分は触らなくて大丈夫です。

ちなみに、上の部分の設定は、下の画像の赤丸の部分の表示を調整するものです。
慣れてきたらいろいろいじってみてくださいね。

 

⑤Pagination Icons

こちらも、触らなくて大丈夫です。

こちらの設定では、下の画像の赤枠の部分の表示を調整します。

こちらも慣れてきたらいろいろいじってみて頂ければ♪

 

⑥Automatic Playback

①【Enable】にチェックが入っている事を確認しましょう。

スライドショーを繰り返し再生してくれます。

※チェックが入っていないと、一通りスライドしただけで止まってしまいます。

②【Pause Duration】は、1つ1つの画像の表示時間を調整します。

こちらも、最初は既定値のままにしておいて、仕上がりを見てから調整すると良いでしょう。

 

 

これで、一通りの設定が終わりました!

【Publish】をクリックして保存しておきましょう。

 

先程クリックした【Publish】のボタンが、【Update】に切り替わったら、保存完了です♪

 

画面右側の【ALL Sliders】をクリックしてみましょう。

 

作成したスライドショーの名前が表示されていますね(#^.^#)

【Add New】をクリックすれば、さらに新しいスライドショーを作る事が出来ます。

スライドショーを何種類も作成して、使い分ける事も可能です♪

 

では、次はいよいよ作成したスライドショーを、投稿に表示させてみましょう♪

 

作成したスライドショーを記事内に表示させてみよう

記事投稿の画面を開きます。

スライドショーを設置する場所は自由です。

ここでは、文章は何も入力していませんが、記事の先頭に設置することも、

文章の途中に挿入することも、記事の最後に挿入することもできます。

 

スライドショーを挿入したい場所をクリックしてカーソルを表示させ、

【Add Slider】をクリックします。

 

下のような画面が現れます。

①で表示させたいスライドショーを選択し

②【Insert Slider】をクリックします。

 

スライドショーのコードが挿入されました。

このままではピンと来ませんよね?ここでプレビューを見てみましょう♪♪

 

プレビューを表示させると、コードが入っている場所に、きちんとスライドショーが表示されているのが分かります(^^)v

嬉しいですね~~~~~♪♪

 

スライドショーを後から修正したいときは・・・

スライドショーを表示させてみたら、

もう少し、画像が切り替わる速度を遅くしたい、早くしたいとか、

画像を小さくしたい、大きくしたいとか、

スライドする画像を増やしたいとか、

いろいろと調整したい部分が出てくることがあります。

 

そういう時は、

①ダッシュボードの左側の【Sliders】をもう一度クリックすると・・・

②作成済みのスライドショーの一覧が表示されますので、編集したいスライドショーの名前をクリックしましょう。

 

スライドショーの編集画面になりましたね。

これで、設定などを修正する事が出来ます(#^.^#)

修正が完了したら、【Update】をクリックして更新しておきましょうね。

※ちなみに、不要なスライドショーは、【Move to Trash】をクリックすると、ゴミ箱に移動します。

 

おわりに

以上が、ブログの記事内にスライドショーを設置する方法でした(#^.^#)

ビジネス系のブログでは、CTA(コールトゥアクション)と言って、記事下にメルマガ登録を促す画像が良くありますよね。

そこで、このスライドショーを利用して頂くと、目に留まりやすいですし、ちょっとカッコイイですよね♪♪

是非、ご利用くださいませ^^

 

今回は、テンプレート(テーマ)に関係なく設置できる記事内への設置方法を解説しましたが、

 

●トップページに設置したいとか、

●いちいち記事下に挿入するのは面倒だから自動で投稿の一番下に表示されるようにしたい!

というときには、テーマごとに多少手順が違ってきます。

 

【賢威】をご利用の方は、こちらのページで解説していますので

どうぞ、ご参考にして頂ければと思います<m(__)m>
↓↓↓

【賢威7】で記事下にスライドショーを設置する方法
※賢威6.2でも大丈夫です^^