Smart Slider 3の使い方

Smart Slider 3 Wordpressプラグイン
スポンサーリンク

1.「Smart Slider 3」のダウンロード

①左のメニューバーから「プラグイン」→「新規追加」をクリック

Smart Slider 3

②プラグイン検索で「Smart Slider 3」と入力し「ENTER」

Smart Slider 3

③「Smart Slider 3」というプラグインが表示されるので、「今すぐインストール」をクリック

Smart Slider 3

しばらくすると有効化ボタンに変化します。

④「有効化」ボタンをクリック

Smart Slider 3

これで、「Smart Slider 3」のダウンロードとインストールが終了です。

左メニューバーに「Smart Slider 3」という項目が追加されます。

2.Smart Slider 3の設定

①左のメニューバー「Smart Slider 3」→「Dashboard」をクリック

Smart Slider 3

Smart Slider 3の設定画面に移行します。

②「GO TO DASHBOARD」をクリック

Smart Slider 3

③「NEW PROJECT」をクリック

Smart Slider 3

「What do you want to create today?」という表示がでる。

④新規で作成するのか、テンプレートから選び作成するのかを選ぶ

Smart Slider 3

※「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」を選択した場合

Smart Slider 3

①「Create a New Project」の設定説明

Smart Slider 3

(1)Project Type:Slider(スライダー)かBlock(ブロック)を選択できます

(2)Slider Type:Simple(シンプル)のみ選択が可能です

※有料版(Pro)の場合、他も選択可能です。

(3)Settings:Name(スライダー名)、Width(横幅)、Height(高さ)、Layout(レイアウト)

※レイアウトは「Boxed」「Full width」の二つから選択できます。

「Full page(Pro)」は、有料版のみ選択可能です。

Smart Slider 3

②設定が完了したら、「CREATE」をクリック

Smart Slider 3

My Projectページに移行する。

③画像追加をする(赤い枠の中にある4つのボタンのうち、どれかをクリックして下さい)

Smart Slider 3

※どれをクリックしても一緒です

④「Image」をクリックする

Smart Slider 3

メディアライブラリーが表示されます。

⑤メディアライブラリーから画像を選択する

Smart Slider 3

メディアライブラリーにある場合はクリックし、レ点つけて選択する。

メディアライブラリーにない場合はファイルをアップロードタブをクリックし、ファイル(画像)を選択してください。

⑥「選択」ボタンをクリック

Smart Slider 3

画像を選択し終えたら、忘れずに選択ボタンをクリックしてください。

選択ボタンをクリックすると、以下のように画像が追加されます。

Smart Slider 3

画像の追加が終了したら、スライダーの設定をしていきます。

以下のボタンをクリックして下さい。

[btn href=”#smartsl” class=”flat6″]スライダーの設定説明(共通)[/btn]

4.「Start with a Template」を選択した場合

①「Start with a Template」を選択

Smart Slider 3

以下の画面が表示されます。

FREEと書いたリボンがされたもののみ選択が可能です。

FREEという表示がないものは有料版です。

Smart Slider 3

②テンプレートを選択する「IMPORT」ボタンをクリック

使いたいテンプレートにマウスオーバーをすると「IMPORT」と表示が出ます。

※IMPORTボタン以外をクリックすると、テンプレートのデモページを確認できます。

Smart Slider 3

IMPORTボタンをクリックすると以下の画面が表示されます。

(テンプレートがFree MarketPlaceの場合)

Smart Slider 3

写真や言葉などデフォルトで入力されています。

5.スライダーの設定説明(共通)

赤枠で囲んだタブの説明をしていきます。

Smart Slider 3

①Generalの設定

(1)Publish

Smart Slider 3

・作成したスライダーを表示させるショートコードまたはPHPコード

※固定ページ、投稿ページ、ウィジェットから追加する場合はショートコードで、ファイルに追加する場合はPHPのコードをコピーして貼り付ける。

(2)Genral

Smart Slider 3

・Name:スライダーの名前設定

・Thumnail:サムネイルの画面の設定

・ARIA Label:ARIAラベルの名前設定

(3)Alias

・div要素にid名をつける

(4)Slider Design

・Align:配置

・Margin:余白の設定

Smart Slider 3

②Sizeの設定

(1)Slider Size

Smart Slider 3

Width:スライダーの横幅

Height:スライダーの縦幅

Limit Slide Width:デバイスごとの横幅設定

(2)Breakpoints

Smart Slider 3

・ブレイクポイントの変更設定

(3)Layout

Smart Slider 3

・ボックス表示するかフルサイズ表示するかの選択

③Controlsの設定

(1)General

Smart Slider 3

・Drag:Hoizontal,Disabled,Verticlaから選択できる

・Mouse Whell:ON/OFFが選択できる

・Keyboard:ON/OFFが選択できる

(2)Arrow

Smart Slider 3

・スライダーに表示される矢印のデザインを選択できる

・色や位置の設定

等の設定ができます。

(3)Bullet

※デフォルトはオフになっています。

Smart Slider 3

・ページネーションの表示と位置、色の変更設定

・ページネーションにマウスオーバーした際にサムネイルの画像を表示させるかの設定

・ページネーションをマウスオーバーした際に表示させるかの設定

(4)Text Bar

※デフォルトはオフになっています。

Smart Slider 3

・文字を表示させるかどうか、デザイン選択

・Position:文字表示の位置

・Slide Count:スライド画像のカウント表示設定

・Shows On Hover:マウスオーバーした時の表示設定

(5)Thumbnails

※デフォルトはオフになっています。

Smart Slider 3

・サムネイルのサイズ

・サムネイルの表示位置

・サムネイルのテキスト表示

・サムネイルが縦の配置のときに何個表示させる高さにするか

・マウスオーバーした際にサムネイルを表示させるかどうか

(6)Shadow

※デフォルトはオフになっています。

Smart Slider 3

・Shadow:スライダーの下に影をつけるかの設定

※ONにすると、影の種類を選択できます。

・Hide On:表示しない端末の選択設定

③Animations

(1)Main Animation

Smart Slider 3

・Main Animation:アニメーションのパターンを選択

・Duration:秒数指定

(2)Background Animation

Smart Slider 3

・Background Animation:アニメーションの背景設定

④Autoplay

(1)Autoplay

※デフォルトはオフになっています。

Smart Slider 3

・Autoplay:自動的にスライドが切り替わるかの設定

・Slide Duration:スライドが切り替わる秒数設定

・Stop On Click:クリックしたらスライドが止まるかの設定

・Resume On Click:クリックしたら自動的にスライドが再開するかの設定

(2)Button

※デフォルトはオフになっています。

Smart Slider 3

・Button:停止か再開かを選択できる設定

・Play:プレイマークのイメージ変更

・Color:プレイマークの色設定

・Style:プレイマークの高度な設定

・Position:ボタンを配置している位置設定

・Shows On Hover:マウスオーバーした際にボタンを表示させるかの設定

・Hide On:表示しない端末の選択設定

⑤Optimize

※デフォルトはオフになっています。

(1)Optimize Slide Images

Smart Slider 3

・Quality:品質の調整(%)

・Thumbnail Width:サムネイルの横幅設定

・Thumbnail Height:サムネイルの縦幅設定

・Resize Background:背景のサイズ変更

⑥Loading

(1)Loading

Smart Slider 3

・Loading Type:画像のロードタイプの選択設定

・Play When Visible:表示された時に再生するかどうかの設定

・Delayed:遅延の設定

⑦Slides

(1)Slides Design

Smart Slider 3

・Slide Background Image Fill:スライド背景の選択設定

⑧Developer

Smart Slider 3

⑨設定を変更したら「SAVE」ボタンをクリック

Smart Slider 3

6.Smart Slider 3を表示する

①GeneralタブのPublish

Smart Slider 3

・作成したスライダーを表示させるショートコードまたはPHPコード

※固定ページ、投稿ページ、ウィジェットから追加する場合はショートコードで、ファイルに追加する場合はPHPのコードをコピーして貼り付ける。

②固定ページ、投稿ページの場合

(1)ブロックの追加⊕をクリックし、ウィジェット項目にある「ショートコード」をクリック

Smart Slider 3

(2)先ほどコピーしたショートコードを貼り付ける

Smart Slider 3

(3)右上にある「プレビュー」をクリックし表示の確認

Smart Slider 3

下のように表示されます。

Smart Slider 3

7.Smart Slider 3のまとめ

無料プランでも十分すぎる機能をもったプラグインです。

色んな形にデザインできるので、使ってて楽しいスライダーです。

ぜひ使ってみて下さい。

[myspeech src=”https://wordpress.oita.fun/wp-content/uploads/2020/09/turu.png” name=”ツル”]wordpressのスライダーと言えば、「Smart Slider 3」というほど、凄く使っている方が多いプラグインです。[/myspeech]

コメント

タイトルとURLをコピーしました