プラグイン

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

更新日:

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

2カラムサイトのサイドバーに「スライドショー(カルーセル)」を、CSSコードなど一切使わずに表示させたい!っていう方に、便利なプラグイン「Smart Slider 3」を利用した表示方法をご紹介します。

こんにちは!WordPressテーマ研究家SHINです。

 

サイドバー用300×250サイズのスライドショー(カルーセル)のサンプルです。

previous arrow
next arrow

 

限られたスペース内に静止画像やイラスト、動画を埋め込んだり、ピックアップ記事や広告まで表示できる機能なので、効率的なのはもちろんワンランク上のオシャレ感が演出できますよね♪

そこで今回は、WordPressプラグイン「Smart Slider 3」を使ってサイドバーにスライドショーを簡単に表示する方法をご紹介していきます。

 

では早速やってみましょう!

 

「Smart Slider 3」インストール方法と基本的な使い方

このプラグイン「Smart Slider 3」は、僕も愛用しています♪

プラグインのインストール方法と基本的な使い方は、こちらの記事を参考にしてみてください。

【WPプラグイン】初心者でも簡単にスライダーを実装できる『Smart Slider 3』
記事やサイドバーにスライドショーを表示できるプラグイン『Smart Slider 3』

こんにちは。WordPress研究家SHINです。 指定したコンテンツの画像や動画を、WordPress初心者でも簡単にスライダー表示させるプラグインを紹介していきます。   スライダー例 ...

続きを見る

 

サイドバーにスライドショーを表示する手順

※分かりやすいように「日本表記」にして説明していきます。

step
1
スマートスライダー3のダッシュボード画面から「NEW SLIDER」をクリックします。

alt=SmartSlider3

 

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

alt=SmartSlider3 2

 

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

alt=SmartSlider3 3

 

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

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

 

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

alt=SmartSlider3 6

 

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

alt=SmartSlider3 9

 

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

alt=SmartSlider3 7
alt=SmartSlider3 8

 

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

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

 

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

alt=SmartSlider3 11

 

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

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

 

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

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

 

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

 

 

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

 

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

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

 

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

alt=サムネイル

 

まとめ

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

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

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-プラグイン
-

Copyright© WordPress theme NAVI , 2019 All Rights Reserved.