![](https://cxg-design.jp/wp-content/uploads/2023/10/1ade5a7896da64bf8819f590a2c39143.png)
色々なデザインにカスタマイズ! スライダープラグイン「Smart Slider3」
今回は、Webサイトに欠かせないスライダーのプラグインを紹介します。
スライダーとは、トップや製品などで見かけるバナーや写真が横にスライドしていくものです。キャンペーンや、新商品情報などの新着情報をバナーでアイキャッチで見せて、そのままページに移動できるので、伝えたいことをダイレクトに見せることができる有効な手法です。
WordPressのプラグインでもスライダーは多いですが、その中でも有効インストール数 : 900,000(!)の「Smart Slider3」というプラグインを紹介します。
![](https://cxg-design.jp/wp-content/uploads/2023/10/3716d4b092b75c2f4eefd6e87ce3c743-2000x1156.png)
出典 : Smart Slider3
簡単にバナー・写真の入れ替えやリンク設定ができ、しかも無料です。今回は、トップページに置くようなBLOGページのバナーを想定して作成いたします。有料版もありますが、無料版の機能のみで作成いたします(スライダー作成だけであれば、無料版で十分です)。ポイントとなる設定と合わせて設置方法を説明いたします。
まずは、プラグインを検索しダウンロード、有効化してください。「Smart Slider」で検索すると一番最初に表示されます。
![](https://cxg-design.jp/wp-content/uploads/2023/10/772316b3e2f54e7994998388b55c4b40-2000x1187.png)
左上のプラグインをインストール後有効化します。
プロジェクト作成
ダッシュボードの上に「Smart Slider」が表示されるので、クリックします。「New Project」ボタンをクリックし、次のページに移動したら、「Create a New Project」をクリックします。「スライダー」「シンプル」を選択し、プロジェクト名、サイズを入力し、全幅を選択します。サイズは、PCで見れるサイズにしましょう。
![](https://cxg-design.jp/wp-content/uploads/2023/10/9f03704a0f6442e582f668d666070f76.png)
「New Project」をクリック
![](https://cxg-design.jp/wp-content/uploads/2023/10/90c5850dd567661fb8e58f2fd3fe1039-1-2000x1185.png)
「Create a New Project」をクリック
![](https://cxg-design.jp/wp-content/uploads/2023/10/97a24a3e076896d7e0836c752cdfd1d5.png)
カルーセル、ショーケースはPRO版なので選択できません。
一般設定
プロジェクトを作成後、最初に表示されるのが、一般設定です。左上の「スライドを追加」、「画像」をクリックし、メディアライブラリから表示させたいバナーを選択します。バナーのサイズは、設定したスライダーのサイズに合わせます。
![](https://cxg-design.jp/wp-content/uploads/2023/10/7ae596af4f8dd9fbb7cdd153361503ed.png)
左上の「画像」をクリック。
![](https://cxg-design.jp/wp-content/uploads/2023/10/2b6fee3a5ea8220871d8e88c5ef1557b.png)
バナーを複数枚選択して、右下の「選択」をクリックする。
![](https://cxg-design.jp/wp-content/uploads/2023/10/25ac59ee64fdd4bec2f8adaff2da7444.png)
これでスライダーのバナー選択は完了。バナーをクリックし、リンク設定していきます。
リンクは、表示されたバナー画像をクリックし、編集画面に移動してから行います。画像をクリックし、設定の「リンク」から移動したいページを選ぶか、URLを指定します。
![](https://cxg-design.jp/wp-content/uploads/2023/10/ddebece10be9e77e429f5beaba839aaf-1.png)
画像をクリックし、コンテンツ>リンクの+をクリック
![](https://cxg-design.jp/wp-content/uploads/2023/10/e574b62291b2ee58b3f08514d134b8ba-1.png)
投稿の中からバナーの記事を選択するとURLが指定される。これで1つ目のリンク設定終了です。
![](https://cxg-design.jp/wp-content/uploads/2023/10/d6c39a0f92c5048a4a5e420f639e688c-1.png)
上のメニューから「スライド」をクリックし、次のバナーを選択して同じように設定していく。保存は、右上のボタンで随時していく。
Size
![](https://cxg-design.jp/wp-content/uploads/2023/10/a2532859b54e14d6344a4d933601b5a2.png)
色々設定項目がありますが、大きな設定の一つは、「レイアウト」の「全幅を強制」のチェックを外すことです。コンテナごと広がり、その他のオブジェクトにも影響を与えるので、CSSでしっかりレイアウトしている場合は外しましょう。これによってスマホからPCまで、スライダーの入っている枠の全幅で表示されます。
項目 | 設定 |
---|---|
スライドの幅制限 | OFF(右の全てOFFならONのままでOK) |
Breakpoints | OFF |
全幅を強制 | OFF |
操作
![](https://cxg-design.jp/wp-content/uploads/2023/10/c5cae2672321ec93f483493201729158.png)
次に、スライダー周りのデザインができる「操作」の設定を行います。「操作」では矢印や、ホイール、サムネイルといったパーツの有無や、色、大きさ、位置の設定がここで行えます。今回は、Text Barと影は設置していませんが、デザイン的に必要であれば、設定します。
項目 | 設定 |
---|---|
Text Bar | OFF |
影 | OFF |
アニメーション
![](https://cxg-design.jp/wp-content/uploads/2023/10/78ca7050c829b2e9874ef412169014a3.png)
「アニメーション」では、横スライドの他に、縦スライドやフェードのアニメーションを選ぶことができ、スライド時間も設定できます。「Dulation」は、スライドアニメーションのスピードで、800MSは0.8秒です。コードを使わずに設定が出来るのがすごく便利です!
Background Animationでは、タイル状など、エフェクト効果のあるスライドが設定できます。エフェクトを選択するだけで設定できるので、他のサイトとは違う、目に止まるスライドにする時は効果的です。
項目 | 設定 |
---|---|
Dulation | 800 |
自動再生
![](https://cxg-design.jp/wp-content/uploads/2023/10/4c2786e315320985036b58fb74ba97dc.png)
自動再生のチェックを入れます。これを入れることによって、指定した時間が経過したら、スライドが動きます。今回は、5秒でスライドが動くように「Slide Duration」を5000MSに設定。また、スライダーをフリップしたり、サムネイルをクリックしても、アニメーションが止まらないように「Stop On Click」のチェックを外します。
項目 | 設定 |
---|---|
自動再生 | ON |
Slide Dulation | 5000 |
Stop On Click | OFF |
最適化
![](https://cxg-design.jp/wp-content/uploads/2023/10/c5ac1ff96eeb8d33670cacb652f1e345.png)
トップページの上に置く場合、遅延読み込みすると、ページが読み込んでるのに見えないということになるので、オープニングアニメーションの設定を考慮して、入れるか、「insitant」にするか決めましょう。
項目 | 設定 |
---|---|
Loading Type | Instant |
表示時に再生する | ON |
スライド
![](https://cxg-design.jp/wp-content/uploads/2023/10/b6bf620719c2e4bc16b16204433c0915.png)
設定されたスライダーサイズに対して、バナー画像をどう配置していくかを設定できます。今回はデフォルのFillを使用します。指定したサイズに、画像の縦横倍率を変更せず、全面表示してくれます。
項目 | 設定 |
---|---|
Slide Background Image Fill | Fill |
開発者
![](https://cxg-design.jp/wp-content/uploads/2023/10/f477be28dead0f47ab985467d04c683b.png)
開発者は、CSSなどの設定ができるところですが、デフォルトのまま変更しません。
では、いくつかデモとして、Smart Slider3で作成したスライダーを簡単な設定とともに紹介いたします。バナーをクリックしたら、それぞれのBLOGページに移動します。基本的にスライダーのデザイン、モーションを変更するのは、「操作」と「アニメーション」です。
シンプルスライダー
シンプルなバナースライダー。スマホ版は矢印が見えなくなります。設定もほぼデフォルトのままです。
項目 | 設定 |
---|---|
矢印 | 左右内側(SP OFF) |
スライド方向 | 横 |
ページコントロール | ON |
サムネイル付縦スライダー
サムネイル付きの縦スライダーです。矢印はカーソルを合わせたら表示されます。サムネイルが多くなると左右に矢印が出て、移動できるように設定してあります。
項目 | 設定 |
---|---|
矢印 | 左右内側(SP OFF) |
スライド方向 | 縦 |
サムネイル | ON |
サムネイル付フェードスライダー
サムネイルが、ページコントロール風になっています。切り替わりがフェードになっています。サムネイルは選択時に縁がつきます。イメージをCSSで角丸設定にしています。
項目 | 設定 |
---|---|
矢印 | OFF |
スライド方向 | クロスフェード |
サムネイル | ON |
Smart Slider3のマルチデバイス対応
以前は、PCのみの横長スライダーが主流でしたが、マルチデバイス対応により、全面スライダー、SP、PCで画像変更など、変化しています。今回紹介したSmartSliderはデバイスによる画像変更はできないので、背景やスライダーの高さ、レイアウトなどで、マルチデバイス対策をする必要があります。
設置方法
最後にページに反映させます。「一般設定」の「公開」にショートコード、PHPコードが表示されます。このコードをコピーして、所定の場所にペーストします。
![](https://cxg-design.jp/wp-content/uploads/2023/10/d8b89e9ae20b369ce278baa5a6655ea0-2000x1185.png)
左が、投稿用。右がトップページ用(PHPファイル書き込み)
今回のブログのデモの場合は、投稿になるので、左のショートコードをコピーします。設置したい場所で、ブロックエディタで「ショートコード」を選択し、コピーしたショートコードをペーストします。
![](https://cxg-design.jp/wp-content/uploads/2023/10/b44d4c1a144a3bd7914b8b39a531db6a-2000x1185.png)
テキストボックスに、コピーしたショートコードをペーストします。
今回想定した、トップページの場合、投稿ではないので、右のPHPコードをトップページのPHPにペーストします。トップページに反映する場合は、PHPの修正が必要になるので、設置した状態で納品になります。スライダーは固定で、バナーの更新、新規作成のみ行います。
今回は、無料版のSmart Slider3について紹介しました。筆者は有料版を使っていませんが、設定、更新が簡単なプラグインなので、前後のスライドも表示できるカルーセルも気になります。機会があれば紹介したいです。
CXG DESIGNでは、WordPressサイトの更新が簡単にできるよう設定いたします。詳細は、コンタクトフォームよりお問い合わせください。