Smart Sliderの使い方 – 基礎編【WordPressプラグイン】

WordPressサイトに簡単にスライダーを設置できるプラグイン「Smart Slider」。設定が難しくて詳しい使い方がよく分からなかったという方も多いのではないでしょうか?

実際「Smart Slider」では、シンプルな画像だけのスライダーであれば簡単に作れます。この記事では基本的な最小限の設定だけで、シンプルなスライダーを設置する手順を詳しい画像付きで解説します。

スポンサーリンク
スポンサーリンク

Smart Sliderで出来ること

Smart Sliderは、WordPressサイトに簡単に高品質なスライダーを設置できるプラグインです。

Classic Editerをお使いの方はもちろん、ブロックエディター (Gutenberg) でも利用でき、さらにElementorDivi Builderなどの各種ページビルダーにも適応しています。

画像が切り替わるだけのシンプルなスライダーなら、Smart Sliderで作ったことがある方もいると思います。しかしSmart Sliderは非常に高機能で、ほかにも様々な表現をスライダーに追加することが可能です。

たとえば、画像の上にテキストボタンを重ねて表示させて、それらにアニメーション (動き) を付けることも出来ます。またPC表示モバイル表示とで、それらの要素のレイアウトを変化レスポンシブ表示)させることも可能です。


以下のスライダーをご覧ください。テキストボタンアイコンなどが背景画像とは別レイヤーで表示されており、印象的なアニメーションも付いています。また、PCスマホで表示させたときには、それぞれ異なるレイアウトで表示されるようになっています。(PCスマホ両方で違いを確認してみて下さい)

Slide
Huge Laptop Sale
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
One
Two
Three
Slide
Create responsive animated sliders and blocks in minutes.
Recent Projects include Google, Samsung, The New-York Times.
Retina Ready
Retina Ready

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Over 40 templates
Over 40 templates

Sed vitae leo placerat, venenatis massa at, dictum nisl.

Secure & Reliable
Secure & Reliable

In nec quam auctor, aliquet ex vitae, suscipit lectus.

Slide
I design mobile apps and websites for
amazing clients.
innovative startups.
professional companies.
Recent Projects include Google, Samsung, The New-York Times.
previous arrow
next arrow

こういったさまざまな機能を駆使すれば、Smart Sliderだけでサイトのトップページを丸ごとプロフェッショナルに仕上げたり、訴求力のある効果的なランディングページを作成することも可能です。ブロガーの方もサイトのクオリティアップに繋がりますね。

Smart Sliderは、単なるスライダーだけではなく、高機能なページビルダーとして多彩な機能を備えているので、WordPressサイトの表現力を格段にアップさせることが出来るでしょう。


そんな多機能なSmart Sliderですが、この記事では、まずは基礎として、画像が切り替わるだけのシンプルなスライダーの作成手順を、わかりやすい画像つきで詳しく解説していきます。

Pro版の機能を含むさらに詳しい使い方(テキスト、ボタン、レイヤー、アニメーション、パーティクルエフェクト、各種スライド設定、など)については、別記事で何回かに分けて解説しますので、ブロガーの方Web制作者の方も是非いっしょにスキルアップしていきましょう💪🏻

スライドの基本的な作成手順

Smart Sliderは、WordPressの「プラグイン」→「新規追加」から検索するとすぐに見つかるので、インストールして有効化しておきます。

以下のようにサイドメニューに「Smart Slider」が表示されます。ダッシュボード画面には最初、スタートガイドの動画が表示されていますが「Don’t show again」をクリックしておけば次回から表示されなくなります。

動画を消すとダッシュボードの初期画面が表示されます。まずは基本的なスライド作成の流れを見ていきましょう。新規でスライダーを作成するには「NEW PROJECT」をクリックします。

オリジナルのスライドを作る場合は「Create a New Project」を、テンプレートを利用する場合は「Start with a Template」をクリックします。ここでは「New Project」を選択します。

テンプレートを利用してカスタマイズする方法もありますが、思い通りにカスタマイズするには、ある程度、スライドの編集方法に慣れている必要があります。

Project Type:
複数の画像をスライドで切り替える場合は「Slider」を選択。画像を切り替えず単一の画面構成にする場合は「Block」を選択します。

Slider Type:
スライダーのタイプを選べますが「Carousel」「Showcase」は有料のPro版にアップデートすると選択できるようになります。

Settings:
一番下の「Settings」ではプロジェクト名を設定します。Width(横幅)Height(高さ)はあとから変更できるのでここでは設定しなくても支障はありません。

Layout」のプルダウンは、スライダーをコンテンツ幅に収めたい場合は「Boxed」、ページ幅いっぱいに表示する場合は「Full width」を選択します。「Full Page」はPro版のみです。

My Project」の画面が表示されますので「ADD SLIDE(スライドを追加)」ボタンをクリックしてスライドを追加していきます。

追加できるスライドの種類は以下のように5つありますが、単純に画像のみをスライド表示する場合は「Image」を選択します。他の選択肢については別記事で詳しく解説いたします。

Image」を押すと「メデイアライブラリ」が開きますので、用意しておいた画像を選択するか、ファイルをアップロードして読み込みます。

3枚の画像を読み込みました。このスライドを投稿ページなどに表示させるために、いくつか設定をしていきます。画面を少し下にスクロールしてください。

スライダーの表示・挿入方法

Generalタブの「Publish」を見ます。ページにスライドを表示させる方法は3種類ありますので順番に見ていきましょう。

ショートコード貼り付け

Shortcord」を使用する方法です。まず、表示されているショートコードをコピーして、スライダーを表示させたいページの編集画面エディター)を開きます。

投稿ページ(あるいは固定ページ)のエディターを開いたら、以下のようにショートコードを貼り付けるだけです。ビジュアルエディターの方に貼り付けてしまって大丈夫です。

クラッシックエディターでも方法は同じです。

ブロックを追加

2つ目の方法ですが、エディターのブロックの挿入ボタンなどからスライダーを簡単に挿入する方法です。ブロックエディター/クラッシックエディターはもちろん、ElementorDivi などのページビルダーにも対応していますよ、と書いてあります。

ブロックエディターGutenberg)の場合は、ブロックを追加から簡単に挿入することが出来ます。

Smart Sliderのブロックが挿入されるので「SELECT SLIDER(スライダーを選択)」を押します。

挿入するスライダーを選択して「INSERT(挿入)」を押せばページ内に挿入されます。

クラッシックエディターをお使いの場合も同様に、以下の帽子のアイコンから挿入できます。

PHPコードを貼り付け

WordPressテーマを構成するファイルに直接コードを書き込む方法です。HTMLCSSなどの知識が必要になりますので、具体的な方法は別の記事で触れることとして、ここでは詳細な説明は省略いたします。

挿入したスライドの基本設定

スライドの設定項目はたくさんあるのですが、ここでは、表示させるのに必要最低限な項目のみ設定していきます。

設定に変更を加えたら、必ず右上の「SAVE」ボタンを押して変更を確定させてください。

Width(横幅)Height(高さ)

まず「Size」タブで、Width(横幅)Height(高さ)を決めます。

すべての画像が同じサイズで揃っている場合は、たとえば今回使用した画像サイズは1800x1175pxなので、その数値をそのまま入力すればよいです。設定を変更したら「SAVE」をします。

ただ、画像サイズ縦横比)が揃っていない場合もあると思います。その場合は、実際にページに表示させたい数値(例えば 650x424px など)を設定します。

この場合は、設定した縦横比に合わせて、それぞれの画像の上下左右切り取られることになります。なので、意図しない箇所が切れてしまうのを防ぐには、やはり最初から画像サイズを揃えておく方がベターでしょう。

Downscale/Upscale

同じく「Size」タブを少し下にスクロールすると「Layout」という項目があります。ここでは「Downscale」「Upscale」両方がオンになっていることを確認します。

Downscale
WidthHeight」で設定したサイズより狭い横幅、あるいはスマホなどの小さい画面でスライドを表示したときに、自動的にサイズを縮小して調整してくれます。

Upscale
画像サイズが揃っていなくても、上下左右に隙間ができないようにサイズを拡大して調整します(その代わりに画像の上下あるいは左右が切り取られます)。

ここまでの状態で、いちどスライダーを表示してみましょう↓

slider_03
slider_02
slider_01
previous arrow
next arrow

どうでしょうか? ここまでの設定では、ページのコンテンツ幅いっぱいにスライダーが表示されています。3枚の画像を切替える矢印が左右に表示されていますが、色が「」なのではっきりと見分けることが出来ませんね。

矢印と切り替えボタンの調整

Arrow

矢印がはっきり見えるように設定を変更していきます。
Controls」タブの「Arrow」では、2種類の矢印があり、デフォルトでは右のシンプルな矢印が選択されています。

矢印はカラースタイルをカスタマイズできるのですが、ここでは左側の矢印を選択してみます。

Bullet

同じく「Controls」タブで「Arrow」のすぐ下に「Bullet」の設定があります。「Bullet」とはボタンでスライドの画像を切替える機能ですが、こちらもオンにしてみます。

Bullet」をオンにして「Position」プルダウンを開くと、ボタンの位置を指定できるようになっています。デフォルトでは以下の位置(スライド内の中央下)になっています。

ここでは以下のように、ボタンをスライドの外側に表示するように変更してみます。

再度、ここまでの設定でスライドを表示してみます。矢印の視認性が良くなり、スライダーだということが解りやすくなりました。

表示サイズを調整する

スライダーをページのコンテンツ幅いっぱいに表示させるのではなく、PC画面のときだけ、もう少し小さく表示させたいということもありますね。その場合は、「Size」タブの「WidthHeight」を表示したいサイズに設定します。

同じく「Size」タブの「Layout」で「Upscale」をオフにします。

そして「Genetal」タブの「Align(整列)」のプルダウンから「Normal Center」に変更します。「Center」に変更しないとスライダーがページの左に寄ってしまいます。左寄りの表示で問題ない場合は「Normal」のままでOKです。

調整後のスライダー表示を確認してみます。表示サイズが 650x424px に調整されました(PC表示の場合のみ)。

ここまで、画像を切り替えるだけシンプルなスライドという設定で、Smart Slider無料版の機能だけを使い、基本的なスライドの作成・表示手順を解説いたしました。

しかしながら、無料版の機能だけで出来ることは限られており、Smart Sliderのポテンシャルを最大限に発揮するにはPro版の機能にも目を向ける価値があります。Pro版の導入を検討されている方は、以下の記事もぜひ参考になさってください。

Pro版では、さらに多くの細かい表示設定が可能で、よりプロフェッショナルテンプレートも追加で利用できます。また、スタイリッシュなエフェクトアニメーションを加えることも可能になります。

それらの機能の使い方については、個別のページを設けて詳しく解説いたしますので、是非また覗いてみてください。

コメント