【CSSコード不要】サイドバーにスライドショーを表示する方法

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」をクリックします。

step
2「スライダー名」を付けたら、サイドバーの表示サイズに合わせるためにWidth（幅）を「300」、Height（高さ）を「250」に設定して「CREATE」をクリックします。

step
3次にスライドショー表示させる画像やイラスト、動画ファイルを赤で囲っている部分へドロップしていきます。

step
4ファイルをアップロードして表示されたら、まず「SIZE」から設定していきます。

SHIN

スライダーサイズは、サイドバーへ綺麗に表示できる幅と高さに調整して、一番下のサイズも同一のサイズにしましょう。また「Mode」では、ダウンスケール・アップスケールともにチェックをOFFにします。

step
5次に「AUTOPLAY」設定はONにして、スライドする「秒数」を設定しましょう。だいたい4秒前後がベターです。

step
6次に、下のメニュー設定にある「TEXT BAR」をクリックして、バー表示をONにします。（ファイルを説明するテキストが表示できます）

step
7次に、各ファイルの「EDIT」をクリックして「Settings」進みましょう。

step
7Settingsでは、「Slide title」「Description」「Link」を必要に応じて入力していきます。

SHIN

記事を表示させる場合には「タイトル名」も表示できるし、広告ならアピール文も入力できますよね。リンクはそのまま貼り付ければOK♪

step
8全ての基本設定が完了したら、このスライダーの「ショートコード」を、ウィジェットにある「テキスト」にそのままコピペすればスライドショーが表示されます♪

オシャレでかっこいいスライドショー設定

「Smart Slider 3」には、基本的なスライドショーのほかにかっこよく演出できる表示設定がありますので、2つご紹介していきます。

1.豊富なアニメーションによるスライドショー

スライドショーのアニメーションには2種類の演出があり、デフォルトの水平移動するスライドショー以外に、バラエティーに富んだアニメーションが揃っています♪

SHIN

「GENERAL」から下の方にある「Main animation」というカテゴリーには、下のように「垂直」「反転（左から右）」といったアニメーションで、スライドショー表示することもできます♪

SHIN

また「Background animation」では、「パズル」「フェード」「カーテン」など6種類のアニメーションスライドショーが楽しめます♪

2.サムネイル表示のスライドショー

スライドショーするファイルが多い場合に便利なのが「サムネイル」。表示しているファイルの下（サムネイル）に、他ファイルを表示させる演出もできます♪

SHIN

この「サムネイル」設定をすると、下のスペースにもスライドショーで表示される画像を見せることができます♪

まとめ

WordPressプラグイン「Smart Slider 3」を使って、サイドバーにもスライドショーを表示する方法のご紹介でした。

CSSコードを記述しない方法なので、初心者でも簡単で手軽に表示できるのが良いですよね！Smart Slider 3の使い方さえマスターすれば簡単に表示できるので、スライドショーを表示させるならこのプラグインはおすすめです♪