【Smart Slider 3】誘導力高めるスライドショーの使い方【WordPress】 | | まーくんのアフィリエイト学校

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

【Smart Slider 3】誘導力高めるスライドショーの使い方【WordPress】

公開日 最終更新日

誘導力高めるスライドショーの使い方

 

ランディングページにうまく読者を誘導できないくま~。
読者の目にとまりやすい「スライドショー」を活用してみるです~。

 

WordPressには「スライドショー」を設置できるプラグインが多数提供されています。

しかし、スライドショーがいったいどのような場面で役に立つのか、ピンと来ない方も多いのではないでしょうか。

「画像が順番に切り替わる」機能は、主に写真のギャラリー等で使われますが、一般的なサイトでは出番が少ないかもしれません。

 

ギャラリー

 

とは言え、スライド時のアニメーション効果はサイト上に視覚的な変化を生み出し読者の注目を集めやすいツールでもあります。

でもマーケティングや集客に活かすなら、もう少し追加要素が欲しいところですよね…。

そこで今回、オススメしたいのが「Smart Slider 3」というプラグインです。

 

Smart_Slider_3

 

スライドショー作成プラグインと言えば、主に「画像」のみスライドとして切り替わるのが一般的です。

一方、Smart Slider 3は画像に加えて、各スライドに「テキスト」や「ボタン」「リンク」を配置できます。

 

Smart_Slider

 

このように各スライド画面を独自に構成できるのが「Smart Slider 3」の大きな特徴です。

自由自在な編集機能が加わることによって、スライドショーの活躍できる領域がグッと広がります。

 

・ランディングページ(LP)や商品ページへの誘導に

・人気コンテンツのアイキャッチに

 

今回は、「Smart Slider 3」の設定方法や使い方をレクチャーしていきたいと思います。

 

※画像のギャラリー用途にスライドショーを使いたい場合は、以下のプラグインもオススメです。

Meta Sliderでスライドショーを作成しよう【WordPress】

 

※また、他のスライドショー作成プラグインが気になる方は以下の講座をチェック!

【WordPress】スライドショーを設置するプラグイン おすすめ5選

 

インストール

まず、WordPressに「Smart Slider 3」をインストールしましょう。

※インストール前には必ずWordPressのバックアップをお願いします。

 

WordPress管理画面にログインしたら「プラグイン」⇒「新規追加」に移動します。

次に画面右端の検索フォームに「Smart Slider 3」と入力してください。

 

プラグイン_検索

 

検索結果からSmart Slider 3を見つけたら「インストール」⇒「有効化」と続けて実行しましょう。

 

有効化

 

以上でSmart Slider 3の導入は完了です。

 

スライドショーの新規作成

それでは早速スライドショーを作成してみましょう。

WordPress管理画面の「Smart Slider」項目をクリックしてください。

 

Smart_Slider_WordPress

 

次に「New Slider(新規スライドショー)」をクリックします。

 

New_slider

 

すると「Create Slider(スライドショーを作る)」というポップアップが開くはずです。

 

create_silder

 

Slider Name(スライドショーの名前)」は、各スライドショーを識別するための名前です。

※「Slider Name」はスライドショーに表示されません。

 

Width(幅)」「Height(高さ)」でサイズを指定できますが、後からでも変更できます。

Preset」では、スライドショーの基本的な様式を選択します。

 

Default:一般的なスライドショー。サイズを指定できる。

Full width:画面一杯に広がるスライドショー。

Thumnail:スライドショー下部に、各スライドの小さなサムネイル画像を表示する。

 

この内「Full width」はサイトのレイアウトを崩す場合があるためオススメしません。

今回は「Default」でスライドショーを作ってみましょう。

 

Import Sample Sliders」はスライドショーのサンプルを代用できます。

デザイン力の高いスライドショーを始めから導入できるため、作成や設定作業を省きたい人にはオススメです。

 

解説では「Import Sample Sliders」の選択は飛ばします。

最後に「CREATE」をクリックすれば、スライドショーが作成されます。

 

スライドショー_作成

 

上図の設定画面で、スライドの追加やデザインの変更などを行います。

 

スライドの追加

スライドショーを作成しても、まだ中身が無い状態です。

今度は、スライドショーに「スライド」を追加していきましょう。

 

スライドショーとスライドって何が違うくま~?
スライドは、スライドショーを構成する各画面のことです~。

 

スライドショー_スライド_違い

 

まず「ADD SLIDE(スライドを追加)」をクリックしてください。

 

ADD_SLIDE

 

Smart Slider 3では、画像以外にも「動画」や「投稿」をスライドとして挿入できます。

 

image

 

講座では一般的な画像スライドの追加方法で解説を進めます。

※テキストやリンク、ボタン等は、後から配置できます。

 

Image」をクリックし、メディアライブラリから好きな画像を選択しましょう。

 

複数同時選択

 

同時に他の画像もチェックを入れると複数選択になります。

メディアライブラリ右下の「選択」を実行すると、チェックを入れた画像がスライドに追加されます。

 

追加済みスライド

 

スライドショーを実行すると、左から右のスライドに向かって切り替わります。

順番を変更したい場合は、画像をドラッグし任意の位置にドロップしてください。

複数画像を追加したら、画面左上の「PREVIEW」で確認してみましょう。

 

スライドの編集

次に各スライドのレイアウトを編集してみましょう。

まず、各スライドの編集画面へと移動します。

スライドショー設定画面のスライド一覧から、編集したいスライドにマウスカーソルを当てると、「EDIT」ボタンが出現します。

 

EDIT

 

クリックすると各スライドの編集画面にアクセスできます。

 

テキストの挿入

それでは始めに、テキストを挿入してみましょう。

Text layer」をクリックしてください。

 

text_layer

 

Text」項目のフォームに、スライドに配置するテキストを入力します。

すでにデフォルトの英文が入力されていますが、削除しちゃって大丈夫です。

 

text_tablet_mobile

 

項目は他にも「Tablet text(タブレット)」「Mobile text(スマホ)」があり、閲覧デバイスごとにテキストを切り替えることができます。

レスポンシブWEBデザインへの対応はもちろん、デバイスに応じてアピールの仕方を変えるなど柔軟な使い方が可能です。

各フォームは簡易的なHTMLも挿入可能です。

 

斜字_太文字_リンク

 

選択したテキストを太文字タグリンクタグで囲むことができます。

 

テキスト_挿入

 

しかし、このままでは文字サイズが小さ過ぎるし、やや地味な印象を受けます。

そこで、テキストの装飾を調整してみましょう。

 

Design(デザイン)」ボタンをクリックしてください。

 

design

 

まず、文字のサイズを「Size」項目で指定します。

 

size

 

値にマウスカーソルを合わせるとバーが出てくるので、好みの大きさに変更しましょう。

また、テキストの位置は「Text align」から選択します。

 

text_align

 

サイズを大きくしても、テキストが目立たないくま~。
そういう時は、テキストに背景色を設定すると読みやすくなるです~。

 

背景画像とテキストの色が重なってしまうと、読みづらくなる場合があります。

 

写真_文字

 

そんな時はテキストと画像の間に背景色を差し込んであげると、テキスト全体が読みやすくなります。

 

back_ground_color

 

背景色は「Background color」項目で指定します。

まず基本色を指定し、下部のバーから透明度を調節しましょう。

 

背景色_指定

 

文字色の指定は「Color」項目です。

 

color

 

これでテキストが読みやすくなりました。

 

プレビュー

 

ただ、背景色を設定したことで、テキストの余白がギュウギュウになってしました。

余白の指定は「Padding」で行います。

 

padding

 

「上」「右」「下」「左」の順番で余白を指定します。

上図を参考して、テキストの周りの余白を調整してみてください。

 

余白

 

また、背景色の角の部分に丸みがあると柔らかな印象になります。

 

border_radius

 

Border radius」に適当な数値を入力すると、四方の角が取れます。

 

角が丸くなる

 

他にも様々な装飾が可能です。

 

その他_設定項目

 

① Family:フォントの種類を選択

② Font weight:文字の太さを選択

③ Line height:行の高さを指定

④ Dexration:斜字または下線

⑤ Border:テキスト周囲の枠を表示。左から順に「枠線の太さ」「枠線の種類」「枠線の色」を指定できる。

⑥ Opacity:テキスト全体の透明度を指定

 

また、テキスト全体の大きさ位置取りは、マウス操作で行います。

 

サイズ変更

 

選択枠のツマミをドラッグすると、全体の大きさを調整できます。

 

位置変更

 

スライド上の位置を変更するには、選択枠のツマミ以外の箇所をドラッグします。

 

ボタンの挿入

次に、読者をコンテンツやランディングページに導くためのボタンを設置してみましょう。

スライドの編集画面から「Button layer」項目をクリックしてください。

 

button_layer

 

すると、デフォルトで「More」ボタンがスライド上に設置されます。

まずは、ボタンに挿入する文字列とリンク先のURLを変更しましょう。

 

label_link

 

Label」項目では、ボタンの文字列を変更します。

「More」のままでも良いですが、より日本語ユーザーに向けたいなら「続きを読む」「詳しくはこちら」等に変更しましょう。

Link」にはリンク先のURLを入力してください。

 

装飾や配置の変更はテキストの設定方法と同じです。

 

完成

 

各スライドの基本的な編集方法は以上です。

PREVIEW」でレイアウトや使用感を確認したら、最後に「SAVE(保存)」をクリックしてください。

 

デザインが上手くキマらない時は

う~ん…。自分でいろいろ試してみたけど、かっこいいスライドにキマらないくま~。
そんな時は、テンプレートを使い回すのもオススメです~。

 

編集が面倒くさかったり、どうしても満足のいくレイアウトに仕上がらない場合があります。

そんな時は、Smart Slider 3で用意されているテンプレートを使ってみてはいかがでしょうか。

 

テンプレートを導入すれば、画像やテキスト・ボタンの文章を差し替えるだけで、美しいスライドが完成します。

課金して使えるようになるテンプレートもありますが、無料版でも多彩なテンプレートを利用できます

 

それでは、スライドにテンプレートを導入する方法について解説します。

まず、スライドショーの設定画面で新規スライドを追加します。

 

library

 

次に、スライドの種類から「Library」をクリックします。

すると、テンプレートを選択する画面に移ります。

 

free

 

左上に「Free」のラベルが付いているものが、無料版で利用できるテンプレートです。

好きなテンプレートを選択したら「SAVE」をクリックします。

 

今度は、テンプレートをコンテンツや商品に合うよう編集してみましょう。

まず背景画像から変更します。

編集エディター上の「Background」をクリックしてください。

 

background

 

さらに「Image」から画像を選択します。

 

メディアライブラリ

 

テンプレートによって画像が背景色の下に隠れてしまったり、見えにくくなってしまう場合があります。

 

透明度

 

そんな時は、同じ「Background」項目に配列されている「Opacity(透明度)」を調整します。

 

opacity

 

見やすくなる

 

次に、スライド上に配置されているテキストやボタンの文字列を差し替えましょう。

変更したい要素をクリックするとポップアップが開くので「Text」「Link」等を設定します。

 

テキスト_書き換え

 

また「Design」をクリックすれば、装飾も自由にカスタマイズできます。

 

完成

 

最後に「SAVE」をクリックして編集を終えてください。

 

スライドショーの設置

作成したスライドショーをサイトに設置してみましょう。

まず、スライドショーの設定画面にアクセスし「PUBLISH」項目を探します。

 

PUBLISH

 

「Shortcode」以下に提示されているショートコードをコピーします。

次に、スライドショーを設置したい記事または固定ページの編集画面を開いてください。

 

ショートコード

 

そして、本文内の任意の位置にコードを貼り付けます。

プレビューで確認すると…。

 

テンプレート

 

無事、スライドショーを掲載できました。

 

「Smart Slider 3」のおさらい

簡単に今回のまとめをしておくです~。

 

まとめ

・スライドショーは読者に注目されやすい

・LPやコンテンツに誘導するスライドショーなら「Smart Slider 3」がオススメ

・Smart Slider 3は画像だけでなくテキストやボタンを自由に配置できる

 

関連記事

Meta Sliderでスライドショーを作成しよう【WordPress】

【WordPress】スライドショーを設置するプラグイン おすすめ5選

 

新規パートナー無料登録はこちら

 

サイト作成コース 一覧に戻る