Smart Slider 3 の使い方!超初心者でもカンタンに高機能なスライダーが作れる

はじめに

こんなスライダー(メインビジュアル)を作ることができます!

Smart Slider 3 を使うことで、ノンデザイナーでもノーコードで、メインビジュアル等に使用する素晴らしいスライダーを作成することが可能となります。

しかしプラグインをインストールし管理画面にアクセスしてみると・・なんだかめんどくさそう・・

そんな方を対象に超初心者でもステップに従い操作していただければ、下記のようなスライダーを作成できるよう記事を書きました。

この記事を書く人

あさか

株式会社インスパイアデザイン代表(WordPressを用いたWeb制作やシステム開発を行なっている会社です。)

元Webデザイナー(デザイン・コーディング)

現在はコーディング作業はエンジニアに任せており、自身は行なっていませんが、いままでのノウハウとWordPressの進化によりノーコードでもかっこよく機能的なサイト制作が可能な時代です。

本記事においてはサイトの顔の部分となるメインビジュアルの部分にフォーカスし、スライダーとしてかっこよく機能的なサイトにされたい方を対象に記事を書かせていただきました。

ある意味、思考停止で順を追って作業していただければ Smart Slider 3 を用いたスライダーを作れるようにいたしましたので参考にしていただけると幸いです。

それでは行きましょう!

スライダーを作ってみよう

左側のメニューより「Smart Slider」→「ダッシュボード」をクリック
【GO TO DASHBOADボタン】をクリック
全て英語ですが、表示されている動画では使い方の概要の動画が視聴できます。
NEW PROJECT をクリック
Create a New Project をクリック
あさか

ちなみに右側のStart with a Template ではテンプレートの中から好きなものを選ぶことができますが、全て英語ですし初めての方には逆に分かりづらいかもしれません(はじめてSmart Slider 3を使い、編集を試みたの際に私は逆に分かりづらいと感じました)

任意のものを選び、設定を行い、【作成ボタン】を押す
あさか

今回は予め作成したサンプルのスライダーを実現させるための設定となっています。まっさらな状態から、今回の記事を参考にスライダーを作り終える頃には慣れていると思いますので、自分が表現させるための設定を行なってみてください。

スライドを追加をクリック
あさか

今回サンプルで使用した素材はpixabayというサイトのフリー素材を使いました。以下の画像をクリックするとダウンロードページに飛びますので、練習のため同じスライダーを作ってみたい方はご活用ください。

↑の画像をダウンロードする
↑の画像をダウンロードする
↑の画像をダウンロードする
画像をクリック
任意の画像をアップロード、もしくはメディアライブラリから選んで【選択】をクリック
画像を選択すると上記のような画面になりますので、続けて2枚目の画像を選択するため【画像】をクリックし、任意の画像をアップロード、もしくはメディアライブラリより選んでください。
2枚目の画像を選ぶと上記のようになると思います。続けて3枚目の画像をアップロード、もしくはメディアライブラリより選んでください。
3枚目の画像を選び上記のような画面になりましたでしょうか?

実際のページでスライダーを確認してみよう

投稿もしくは固定ページで新規にページを作り、先ほど作成したスライダーを実際に表示させてみましょう。

新規ページから【+】を押してプロックを追加。検索ウィンドウにsmと打てば、Smart Slider 3 のアイコンが出てくると思いますのでクリック
Select Slider をクリック
先ほど作成したスライダーを選んでクリック
あさか

たったこれだけでページへ追加することができます。ちなみにショートコードやPHPなどでも追加することができますので、やりやすい方法を取ればOKです。

ここまでの手順をサンプルとして公開しました!

あさか

サンプルを見て「あれ?」「左右の矢印を押せばスライドするけど・・」と思った方も多いのではないでしょうか?

現在は自動再生などの設定を行なっていないため手動でスライドさせる必要があります。次のステップで設定について解説していきますね

再びSmart Slider 3のダッシュボード画面に行き、先ほど作成したプロジェクトを選択し、横並びのメニューより【自動再生】をクリックしてください。(下記画面参照)

今回は自動再生させたいので自動再生の切り替えをONにし、スライドが切り替わる速度を5000MSに設定
ちなみに1MSは1秒の1000分の1秒という意味らしいです

自動再生をONにし、5秒ごとにスライドする様に設定したサンプル

テキストやボタンを設置してみよう

Smart Slider 3のダッシュボード画面に行きプロジェクトを選択。テキストやボタンを追加したい画像を選んでください。
上記のような編集画面になります。
あさか

はじめてこの見慣れない画面を目にすると「うわ・・」と思う方もいるかもしれません(私はそのタイプです(笑)

ですが、実際はかなりシンプルにまとまっており、直感的に操作できますのですぐに慣れますのでご心配なく!

テキストを入れる

サイトのメインビジュアルですからキャッチコピーやサブコピーといった文字情報は入れることが多いですよね?

そういった時は左側のメニューから「見出し」or「テキスト」を選択

左側のメニューから「見出し」or「テキスト」を選択

キャッチコピーを「見出し」で入れてみます

見出しを選択し、テキスト入力フィールドに任意のテキストを打ち込んでください
タブメニューより【スタイル】を選択し、装飾を施していきます
あさか

参考までにサンプルでは下記のようにスタイルを適用しました!

ファミリーnoto sans JP
Size36PX
フォントの太さ700-太い
背景色変更
パディング上10 右0 下10 左0
をクリックすると上下左右がの数値が変更できます。

ボタンを入れる

ボタンを追加して、追加したボタンに対し装飾を施していきます
あさか

サンプルのボタンはマウスを乗せた際に色が変わるよう「ホバー」を設定しました。

ホバーの設定方法は下記の「通常」となっている部分をプルダウンで「ホバー」を選択することで設定が可能になります。

さいごに

Smart Slider 3 はノーコードでかなりいけてるスライダーが作れてしまうプラグインです。

元々私はデザインからコーディングまで行なっていたので、ノーコードでここまでできてしまうSmart Slider 3 はめちゃめちゃ便利で凄いプラグインだと痛感しています。

私たちはフルオーダーでこういったメインビジュアルをお作りさせていただくこともございますが、通常であれば、企画(見せ方や動き等)→デザイン→HTML・CSSコーディング→JavaScript実装といった工程を踏むため、それなりの工数が発生しますので、工数に応じた料金がかかります。

ですが、Smart Slider 3 を用いればノーコードでしかも無料で自分でスライダーが作れてしまいます。

ぜひ基本的な操作を覚え、かっこよく美しいスライダーを作成してみてください。

この記事を書いた人

浅賀理生(あさかまさお)

株式会社インスパイアデザイン代表。釣りとコーヒーをこよなく愛する家族LOVEな二児のパパ。WordPressを用いたWeb制作&開発のご相談はお気軽にどうぞ