人気の記事
【Diver図解マニュアル】Smart Slider 3 の設定詳細

ブログに流入したファーストビューは重要です!
企業ホームページの多くはファーストビューでスライダーを活用していることが多いです。
ブログでもこのスライダーを使うことが出来ます。

ひろにゃん
スライダーの設置って複雑じゃない?

ともにゃん
Diverならプラグインを使って簡単に作成できるよ!

Smart Slider 3というプラグインを使用しますが、全て英語で設定がわからない人も多いと思います。
この記事でしっかり解説します。

Smart Slider 3 基本の操作方法


まずは プラグイン→新規追加 から Smart Slider 3をインストールして有効化します。
プラグインのインストール・有効化について操作方法がわからない場合はこちらの記事を参考にしてください。

インストール・有効化したら、ワードプレスのメニュー下に追加されます。
ここからDashboardをクリックします。

DashboardのNEW PROJECTをクリックします。

Create a New Project をクリックします。
右のテンプレートで開始もありますが、今回は左の赤枠をクリックして進めましょう。

このような画面となりますので、Nameだけわかりやすいものに変更してCREATEをクリックします。

下記の画面でスライドさせたい記事や画像を追加していきます。まずは赤枠で囲んだ部分をクリックします。

Image、Blank、Post・・とありますが、ここではPostをクリックしましょう。
Postは投稿記事のことです。Imageは画像で、Blankは空白を追加し自身で細かく設定が可能です。

Postをクリックすると記事一覧が出てきます。ここからスライダーで流したい記事を選びます。
選んだらADD POSTをクリックしましょう。

何度か繰り返し、このように記事を追加しました。右下にあるのマークはプレビューが表示できます。
問題なければSAVEをクリックして保存します。

これから行うどの作業でも必ずSAVEボタンで保存をしてください!

保存したら、画面の下の方にショートコードが表示されます。
をコピーします。

一度ワードプレスのトップ画面に戻ります。
Diverオプション→ファーストビュー に進んでください。

背景設定がありますので、ファーストビューでカスタムを選択すると編集画面が出てきます。
入力モードでテキストを選び、先ほどコピーしたショートコードを貼り付けます。
最後に変更を保存をクリックしましょう。

サイトを見てみましょう。このようにスライダーが設定されます!

基本の操作はこちらで完了ですが、文字の位置やサイズ感などもっと細かく調節したいですよね!
カスタマイズ方法について紹介します!

スポンサーリンク

オリジナリティを出す!カスタマイズ方法

先ほど作成したスライダーをカスタマイズしていきましょう!
再度Dashboardに進みます。

一覧画面より先ほど作成したスライダーを選択します!
ここでNEW PROJECTを選ぶとショートコードを新しいものにしなければならないので注意してください。

設定したスライド一覧が出てきますので、マウスを持っていきEDITをクリックします。編集画面になります。

ボタンの位置を動かす設定方法

ボタンの位置を変えてみます。
マウスをボタン付近にもっていくとLAYERと表示されるのでクリックします。
右にButtonの設定画面が表示されます。

設定の3つのタブから真ん中のSTYLEをクリックし、下にスクロールします。
POSITIONが現在はDefaultになっています。このまま右や左に位置を変えたい時はAlignで選ぶと移動できます。

もっと自由に動かしたい場合はPOSITIONをAbsoluteにします。
するとボタンがLAYERと紫で表示されマウスで動かせるようになります。

このように好きな位置に動かしてください。
ボタンだけでなくタイトルやメタディスクリプションも同様に移動することが出来ます!

背景色の変更

背景色はデフォルトで黒になっていますが、色を変えたりグラデーションをかけることが出来ます。
このような設定が可能です。

まずはボタンの設定した画面の赤枠で囲っている部分をクリックし、Slideを選択します。

StyleからColorを変えると色の設定が変更できます。
また、Gradientを変更するとグラデーションの設定が可能です。


下記のようになります。

画像を選び設定する方法

スライドを追加する際にPostでは記事のサムネイルが表示されますが、別の画像にしたい場合の設定方法です。
画像は商用利用フリーの素材サイトやご自身で撮影したものを使いましょう!

商用利用フリーの素材サイト

Dashboardのスライド追加でImageを選び編集していきます。


追加した画像にマウスを持っていくとEDITが表示されるのでクリックして編集します。
まだ画像しかない状態なので、下記のアイコンよりタイトルやボタンを追加していきます。

これまでに説明した背景色の変更やボタンの位置調節などを行うとこのようになります。

Postから画像だけ変更する方法

Postで設定したスライドをEDITで編集します。
下記の左上にある部分をクリックしSlideを選びます。

下記赤枠の×をクリックすると画像が消えます。次にプラスをクリックし画像を選択します。

画像が変わったけど色が暗いという場合はOpacityの数値を上げます。
Colorも変更が可能です。

ボタンのサイズや文字の大きさなども変更すると下記のようになりました!

スライドスピードや自動スライドの設定

スライダーを自動で動かしたい場合には設定をする必要があります。
DashboardよりAutoplayを選択します。
Slide Durationでスライドを何秒で変えるのか設定できます。1000=1秒になります!
個人的には3500がオススメです。


スライドさせるスピードも設定が可能です。Animationsより行います。
Durationの数値を増やすとゆっくりスライドし、減らすと早くスライドします。
私は800=0.8秒の設定にしています。
Main Animationでは横のスライドから縦のスライドやフェードに変更ができます。
こちらはHorizontalが横のスライドになり、最も自然だと思いますので私は変更していません。

矢印の形も変更ができます。Controlsから書きの部分で選択可能です。色なども細かく調節が可能です。

最終的にこのようなものが作れました


実際にPCで見ると大きすぎる場合にはSizeのHeightを調節します。初期設定のままだと600になっているので、私は400にしています。

スマホでの表示が上手くいかない場合の対処法

PCでの作業がメインになるとスマホでの確認がおろそかになりがちです。
しかし、ユーザーのほとんどがスマホでの訪問なので、必ず確認してください!

スマホ表示でボタンからテキストがはみ出る対処法

スマホ表示で最終確認をしていたらボタンの文字がはみ出る現象が起こりました。

PositionをAbsoluteにしていたスライドで不具合が起こりました。
Defaultに戻すと私の場合は解消されました!

スマホ表示だと大きすぎる場合の対処法

PCではちょうどいい大きさでもスマホだと大きすぎることがあります!
このままではダメなので修正します。

タイトルが大きすぎるのでスマホなど他の端末で見た場合に文字が小さくなるよう設定します。
設定画面の右上にスマホ・タブレット・PCでの見え方が選べる部分があります。
ここで一番左のスマホをクリックします。

スマホ表示ではタイトルが大きすぎる、という場合にはRESPONSIVEのText Scaleで100%から数字を減らしていきます。
このブログでは60%にしています。

最終的にこのように表示されるようになりました!

タイトル下のテキストについても同様に設定するとスマホ表示でキレイに見えるようになります!

まとめ

慣れるまでは設定に苦労する点があるかもしれません。
しかし、ファーストビューでスライダーがかっこよければ、一気にプロっぽいサイトになり読者の離脱率を下げれます!
頑張って設定して本格的なサイト作りをしていきましょう!

スポンサーリンク
初心者でも上級者でも満足できるWordpressテーマ「Diver」

このブログのテーマは「Diver」です。これからブログを始める人は間違いなく長く愛用できるテーマです!他のテーマから変更をしたい中級者の方にも満足頂けるでしょう。私も別のテーマから移行しました。実際に使ってみると実感できると思いますが、デザインやレイアウトに関する悩みはなくなりました。操作性も抜群でもう他のテーマに変更は出来ません!

おすすめの記事