スポンサーリンク

 

今回はブログに訪問した読者に
次のアクションを促すために必要なCTAという
記事下に仕組みを作る方法をお伝えします。

 

CTAとは「コール・トゥ・アクション」とは、
ブログに訪問してくれた読者に
次にとってもらいたい行動を促す役割を果たすもの。

 

例えば、メルマガ登録とか、商品ページへと誘導するなど、
読者の目につきやすく設置されたものです。

 

それを固定されたリンクボタンのようなものではなく、
複数の画像が自動で動く、いわゆるスライドとして
ブログ記事下に配置さてみることを提案してみました。

 

そのスライドショーで設定するために
Easing Sliderプラグインを利用しますので、
インストールと編集方法につてお伝えします。

 

では早速すすめていきますが、
スライドショーに使う画像の用意をしておいてください。

 

準備しておく画像の枚数は何枚でも大丈夫なので
お好みの枚数を用意しておきましょう。

 

この記事では画像3枚を使っての設定をお伝えしています。

 

スポンサーリンク

Easing Sliderプラグインのインストール

 

ダッシュボードからプラグイン⇒新規追加をクリック。

 

 

「プラグインの検索」に「Easing Slider」と入力します。

 

 

検索結果で「Easing Slider」が表示されたら赤枠①「今すぐインストール」をクリック。

 

 

インストールが終わったら、赤枠「有効化」をクリック。

 

 

有効化が終ったらインストールの完了です。

 

スライドショーの作成と設定

 

Easing Sliderの有効化で、ダッシュボードに「Sliders」と表示されます。

 

 

赤枠①「Sliders」にマウスを合わせると赤枠②「Add New」が有るのでクリック。

 

 

下の画像に切り替わります。

 

 

赤枠の「Name」に名前を入力します。

※自分で分かりやすい名前で問題ありません。

 

名前の入力が出来たら「Add Sliders」をクリック。

 

 

画面が替わったら赤枠「ファイルをアップロード」をクリックします。

 

 

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

 

 

 

追加した画像に、赤枠のようにチェックが入っていることを確認します。

 

 

チェックの確認が出来たら、右下①「Insert into Slider」をクリック。

 

 

先ほどのスライドショー作成画面に戻ります。

※この記事で紹介する画像数は3枚にしています。

 

それぞれの画像にリンクを設定していきます。

リンクを設定することにより、特定のページに移るようにするためです。

 

 

画像にマウスを合わせると
赤枠の鉛筆のようなマークが現れますので、それをクリック。

 

 

 

下の画面に切り替わったら、
「Link To」の赤丸をクリックすると、リストが表示されるので、
その中の赤枠「Custom URL」を選択してクリック。

 

 

赤枠①の項目にリンクさせたいURLを入力し、
赤枠②「Open link in a new window/tab」にチェックを
入れておきます。
赤枠③の「Update」をクリックして設定を確定させます。

 

 

 

次に元の画面に戻りますので、
選択した画像枚数だけ同じようにリンク設定をしていきましょう。

 

その他の設定も行います。

 

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

それぞれの設定を行います。

 

 

6つの項目の詳細設定

 

では上から順番に①から行います。

 

①Dimensionの設定

 

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

 

赤枠①の部分は、画像の幅や高さの変更の設定ができます。

 

デフォルトのままでも大丈夫ですが、
変更をする場合には実際に表示画像を確認して調節を試みてくださいね。

 

赤枠②「Make 100% full width.」にチェックを入れておきます。

設置場所の幅いっぱいになるように自動で調節してくれます。

 

 

②Transitionsの設定

 

スライドショーの画像動作の設定です。

 

  • 画像が横にスライドするように切り替わります。

 

②:画像がぼやけるように切り替わります。

 

  • 画像の切り替わり速度の調節です。
  • 数字が大きければゆっくりと。
  • 数字が小さければ素早くなります。

 

まずはデフォルトのままで、後々好みに応じて調整するといいでしょう。

 

 

③Preloadingの設定

 

赤枠「Enable Lazy Lading」にチェックが入っていればOK。

 

ここの設定は画像の読み込み時間を短縮させ、
ブログの表示速度を上げるためです。

 

 

 

④Next&Previous Arrowsの設定

 

ここはデフォルトのままでOKです。

 

⑤Pagination Iconsの設定

 

ここもデフォルトのままでOKです。

 

 

 

⑥Automatic Playbackの設定

 

ここの設定はスライドショーが繰り返し再生させる箇所です。

赤枠①「Enable」にチェックが入っていればOK。

 

繰り返しスライドショーが再生される設定となります。

 

赤枠②「Pause Duration」
画像一枚一枚の表示時間を調節出来ます。

 

そのままで大丈夫ですが、
仕上がりを見ながら調節するといいです。

 

 

 

すべての設定が終ったら、赤枠「Publish」をクリック。

 

 

 

先ほどの「Publish」をクリックしたら、
赤枠「Update」に替わったら保存完了です。

 

 

スライドショーの設定が上手く表示されているかを確認してみます。

 

ダッシュボードの「Slider」をクリックして
「All Slider」の中に作成したスライドショーの名前が
表示されていればOKです。

 

 

次に作成したスライドショーを記事内に表示させます。

 

スポンサーリンク

スライドショーを記事内に表示させる

 

ダッシュボードから①「投稿」⇒②「新規追加」をクリック。

 

 

「新規投稿を追加」の画面に移ります。

赤枠①にカーソルを表示させ、赤枠②「Add Slider」をクリック。

 

 

 

下の画像の画面に移ります。

次に赤枠①で表示させたいスライドショーの名前を選択。

赤枠②「Insert Slider」をクリック。

 

 

「新規投稿を追加」に戻ると、
スライドショーのコードが挿入されています。

 

 

赤枠のプレビューをクリックして、
きちんとスライドショーが
表示されているかを確認してみましょう。

 

 

これで、設定は完了です。

 

スライドショーを修正したい場合

 

一応、スライドショーの設定をしたものの、

画像の速度の調整やなど調整したと思った時に修正の仕方です。

 

ダッシュボードから赤枠①「Sliders」をクリック。

赤枠②「all Sliders」をクリック。

 

 

作成したスライドショーの名前をクリック。

 

 

スライドショーの編集画面に移りますので、
気になる設定を修正することができます。

 

例えば画像表示の順番を変えたりスピード調節や、
スライドショーで使用する画像を変更するなど。

 

 

まとめ

 

以上でスライドショーを設定するための作業は終わりです。

 

文字で表現されているブログの中で
動きがあるものは読者の意識を向けるために役立ちます。

 

記事下にCTAを設定して読書にメルマガ登録や
企画案内・無料レポート紹介など、

メッセージ伝えるために効果があるので、
あなたのブログに設置してみてください。

 

お疲れ様でした!

 

スポンサーリンク