はじめに
こんなスライダー(メインビジュアル)を作ることができます!
Smart Slider 3 を使うことで、ノンデザイナーでもノーコードで、メインビジュアル等に使用する素晴らしいスライダーを作成することが可能となります。
しかしプラグインをインストールし管理画面にアクセスしてみると・・なんだかめんどくさそう・・
そんな方を対象に超初心者でもステップに従い操作していただければ、下記のようなスライダーを作成できるよう記事を書きました。
この記事を書く人
![](https://inspire-design.net/blog/wp-content/uploads/2020/10/oomiyak_002-1-150x150.jpg)
株式会社インスパイアデザイン代表(WordPressを用いたWeb制作やシステム開発を行なっている会社です。)
元Webデザイナー(デザイン・コーディング)
現在はコーディング作業はエンジニアに任せており、自身は行なっていませんが、いままでのノウハウとWordPressの進化によりノーコードでもかっこよく機能的なサイト制作が可能な時代です。
本記事においてはサイトの顔の部分となるメインビジュアルの部分にフォーカスし、スライダーとしてかっこよく機能的なサイトにされたい方を対象に記事を書かせていただきました。
ある意味、思考停止で順を追って作業していただければ Smart Slider 3 を用いたスライダーを作れるようにいたしましたので参考にしていただけると幸いです。
それでは行きましょう!
スライダーを作ってみよう
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/smt01-1024x561.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/smt02-2-1024x568.png)
全て英語ですが、表示されている動画では使い方の概要の動画が視聴できます。
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/smt03-2-1024x616.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/smt04-2-1024x615.png)
![](https://inspire-design.net/blog/wp-content/uploads/2020/10/oomiyak_002-1-150x150.jpg)
ちなみに右側のStart with a Template ではテンプレートの中から好きなものを選ぶことができますが、全て英語ですし初めての方には逆に分かりづらいかもしれません(はじめてSmart Slider 3を使い、編集を試みたの際に私は逆に分かりづらいと感じました)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/smt05-2-1024x616.png)
![](https://inspire-design.net/blog/wp-content/uploads/2020/10/oomiyak_002-1-150x150.jpg)
今回は予め作成したサンプルのスライダーを実現させるための設定となっています。まっさらな状態から、今回の記事を参考にスライダーを作り終える頃には慣れていると思いますので、自分が表現させるための設定を行なってみてください。
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/smt06-2-1024x606.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/smt07-2-1024x467.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/smt08-2-1024x539.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/fdsafads-1024x371.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/9weqi-1024x370.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/7hfadsj-1024x371.png)
実際のページでスライダーを確認してみよう
投稿もしくは固定ページで新規にページを作り、先ほど作成したスライダーを実際に表示させてみましょう。
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/fdsaih01-2.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/erwakh02.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/fasdoh03-2.png)
![](https://inspire-design.net/blog/wp-content/uploads/2020/10/oomiyak_002-1-150x150.jpg)
たったこれだけでページへ追加することができます。ちなみにショートコードやPHPなどでも追加することができますので、やりやすい方法を取ればOKです。
ここまでの手順をサンプルとして公開しました!
![](https://inspire-design.net/blog/wp-content/uploads/2020/10/oomiyak_002-1-150x150.jpg)
サンプルを見て「あれ?」「左右の矢印を押せばスライドするけど・・」と思った方も多いのではないでしょうか?
現在は自動再生などの設定を行なっていないため手動でスライドさせる必要があります。次のステップで設定について解説していきますね
再びSmart Slider 3のダッシュボード画面に行き、先ほど作成したプロジェクトを選択し、横並びのメニューより【自動再生】をクリックしてください。(下記画面参照)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/09iufdas-1-1024x630.png)
ちなみに1MSは1秒の1000分の1秒という意味らしいです
自動再生をONにし、5秒ごとにスライドする様に設定したサンプル
テキストやボタンを設置してみよう
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/34w59sfdgj-2-1024x245.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/rtewqaw-1024x573.png)
![](https://inspire-design.net/blog/wp-content/uploads/2020/10/oomiyak_002-1-150x150.jpg)
はじめてこの見慣れない画面を目にすると「うわ・・」と思う方もいるかもしれません(私はそのタイプです(笑)
ですが、実際はかなりシンプルにまとまっており、直感的に操作できますのですぐに慣れますのでご心配なく!
テキストを入れる
サイトのメインビジュアルですからキャッチコピーやサブコピーといった文字情報は入れることが多いですよね?
そういった時は左側のメニューから「見出し」or「テキスト」を選択
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/rtewqaw-2-1024x573.png)
キャッチコピーを「見出し」で入れてみます
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/sdfaoiu-2-1024x572.png)
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/fdsafds5-2-1024x527.png)
![](https://inspire-design.net/blog/wp-content/uploads/2020/10/oomiyak_002-1-150x150.jpg)
参考までにサンプルでは下記のようにスタイルを適用しました!
ファミリー | noto sans JP |
Size | 36PX |
フォントの太さ | 700-太い |
背景色 | 変更 |
パディング | 上10 右0 下10 左0![]() |
ボタンを入れる
![](https://inspire-design.net/blog/wp-content/uploads/2022/02/8fasdji-1024x574.png)
![](https://inspire-design.net/blog/wp-content/uploads/2020/10/oomiyak_002-1-150x150.jpg)
サンプルのボタンはマウスを乗せた際に色が変わるよう「ホバー」を設定しました。
さいごに
Smart Slider 3 はノーコードでかなりいけてるスライダーが作れてしまうプラグインです。
元々私はデザインからコーディングまで行なっていたので、ノーコードでここまでできてしまうSmart Slider 3 はめちゃめちゃ便利で凄いプラグインだと痛感しています。
私たちはフルオーダーでこういったメインビジュアルをお作りさせていただくこともございますが、通常であれば、企画(見せ方や動き等)→デザイン→HTML・CSSコーディング→JavaScript実装といった工程を踏むため、それなりの工数が発生しますので、工数に応じた料金がかかります。
ですが、Smart Slider 3 を用いればノーコードでしかも無料で自分でスライダーが作れてしまいます。
ぜひ基本的な操作を覚え、かっこよく美しいスライダーを作成してみてください。