色々なデザインにカスタマイズ! スライダープラグイン「Smart Slider3」

今回は、Webサイトに欠かせないスライダーのプラグインを紹介します。

スライダーとは、トップや製品などで見かけるバナーや写真が横にスライドしていくものです。キャンペーンや、新商品情報などの新着情報をバナーでアイキャッチで見せて、そのままページに移動できるので、伝えたいことをダイレクトに見せることができる有効な手法です。

WordPressのプラグインでもスライダーは多いですが、その中でも有効インストール数 : 900,000（！）の「Smart Slider3」というプラグインを紹介します。

簡単にバナー・写真の入れ替えやリンク設定ができ、しかも無料です。今回は、トップページに置くようなBLOGページのバナーを想定して作成いたします。有料版もありますが、無料版の機能のみで作成いたします（スライダー作成だけであれば、無料版で十分です）。ポイントとなる設定と合わせて設置方法を説明いたします。

まずは、プラグインを検索しダウンロード、有効化してください。「Smart Slider」で検索すると一番最初に表示されます。

左上のプラグインをインストール後有効化します。

プロジェクト作成

ダッシュボードの上に「Smart Slider」が表示されるので、クリックします。「New Project」ボタンをクリックし、次のページに移動したら、「Create a New Project」をクリックします。「スライダー」「シンプル」を選択し、プロジェクト名、サイズを入力し、全幅を選択します。サイズは、PCで見れるサイズにしましょう。

「New Project」をクリック

「Create a New Project」をクリック

カルーセル、ショーケースはPRO版なので選択できません。

一般設定

プロジェクトを作成後、最初に表示されるのが、一般設定です。左上の「スライドを追加」、「画像」をクリックし、メディアライブラリから表示させたいバナーを選択します。バナーのサイズは、設定したスライダーのサイズに合わせます。

左上の「画像」をクリック。

バナーを複数枚選択して、右下の「選択」をクリックする。

これでスライダーのバナー選択は完了。バナーをクリックし、リンク設定していきます。

リンクは、表示されたバナー画像をクリックし、編集画面に移動してから行います。画像をクリックし、設定の「リンク」から移動したいページを選ぶか、URLを指定します。

画像をクリックし、コンテンツ＞リンクの＋をクリック

投稿の中からバナーの記事を選択するとURLが指定される。これで１つ目のリンク設定終了です。

上のメニューから「スライド」をクリックし、次のバナーを選択して同じように設定していく。保存は、右上のボタンで随時していく。

Size

色々設定項目がありますが、大きな設定の一つは、「レイアウト」の「全幅を強制」のチェックを外すことです。コンテナごと広がり、その他のオブジェクトにも影響を与えるので、CSSでしっかりレイアウトしている場合は外しましょう。これによってスマホからPCまで、スライダーの入っている枠の全幅で表示されます。

項目	設定
スライドの幅制限	OFF（右の全てOFFならONのままでOK）
Breakpoints	OFF
全幅を強制	OFF

操作

次に、スライダー周りのデザインができる「操作」の設定を行います。「操作」では矢印や、ホイール、サムネイルといったパーツの有無や、色、大きさ、位置の設定がここで行えます。今回は、Text Barと影は設置していませんが、デザイン的に必要であれば、設定します。

項目	設定
Text Bar	OFF
影	OFF

アニメーション

「アニメーション」では、横スライドの他に、縦スライドやフェードのアニメーションを選ぶことができ、スライド時間も設定できます。「Dulation」は、スライドアニメーションのスピードで、800MSは0.8秒です。コードを使わずに設定が出来るのがすごく便利です!

Background Animationでは、タイル状など、エフェクト効果のあるスライドが設定できます。エフェクトを選択するだけで設定できるので、他のサイトとは違う、目に止まるスライドにする時は効果的です。

項目	設定
Dulation	800

自動再生

自動再生のチェックを入れます。これを入れることによって、指定した時間が経過したら、スライドが動きます。今回は、5秒でスライドが動くように「Slide Duration」を5000MSに設定。また、スライダーをフリップしたり、サムネイルをクリックしても、アニメーションが止まらないように「Stop On Click」のチェックを外します。

項目	設定
自動再生	ON
Slide Dulation	5000
Stop On Click	OFF

最適化

トップページの上に置く場合、遅延読み込みすると、ページが読み込んでるのに見えないということになるので、オープニングアニメーションの設定を考慮して、入れるか、「insitant」にするか決めましょう。

項目	設定
Loading Type	Instant
表示時に再生する	ON

スライド

設定されたスライダーサイズに対して、バナー画像をどう配置していくかを設定できます。今回はデフォルのFillを使用します。指定したサイズに、画像の縦横倍率を変更せず、全面表示してくれます。

項目	設定
Slide Background Image Fill	Fill

開発者

開発者は、CSSなどの設定ができるところですが、デフォルトのまま変更しません。

では、いくつかデモとして、Smart Slider3で作成したスライダーを簡単な設定とともに紹介いたします。バナーをクリックしたら、それぞれのBLOGページに移動します。基本的にスライダーのデザイン、モーションを変更するのは、「操作」と「アニメーション」です。

シンプルスライダー

シンプルなバナースライダー。スマホ版は矢印が見えなくなります。設定もほぼデフォルトのままです。

項目	設定
矢印	左右内側（SP OFF）
スライド方向	横
ページコントロール	ON

サムネイル付縦スライダー

サムネイル付きの縦スライダーです。矢印はカーソルを合わせたら表示されます。サムネイルが多くなると左右に矢印が出て、移動できるように設定してあります。

項目	設定
矢印	左右内側（SP OFF）
スライド方向	縦
サムネイル	ON

サムネイル付フェードスライダー

サムネイルが、ページコントロール風になっています。切り替わりがフェードになっています。サムネイルは選択時に縁がつきます。イメージをCSSで角丸設定にしています。

項目	設定
矢印	OFF
スライド方向	クロスフェード
サムネイル	ON

設置方法

最後にページに反映させます。「一般設定」の「公開」にショートコード、PHPコードが表示されます。このコードをコピーして、所定の場所にペーストします。

左が、投稿用。右がトップページ用(PHPファイル書き込み)

今回のブログのデモの場合は、投稿になるので、左のショートコードをコピーします。設置したい場所で、ブロックエディタで「ショートコード」を選択し、コピーしたショートコードをペーストします。

テキストボックスに、コピーしたショートコードをペーストします。

今回想定した、トップページの場合、投稿ではないので、右のPHPコードをトップページのPHPにペーストします。トップページに反映する場合は、PHPの修正が必要になるので、設置した状態で納品になります。スライダーは固定で、バナーの更新、新規作成のみ行います。

今回は、無料版のSmart Slider3について紹介しました。筆者は有料版を使っていませんが、設定、更新が簡単なプラグインなので、前後のスライドも表示できるカルーセルも気になります。機会があれば紹介したいです。

CXG DESIGNでは、WordPressサイトの更新が簡単にできるよう設定いたします。詳細は、コンタクトフォームよりお問い合わせください。