Smart Slider 3の使い方 WordPressにスライダー(スライドショー)設置する方法

Smart Slider 3で WordPressにスライダー を設置する方法

今回は、WordPressのプラグインSmart Slider 3(スマートスライダー3)を利用して、スライダー(スライドショー)を設定する方法をご紹介します。
 

 

ホームページでスライダー(スライドショー)をページの中に埋め込みたいんですが、どうしたらよいでしょうか??
WordPressスライダー系のプラグインがたくさんあります。ここでは有名なスライダープラグイン「Smart Slider 3」の使い方を説明していきますね
 

 

Smart Sliderについて

プラグイン「Smart Slider」を使えば、Webサイトの固定ページや投稿記事にスライドショーを作成することができます。もちろん、レスポンシブ(スマートフォン)にも対応しています。
 

Smart Slider 3
 

スライダー系のプラグインは有名なMetaSliderの他にいくつも存在しますが、SmartSliderは無料版でサムネイル付きのスライダーを作成でき、かつ豊富な機能・設定ができるため、おすすめのスライダー系プラグインです。
 

 

それではここからは、具体的なSmart Sliderの導入・使い方を説明していきます。
 

「Smart Slider3」のインストール

Smart Slider の導入の流れ1
 

まずプラグイン「Smart Slider」をインストールしましょう。WordPress管理画面の「プラグイン」を選択し「新規追加」をクリックします。
プラグイン>新規追加
 

検索窓に「Smart Slider」と入力します。「Smart Slider 3」が表示されましたら、「今すぐインストール」をクリックします。
Smart Slider 3を検索して今すぐインストール
 

インストールが完了しましたら、「有効化」をクリックしてください。
Smart Slider 3 有効化
 

以上で、Smart Slider 3のインストール作業は完了です。引き続きスライダーを作成していきます。
 

スライダーを作成する

Smart Slider の導入の流れ2
 

次に、スライダーの作成方法を説明していきます。
 

管理画面の左下に「Smart Slider」をいう項目が増えていますので、選択します。
ダッシュボードメニュー下にあるSmart Sliderを選択
 

管理画面から「NEW SLIDER」をクリックします。
Smart Slider New Sliderでスライダー新規作成
 

スライダーを作成していきます。今回「Slider Name」は「slider1」とし、Preset「Default」を選択し、「CREATE」をクリックします。
スライダーを作成
 

「slider1」と名前を付けたスライダーが表示されます。
Smart Slider Add Slide
 

「ADD SLIDE」→「Image」をクリック後、好きな画像を選択して、「SAVE」しましょう。

 

SLIDER(スライダー)とSLIDE(スライド)って意味がわかりにくいわね・・
確かに少しわかりにくいですね。スライダーは、各スライドをまとめた全体を指しているのに対して、スライドは一枚一枚の各画像を指しています。
 

スライダーとスライドの説明
 

ページにスライダーを貼り付ける

Smart Slider の導入の流れ3
 

次に固定ページや投稿ページなどのページにSmart Sliderを設置する手順を説明していきます。
 

クラシックエディター(ビジュアルエディタまたはテキストエディタ)の場合

固定ページ(または投稿ページ)の編集画面にある「SmartSlider」の青いアイコンをクリックします。
ビジュアルエディターでSmart Sliderのアイコンがあります
 

テキストエディターでもSmart Sliderのアイコンはあります。
テキストエディターでもSmart Sliderのアイコンがあります

 

記事に掲載する「スライダー」を選択すると、該当のスライダーのショートコードが挿入されます。プレビューをみてスライダーが作成されていればOKです。

 

スライダーは、前述の手順でいくつも作成できます。エディター側では、複数のスライダーの中から設置したいスライダーを選ぶ形になります。
 

ブロックエディターにも対応しています

Smart Sliderはブロックエディター(グーテンベルグエディター)にも対応しています。ブロックエディターでSmart Sliderを利用することもできます。

 

(補足)ショートコードやPHPコードを貼り付けても設置できます

エディターから選択する以外にも、スライダーの設定>PUBLISHからショートコードをコピーして利用することもできますし、テンプレートにPHPコードを直接書き込んでもスライダーを設置することができます。
 

スライダー設定>PUBLISH
 
 

Smart Slider スライダーの色々な設定

Smart Slider の導入の流れ4

今までは、デフォルト(初期設定)でスライダーを設置する方法を説明しました。ただ、サイズの調整などをしていないため、画像が途中で切れて、見た目が少し不恰好になっています。
 

 

Smart Sliderでは、こういったスライドの微調整をすることもできます。ここからは、Smart Sliderのいろいろな設定方法を説明していきます。
 

SIZE設定

スライダーのサイズ設定は、頻繁に使う設定です。Smart Sliderから先ほどのスライダーを選択して編集画面を開けましょう。

 

Slider1の編集画面が表示されます。各種設定が可能です。
Slider1の編集画面。各種設定が可能です
 

スライダーのサイズを調整していきます。スライダーのサイズは、管理画面「SIZE」から変更することができます。
Slider1の編集画面。SIZEでサイズ系の設定ができます
 

ここでは、よく使う設定部分について説明します。
ここでは、Sizeを幅1000pxに高さを600pxにしました。各画像の縦横比率に合わせて各自試してみてください。
また、Slider HeightのMinを250pxにしました。この設定により、スマホなどの小さいサイズでもスライダーが高さ250px以上になります。
Slider1 SIZEの設定
 

上記の設定をした時のスライダーを見てみましょう。スマートフォンでも良い具合の縦横比になっています。

 

なお、そのほかの項目も含めた設定の意味は下記の通りです。

設定項目意味
Sider sizeスライダーの幅と高さを設定します。
marginスライダーの上下左右の空白を設定します。
Responsive mode縦横比を保つか、横幅基準にサイズを決定するかを選択します。
mode高さと幅の大きさの自動か手動の選択ができます。
slider heightスライダーの高さの最小値と最大値を設定します。
Maximum slide widthスライダーの幅の最大値を設定します。

 

TEXT BARの設定

「TEXT BAR」(テキストバー)デフォルトでは非表示で、有効にするとスライダーにタイトルや説明が表示されます。

 

テキストバーの設定をONにしてSAVEします。

 

スライダーにタイトルが表示されるようになりました。

 

サムネイルの設定

つづけて、便利な機能サムネイルについて説明していきます。
 

「THUMBNAILS」(サムネイル)デフォルトでは非表示になっています。サムネイルありに変更すると、スライダーにサムネイルの一覧を表示することができます。

 

■表示例

 
 

ARROWSの設定

「ARROWS」(アローズ)は、スライドの左右に表示する矢印が設定できます。
矢印は3つから選択でき、一番左側を選択した場合は、矢印は非表示となります。矢印のスタイル・形・色も変えることができます。
 

SliderのArrowsの設定
 
 

Bulletsの設定

「Bullets」(ビュレット)では、スライダーの上に、●を表示するかどうかを設定することができます。
 

Slide bullets 設定
 

 

SHADOWSの設定

「SHADOWS」(シャドウズ)デフォルトでは非表示で、スライダーに影(7種類)を付けた表示ができます。
 

Slider1 Shadow(影)の設定
 

下記はSHADOWを設定した例です。スライダー下に影がつきました。
Slider1 Shadow(影)の設定
 

他にも色々な設定ができますが、ここでは、比較的よく利用するシーンの多い項目に絞って説明しました。
 

設定ができましたら「SAVE」をするのを忘れないようにしないとですね。
 

スライドの設定

スライドショーの設定を説明しましたが、各スライド(画像)に対してもいくつかの設定が可能です。
 

スライダーの設定画面で適当なスライド(画像)を選択するとスライドの設定画面が表示されます。Settingを選択してみましょう。

 

スライドで設定したタイトルや説明が表示されていることがわかります。

(本表示には、スライダーの設定でTEXT BARをONにしている必要があります。)
 

なお、そのほかの項目も含めた設定の意味は下記の通りです。

設定項目意味
Slide Titleスライドのタイトルです。(※注)
Descriptionスライドの概要です。(※注)
Thumbnailスライダーに表示される画像です。
Linkスライドをクリックしたときに遷移させるリンクです。
Slide durationスライダーの自動再生を有効にしたときの表示時間(単位:ミリ秒)。例えば表示時間「1000」にすると1秒間表示され、次のスライドに移ります。
Maximum slide widthスライダーの幅の最大値を設定します。

 
(※注)表示するには、スライダーオプションでTEXT BARを有効にする必要があります。
 

上記の項目を入力したら、「SAVE」をクリックします。
 

まとめ SmartSliderを活用して魅力的なHPを作ろう

いかがでしたでしょうか。今回は、WordPressのプラグインSmart Sliderを利用してスライダー(スライドショー)を設定する方法をご紹介しました。
 

 

スライダー系のプラグインはほかにもたくさんありますが、無料版でサムネイルありのスライダーまで設定できるのは比較的少ないと思いますのでおすすめのプラグインです。
 

Smart Sliderを利用して魅力的なホームページを作成しましょう。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

『自分で作る選択を!』

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

 

 

PICK UP みんなの仕事インタビュー

WEBST8では、サロン・整骨院・整体・農業・ピアノ・ネイル・ライター・デザイナー・ネイル・美術品・不動産・士業などなど、個人でビジネスを持ち仕事をされている方がたくさんおられます。

ユニークで面白い仕事をされている方も多いので、実際に独立・起業・仕事 Web活用について実体験をインタビューいたしました。

インタビュー一覧

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ