Smart Slider 3は、サイトの好きな場所にスライダー機能を設置できるプラグインです。
無料版でも幅広いカスタマイズに対応しており、専門知識がない人でも理想に近いスライダーを作成できます。直感的に操作できるため、はじめてスライダー作成にチャレンジする方にもおすすめです。
本記事では、Smart Slider 3の使い方や設定項目について解説します。
Smart Slider 3とは
Smart Slider 3は、直感的な操作でスライダー機能を実装できるプラグインです。
無料版でもかなりのカスタマイズに対応しており、プログラミングの知識がない人でも手軽にスライダーを作成できます。
- トップページにスライダーを実装したい
- スライド画像にボタンやテキストを挿入したい
- 記事やサイドバーにもスライダーを設置したい
上記のような要望を叶えてくれるプラグインです。
有料版は多機能かつ高度なテンプレートなどが活用できますが、ほとんどの人は無料版で満足できるかなと。まずは無料版を使い倒して、物足りなさを感じた際にアップグレードするとよいでしょう。
Smart Slider 3のインストール方法
Smart Slider 3のインストールは、WordPressのプラグイン追加ページで「Smart Slider 3」と検索してインストールできます。
または、下のダウンロードボタンから直接ダウンロードした後、プラグインファイルをwp-content/pluginsディレクトリにアップすることも可能です。
プラグインのインストール方法については、下記記事で詳しく解説しています。
2021/2/16 情報を更新いたしました。 WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインス...
Smart Slider 3の基本的な使い方
ここでは、Smart Slider 3で新規にスライダーを作成する方法と、WordPressに設置する方法について見ていきましょう。
新規でスライダーを作成する方法
WordPressの管理画面左側にある「Smart Slider」をクリックすると、下画像のようにチュートリアル動画が表示されます。
下に表示されている「GO TO DASHBOARD」ボタンをクリックして、Smart Slider 3の管理画面へ移行しましょう。
※チュートリアルを非表示にしたい場合は「Don’t show again」をクリックしてください。
スライダーを新規で作成するには「NEW PROJECT」をクリックしてください。
スライダーの作成方法が表示されるので「Create a New Project」をクリックしましょう。
新規で作成するスライダーの種類を決定します。
- Project Type：スライダー
- Slider Type：シンプル
- 設定：スライダー名やサイズを指定
Project Typeでは「スライダー」か「ブロック」を選択できます。
「ブロック」は単体の画像を表示するだけなので、スライド機能を使いたい方は「スライダー」を選択しましょう。
Slider Typeは無料版の場合「シンプル」のみ選べるようになっています。「カルーセル」と「ショーケース」など、表示の仕方をカスタマイズしたい場合は、Proバージョンへ切り替えましょう。
設定では、スライダーの名前とサイズ、レイアウトについて必要事項を入力します。
上記の設定を完了したら「作成」をクリックしてください。
プロジェクトの作成が完了すると、自動で画面が切り替わります。
画面が切り替わったら、上部にある「スライドを追加」をクリックしてください。
スライドの種類を選択できます。
- 画像：画像をスライドさせる
- Blank：空のスライドを表示させる
- 投稿：投稿をスライドさせる
- 静的オーバーレイ：スライドの上に固定表示させる
- Dynamic Slides：タグやカテゴリーなどを指定してスライドさせる
今回は最も一般的な「画像」を選択します。
WordPressのメディアライブラリが開くので、画像を選択しましょう。
追加された画像にマウスカーソルを合わせると、メニューが選択できます。削除や複製はこちらから行いましょう。
画像の順番はドラッグ&ドロップで入れ替えが可能です。
好みの画像を選んだら、スライダーの設定は完了です。
自動で保存されていますので、そのまま閉じて問題ありません。
スライダーを設置する方法
作成したスライダーを実際に設置していきましょう。
ブロックエディタ
ブロックエディタでSmart Slider 3を利用するには、ブロックの追加ボタンをクリックした後「Smart Slider 3」と検索して、プラグイン名をクリックします。
Smart Slider 3のブロックが追加されますので「Select Slider」をクリックしましょう。
スライダーの候補が表示されます。
挿入したいスライダーを選択して「INSERT」をクリックしてください。
ブロックエディタの編集画面にスライダーが表示されました。
編集画面上ではスライドできませんので、プレビューから動作確認をして見てください。
クラシックエディタ
クラシックエディタの場合は、Smart Slider 3のアイコンをクリックします。
ブロックエディタのときと同じく、スライダーの候補が表示されるので選択して「INSERT」をクリックしてください。
クラシックエディタの編集画面では、下画像のようなショートコードが挿入されます。
プレビューからスライダーが正常に挿入されたか確認しておきましょう。
ショートコード/PHPコード
Smart Slider 3はショートコードやPHPコードにも対応しています。
WordPressの管理画面から「Smart Slider 3」→「ダッシュボード」→「一般設定」の順で進むと、ショートコードとPHPコードが表示されます。
テーマのテンプレートに直接貼り付けたり、サイドバーにスライドを追加したりなど、アイデア次第でさまざまな使い方が可能です。
Smart Slider 3でスライダーをカスタマイズする方法
Smart Slider 3は直感的な操作でカスタマイズできます。
にカスタマイズしたい画像を選択してください。
編集画面が表示されました。
画面左側を見ると、追加できるパーツのメニューが並んでいます。
各パーツをクリックすると、画面右側に詳細設定が表示されます。
こちらでカラーやサイズなどを細かく設定可能です。
下画像はボタンの設定メニューになります。
ボタンの大きさや透過度、余白にフォントなど非常に細かくカスタマイズ可能です。
カスタマイズが完了したら、画面右上にある「保存」をクリックしておきましょう。
Smart Slider 3の設定項目
Smart Slider 3の設定項目について解説します。
- 一般設定
- Size
- 操作
- アニメーション
- 自動再生
- 最適化
- スライド
- 開発者
一般設定
一般設定では、以下4つの項目が設定できます。
公開
ショートコードやPHPコードが表示されるエリアです。
一般設定 – Simple Slider
スライダーの名前やサムネイル、タグなどを設定できます。
別名
ショートコードやアンカーリンクなどに使う際のIDを設定できます。
Slider Design
スライダーの配置や余白などを設定できます。
Size
Sizeでは、以下3つの項目を設定できます。
スライダーサイズ
スライダーのサイズを設定できます。「スライドの幅制限」をONにすると、デバイスごとの最大幅を設定可能です。
Breakpoints
Breakpointsは、デバイスの画面の大きさによってスライダーの大きさを調整できます。こちらはデフォルト設定のままで問題ありません。
レイアウト
レイアウトではスライダーを記事内に収めるか、全幅にするかを設定できます。
- Boxed：
記事やサイドバーなどコンテンツ内に収めて表示する - 全幅：
ヘッダーやフッターなどサイトの幅いっぱいにスライダーを表示させる
これらの項目は何度でも変更可能です。
スライダーの使用用途に合わせてカスタマイズしましょう。
操作
操作では、以下6つの項目を設定できます。
一般設定
一般設定は、スライダーの操作方法を設定可能です。
- Drag：
画像をドラッグしてスライドできるようにする - Mouse Wheel：
マウスホイールでスライドできるようにする - キーボード：
キーボードの右左でスライドできるようにする
スライドさせる画像の枚数などを考慮して、適宜設定を行いましょう。
矢印
矢印はスライダーの左右に表示されるアイコンです。
アイコンのデザインや位置などを細かく設定できます。
ただし、カスタマイズしすぎるとレイアウトが微妙に崩れることがあるので、基本はデフォルトのまま使うのがおすすめです。
ページコントロール
ページコントロールは、スライダーにドットを表示して、画像が何枚あるのかわかるようにできます。
「Position」ではドットを表示する位置を指定できます。
こんな感じで画像の外に表示させることも可能です。
「画像」をオンにすると、ドットにマウスカーソルを合わせたときにサムネイルが表示されるようになります。
ギャラリー系のスライダーを作る際に便利かなと。
「ホバー時の表示」は、マウスカーソルをスライダー上に合わせたときのみアイコンを表示する設定になります。
Text Bar
Text Barは、スライドに使っている画像のタイトルや説明文を表示できる機能です。
画像のタイトルを表示したい方は、Text Barをオンにしておきましょう。
サムネイル
サムネイルをオンにするとスライドの下にサムネイル画像を常時表示できます。
サムネイル画像の大きさやキャプションの有無なども設定可能です。
ただし、あまり表示項目を増やすとユーザーの関心が外れてしまうので気をつけましょう。
影
影はスライダーにシャドーをつけられます。
全8種類から選べるので、好みに合わせてカスタマイズしましょう。
アニメーション
アニメーションはスライドの動きを設定できます。
デフォルトでは水平方向になっていますが、垂直方向やクロスフェードなども設定可能です。
自動再生
自動再生では、スライダーを自動再生するかどうかを設定できます。
「Slide Duration」は「何秒でスライドさせるか」を指定可能です。デフォルトでは「8000MS（8秒）」に設定されています。
画像をクリックすると自動再生を止めたり、再度クリックすると自動再生を再開するなども設定できます。
「ボタン」では、自動再生のオンオフを切り替えるボタンを表示させられます。
最適化
最適化では、スライダーの読み込みや背景やサムネイル画像のリサイズなどを設定できます。
スライダーが表示されるタイミングを細かく設定できますが、基本的にはすべてデフォルトのままで問題ありません。
スライド
スライドでは、設定した画像がスライダーのサイズよりも小さいときに、背景をどのように表示するか設定できます。
デフォルトでは画像以外の場所を塗りつぶすようになっていますが、任意でぼかしにしたり、画像を伸縮させてフィットさせたりなども可能です。
開発者
開発者は、文字通り開発者向けのメニューです。
こちらはすべてデフォルトのままで問題ありません。
設定が完了したら右上の「保存」をクリックして、反映しておきましょう。
まとめ
Smart Slider 3は、アイデア次第でかなり幅広い用途に使えます。
サイトのトップページでアピールしたい情報を複数掲載したり、サイドバーにスライダーを設置して、画面をスクロールせずに情報を閲覧できるようにしたりなど、使い方はさまざまです。
完成したスライドは、管理画面から何度でも編集できる点もポイント。
複数のページにスライダーを設置していた場合でも、管理画面で変更したカスタマイズを全ページに反映できます。効率的に操作できるので、カスタマイズに対する腰も重くなりにくいです。
ここぞというときに使えるスライダー機能を活用して、ユーザーにアピールしていきましょう。
コメント