1.「Smart Slider 3」のダウンロード
①左のメニューバーから「プラグイン」→「新規追加」をクリック
②プラグイン検索で「Smart Slider 3」と入力し「ENTER」
③「Smart Slider 3」というプラグインが表示されるので、「今すぐインストール」をクリック
しばらくすると有効化ボタンに変化します。
④「有効化」ボタンをクリック
これで、「Smart Slider 3」のダウンロードとインストールが終了です。
左メニューバーに「Smart Slider 3」という項目が追加されます。
2.Smart Slider 3の設定
①左のメニューバー「Smart Slider 3」→「Dashboard」をクリック
Smart Slider 3の設定画面に移行します。
②「GO TO DASHBOARD」をクリック
③「NEW PROJECT」をクリック
「What do you want to create today?」という表示がでる。
④新規で作成するのか、テンプレートから選び作成するのかを選ぶ
※「Create a New Project」＝新規作成（1から作る事）
※「Start with a Template」=テンプレートから選んで作成ができる
[btn href=”#newsm” class=”flat2″ yoko]Create a New Projectを選択の場合[/btn][btn href=”#startsm” class=”flat2″ yoko]Start with a Templateを選択の場合[/btn]
3.「Create a New Project」を選択した場合
①「Create a New Project」の設定説明
（1）Project Type：Slider（スライダー）かBlock（ブロック）を選択できます
（2）Slider Type：Simple(シンプル)のみ選択が可能です
※有料版（Pro）の場合、他も選択可能です。
（3）Settings：Name（スライダー名）、Width（横幅）、Height（高さ）、Layout（レイアウト）
※レイアウトは「Boxed」「Full width」の二つから選択できます。
「Full page(Pro)」は、有料版のみ選択可能です。
②設定が完了したら、「CREATE」をクリック
My Projectページに移行する。
③画像追加をする（赤い枠の中にある4つのボタンのうち、どれかをクリックして下さい）
※どれをクリックしても一緒です
④「Image」をクリックする
メディアライブラリーが表示されます。
⑤メディアライブラリーから画像を選択する
メディアライブラリーにある場合はクリックし、レ点つけて選択する。
メディアライブラリーにない場合はファイルをアップロードタブをクリックし、ファイル（画像）を選択してください。
⑥「選択」ボタンをクリック
画像を選択し終えたら、忘れずに選択ボタンをクリックしてください。
選択ボタンをクリックすると、以下のように画像が追加されます。
画像の追加が終了したら、スライダーの設定をしていきます。
以下のボタンをクリックして下さい。
[btn href=”#smartsl” class=”flat6″]スライダーの設定説明（共通）[/btn]
4.「Start with a Template」を選択した場合
①「Start with a Template」を選択
以下の画面が表示されます。
FREEと書いたリボンがされたもののみ選択が可能です。
FREEという表示がないものは有料版です。
②テンプレートを選択する「IMPORT」ボタンをクリック
使いたいテンプレートにマウスオーバーをすると「IMPORT」と表示が出ます。
※IMPORTボタン以外をクリックすると、テンプレートのデモページを確認できます。
IMPORTボタンをクリックすると以下の画面が表示されます。
（テンプレートがFree MarketPlaceの場合）
写真や言葉などデフォルトで入力されています。
5.スライダーの設定説明（共通）
赤枠で囲んだタブの説明をしていきます。
①Generalの設定
（1）Publish
・作成したスライダーを表示させるショートコードまたはPHPコード
※固定ページ、投稿ページ、ウィジェットから追加する場合はショートコードで、ファイルに追加する場合はPHPのコードをコピーして貼り付ける。
（2）Genral
・Name：スライダーの名前設定
・Thumnail：サムネイルの画面の設定
・ARIA Label：ARIAラベルの名前設定
（3）Alias
・div要素にid名をつける
（4）Slider Design
・Align：配置
・Margin：余白の設定
②Sizeの設定
（1）Slider Size
Width：スライダーの横幅
Height：スライダーの縦幅
Limit Slide Width：デバイスごとの横幅設定
（2）Breakpoints
・ブレイクポイントの変更設定
（3）Layout
・ボックス表示するかフルサイズ表示するかの選択
③Controlsの設定
（1）General
・Drag：Hoizontal,Disabled,Verticlaから選択できる
・Mouse Whell：ON/OFFが選択できる
・Keyboard：ON/OFFが選択できる
（2）Arrow
・スライダーに表示される矢印のデザインを選択できる
・色や位置の設定
等の設定ができます。
（3）Bullet
※デフォルトはオフになっています。
・ページネーションの表示と位置、色の変更設定
・ページネーションにマウスオーバーした際にサムネイルの画像を表示させるかの設定
・ページネーションをマウスオーバーした際に表示させるかの設定
（4）Text Bar
※デフォルトはオフになっています。
・文字を表示させるかどうか、デザイン選択
・Position：文字表示の位置
・Slide Count：スライド画像のカウント表示設定
・Shows On Hover：マウスオーバーした時の表示設定
（5）Thumbnails
※デフォルトはオフになっています。
・サムネイルのサイズ
・サムネイルの表示位置
・サムネイルのテキスト表示
・サムネイルが縦の配置のときに何個表示させる高さにするか
・マウスオーバーした際にサムネイルを表示させるかどうか
（6）Shadow
※デフォルトはオフになっています。
・Shadow：スライダーの下に影をつけるかの設定
※ONにすると、影の種類を選択できます。
・Hide On：表示しない端末の選択設定
③Animations
（1）Main Animation
・Main Animation：アニメーションのパターンを選択
・Duration：秒数指定
（2）Background Animation
・Background Animation：アニメーションの背景設定
④Autoplay
（1）Autoplay
※デフォルトはオフになっています。
・Autoplay：自動的にスライドが切り替わるかの設定
・Slide Duration：スライドが切り替わる秒数設定
・Stop On Click：クリックしたらスライドが止まるかの設定
・Resume On Click：クリックしたら自動的にスライドが再開するかの設定
（2）Button
※デフォルトはオフになっています。
・Button：停止か再開かを選択できる設定
・Play：プレイマークのイメージ変更
・Color：プレイマークの色設定
・Style：プレイマークの高度な設定
・Position：ボタンを配置している位置設定
・Shows On Hover：マウスオーバーした際にボタンを表示させるかの設定
・Hide On：表示しない端末の選択設定
⑤Optimize
※デフォルトはオフになっています。
（１）Optimize Slide Images
・Quality：品質の調整（％）
・Thumbnail Width：サムネイルの横幅設定
・Thumbnail Height：サムネイルの縦幅設定
・Resize Background：背景のサイズ変更
⑥Loading
（1）Loading
・Loading Type：画像のロードタイプの選択設定
・Play When Visible：表示された時に再生するかどうかの設定
・Delayed：遅延の設定
⑦Slides
（1）Slides Design
・Slide Background Image Fill：スライド背景の選択設定
⑧Developer
⑨設定を変更したら「SAVE」ボタンをクリック
6.Smart Slider 3を表示する
①GeneralタブのPublish
・作成したスライダーを表示させるショートコードまたはPHPコード
※固定ページ、投稿ページ、ウィジェットから追加する場合はショートコードで、ファイルに追加する場合はPHPのコードをコピーして貼り付ける。
②固定ページ、投稿ページの場合
（1）ブロックの追加⊕をクリックし、ウィジェット項目にある「ショートコード」をクリック
（2）先ほどコピーしたショートコードを貼り付ける
（3）右上にある「プレビュー」をクリックし表示の確認
下のように表示されます。
7.Smart Slider 3のまとめ
無料プランでも十分すぎる機能をもったプラグインです。
色んな形にデザインできるので、使ってて楽しいスライダーです。
ぜひ使ってみて下さい。
[myspeech src=”https://wordpress.oita.fun/wp-content/uploads/2020/09/turu.png” name=”ツル”]wordpressのスライダーと言えば、「Smart Slider 3」というほど、凄く使っている方が多いプラグインです。[/myspeech]
コメント