2カラムサイトのサイドバーに「スライドショー(カルーセル)」を、CSSコードなど一切使わずに表示させたい!っていう方に、便利なプラグイン「Smart Slider 3」を利用した表示方法をご紹介します。
こんにちは!WordPressテーマ研究家SHINです。
サイドバー用300×250サイズのスライドショー(カルーセル)のサンプルです。
[smartslider3 slider=17]
限られたスペース内に静止画像やイラスト、動画を埋め込んだり、ピックアップ記事や広告まで表示できる機能なので、効率的なのはもちろんワンランク上のオシャレ感が演出できますよね♪
そこで今回は、WordPressプラグイン「Smart Slider 3」を使ってサイドバーにスライドショーを簡単に表示する方法をご紹介していきます。
では早速やってみましょう!
「Smart Slider 3」インストール方法と基本的な使い方
このプラグイン「Smart Slider 3」は、僕も愛用しています♪
プラグインのインストール方法と基本的な使い方は、こちらの記事を参考にしてみてください。
サイドバーにスライドショーを表示する手順
※分かりやすいように「日本表記」にして説明していきます。
step
1スマートスライダー3のダッシュボード画面から「NEW SLIDER」をクリックします。
![alt=SmartSlider3](https://wptheme-navi.jp/wp-content/uploads/2019/04/SmartSlider3_optimized.png)
step
2「スライダー名」を付けたら、サイドバーの表示サイズに合わせるためにWidth(幅)を「300」、Height(高さ)を「250」に設定して「CREATE」をクリックします。
![alt=SmartSlider3 2](https://wptheme-navi.jp/wp-content/uploads/2019/04/SmartSlider3-2.png)
step
3次にスライドショー表示させる画像やイラスト、動画ファイルを赤で囲っている部分へドロップしていきます。
![alt=SmartSlider3 3](https://wptheme-navi.jp/wp-content/uploads/2019/04/SmartSlider3-3.png)
step
4ファイルをアップロードして表示されたら、まず「SIZE」から設定していきます。
![alt=SmartSlider3 4](https://wptheme-navi.jp/wp-content/uploads/2019/04/SmartSlider3-4.png)
![alt=SmartSlider3 5](https://wptheme-navi.jp/wp-content/uploads/2019/04/SmartSlider3-5.png)
![](https://wptheme-navi.jp/wp-content/uploads/2019/01/20e469be708cd6800be5725e0ca41b9d.png)
step
5次に「AUTOPLAY」設定はONにして、スライドする「秒数」を設定しましょう。だいたい4秒前後がベターです。
![alt=SmartSlider3 6](https://wptheme-navi.jp/wp-content/uploads/2019/04/fdwdfef.png)
step
6次に、下のメニュー設定にある「TEXT BAR」をクリックして、バー表示をONにします。(ファイルを説明するテキストが表示できます)
![alt=SmartSlider3 9](https://wptheme-navi.jp/wp-content/uploads/2019/04/awegtaseth_optimized.png)
step
7次に、各ファイルの「EDIT」をクリックして「Settings」進みましょう。
![alt=SmartSlider3 7](https://wptheme-navi.jp/wp-content/uploads/2019/04/aehetfa_optimized.png)
![alt=SmartSlider3 8](https://wptheme-navi.jp/wp-content/uploads/2019/04/shtghth_optimized.png)
step
7Settingsでは、「Slide title」「Description」「Link」を必要に応じて入力していきます。
![alt=SmartSlider3 10](https://wptheme-navi.jp/wp-content/uploads/2019/04/ewtfgnbhgk.png)
![](https://wptheme-navi.jp/wp-content/uploads/2019/01/20e469be708cd6800be5725e0ca41b9d.png)
step
8全ての基本設定が完了したら、このスライダーの「ショートコード」を、ウィジェットにある「テキスト」にそのままコピペすればスライドショーが表示されます♪
オシャレでかっこいいスライドショー設定
「Smart Slider 3」には、基本的なスライドショーのほかにかっこよく演出できる表示設定がありますので、2つご紹介していきます。
1.豊富なアニメーションによるスライドショー
スライドショーのアニメーションには2種類の演出があり、デフォルトの水平移動するスライドショー以外に、バラエティーに富んだアニメーションが揃っています♪
![alt=SmartSlider3 12](https://wptheme-navi.jp/wp-content/uploads/2019/04/dwvdvvd_optimized.png)
![](https://wptheme-navi.jp/wp-content/uploads/2019/01/20e469be708cd6800be5725e0ca41b9d.png)
![](https://wptheme-navi.jp/wp-content/uploads/2019/04/aea921012dd82f619dc04fd6442433c9.png)
![](https://wptheme-navi.jp/wp-content/uploads/2019/04/bc932d761c63c45b08139db063c37c12.png)
![](https://wptheme-navi.jp/wp-content/uploads/2019/01/20e469be708cd6800be5725e0ca41b9d.png)
![alt=パズル1](https://wptheme-navi.jp/wp-content/uploads/2019/04/3a6c2ad824564c41792e4e5c7c299e69.png)
![alt=フェード](https://wptheme-navi.jp/wp-content/uploads/2019/04/58f61a59646bebb3d889e5fdee24359e.png)
![alt=カーテン](https://wptheme-navi.jp/wp-content/uploads/2019/04/6a13b6c46d4152a25fb52c257bfad93d.png)
2.サムネイル表示のスライドショー
スライドショーするファイルが多い場合に便利なのが「サムネイル」。表示しているファイルの下(サムネイル)に、他ファイルを表示させる演出もできます♪
![alt=SmartSlider3 13](https://wptheme-navi.jp/wp-content/uploads/2019/04/djthygmnjyh_optimized.png)
![](https://wptheme-navi.jp/wp-content/uploads/2019/01/20e469be708cd6800be5725e0ca41b9d.png)
まとめ
WordPressプラグイン「Smart Slider 3」を使って、サイドバーにもスライドショーを表示する方法のご紹介でした。
CSSコードを記述しない方法なので、初心者でも簡単で手軽に表示できるのが良いですよね!Smart Slider 3の使い方さえマスターすれば簡単に表示できるので、スライドショーを表示させるならこのプラグインはおすすめです♪