【Smart Slider 3】スライダー設定③ 操作(Controls)【WordPress】

Smart Sliderの『セッティング:操作』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。

また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。

本記事は、パソコンの画面から見ていただくことを推奨します。

スポンサーリンク

スライダー設定 (操作)

スライダー設定の『操作』について解説していきます。

一般設定

『一般設定』では『スライドの切り替え』に関する操作設定を行います。

Drag

マウス (タッチ) のドラッグでのスライドを切り替えを有効にします。デフォルトで『水平方向』が選択されています。

縦スライダーの場合は『垂直方向』を選択します。操作性の観点から基本『無効』にはしない方がよいでしょう。

Mouse Wheel

マウスホイールでのスライド切り替えを有効にするかどうか選べます。デフォルトで『無効』になっています。

実質的には、あまり操作性が良くないようで、使用するマウスによって挙動が異なるとのことなので、基本『無効』のままにしておくのがよいでしょう。

キーボード

『キーボード』がオンになっていれば『矢印キー』でスライドの切り替えができます。

横スライダーの場合は『左右の矢印キー』、縦スライダーであれば『上下の矢印キー』で操作可能です。

矢印 (Arrow)

『矢印』とは、スライドの切り替えに使う『矢印ボタン』のことです。もし『矢印ボタン』を表示したくない時は、以下のようにスイッチをオフにしておけば表示されません。

『矢印ボタン』を表示する場合はスイッチをオンにします。設定項目が多めですが順番に見ていきましょう。

矢印のデザイン

矢印のスタイルが何種類か用意されているので、好みのスタイルを選択します。
(ボタンだけのものと、タイトルやサムネイルが一緒に表示されるスタイルがあります。)

Previous』のプルダウンから「戻るボタン」のデザインを変更できます
(オリジナル画像も設定可)。

ホバー』をオンにすると、カーソルを合わせた時の矢印のカラーを変更できます。
ミラー』がオンになっていると、戻るボタン進むボタンのデザインは同系統となります。

ミラー』をオフにすると、進むボタンのデザインを個別に変更できます。

矢印『スタイル』

矢印』のスタイルをクリックすると、スタイル管理画面が開き、矢印のデザインを細かく設定することが出来ます。

ボタンの『背景色』『不透明度』『内側の余白』『枠線』『丸み』などを、自由にカスタマイズ出来ます。『プレビュー』に変更が反映するので、いろいろ試してみてください。

ボックスの影』に入力する4つの数値は、以下の順番で設定します。

x方向 (左右)』、『y方向 (上下)』、『blur (ぼかし)』、『spread (広がり)』

たとえば以下のような感じです。ボタンに薄く影が付きましたね。

x方向:3px』、『y方向:3px』、『blur:5px』、『spread:-2px』

矢印ボタンをさらに細かくカスタマイズする場合は『CSS』の欄に、直接コードを記述することもできます。(CSSの基礎理解が必要です)

『前の位置』『次の位置』

プルダウンを開いて、矢印ボタンの位置を調整することができます。
(*スタックとは、重なり順のことです。同じ位置に別のボタンやテキストなどが重なる配置だった場合に数値を変更して重なり順を調整します。)

高度』をオンにすると設定方法が変わり、『スライダーの左端から○px』『スライダーの上端から○px』という風に、ボタンの位置を具体的に数値で指定することが出来ます。

アニメーション』では、矢印ボタンにカーソルを重ねたときの動きを指定できます。

Alt Tag』は、その画像が何を表しているかを説明するためのものです。

ここは、英字のままでもいいと思いますが、『前へボタン』『次へボタン』などと日本語に変えておいても良いでしょう。(Webページ上には表示されません。)

矢印の画像は『Base64』でエンコードされており、データの軽量化カラーの変更が可能になっています。しかし、場合によっては最適化プラグインなどの影響で、矢印が表示されないケースがあるとのことで、その場合は『Base64』をオフにします。

Base64』をオフにすると、矢印のカラー変更ができなくなりますので注意しましょう。

Image Width』で、矢印ボタンの大きさを、デバイスごとに設定できます。

ホバー時の表示』をオンにすると、カーソルがスライダー上にきた時だけ、矢印ボタンが表示されます。『Hide On』をオンで、デバイスごとに矢印ボタンを非表示にすることが出来ます。

非表示スライドID』:
たとえば、1枚目3枚目のスライドでは矢印ボタンを非表示にしたいという場合、『非表示スライドID』の欄に『1,3』とカンマで区切って入力します。

こちらは、ご参考までに。
矢印のスタイルで、ボタンだけではないスタイルも用意されています。
こちらはタイトルが一緒に表示されるスタイルです。実際の表示は以下のようになります。

England_01
England_02
England_03

こちらの場合は、矢印にカーソルを合わせるとサムネイル画像に置き換わるスタイルです。

England_02
England_02
England_03
England_03
England_01
England_01

このスタイルの場合は、サムネイル画像に置き換わる際のアニメーションを選択することが出来ます。

ページコントロール (Bullet)

ページコントロール』は、ボタンでスライドの画像を切替える機能です。このスライドの切替ボタン『Bullet』を表示したくない時は、以下のようにスイッチをオフにしておけば表示されません。

ページコントロール』をオンにした状態です。基本的には前述の『矢印』の設定項目と同じような内容になってます。順番に見ていきましょう。

ボタン(Bullet) の種類を選んで『Position』のプルダウンから位置を調整します。
高度」をオンにすると、ボタンの位置を更に細かく指定できます。

Action』のプルダウンから『Click』か『ホバー』を選択します。

Click』:ボタンをクリックしてスライドを切り替える
ホバー』:ボタンにカーソルを合わせるだけでスライドが切り替わる

』と『バー』の『スタイル』ボタンからスタイル (デザイン) を細かく変更できます。

『点』のスタイル

スタイル』ボタンで、スタイル管理の画面が開きます。ここで『』のデザインを自由にカスタマイズできます。
スタイルを変更したら必ず「適用」ボタンを押し、元の画面に戻って右上の「保存」を押して確定させます。

CSS』の欄に『margin: 4px;』と入ってますが、これは『』の周りの余白です。数値を大きくすれば『点』どうしの距離が広がります。
この記述を消してしまうと『点』どうしが完全にくっついてしまうので注意してください。

『バー』のスタイル

こちらが『バー』のスタイル管理画面。『バー』とは以下に示した『』を囲んでる部分ですね。
ここで、バーのデザインを細かく指定できます。

Bar Full Size』『整列』『Orientation

Bar Full Size』をオンにすると、バーの長さがスライド幅いっぱいに表示されます。
整列」や「Orientation」で配置を調節できます。

ARIA Label』とはアクセシビリティの為の仕様で、スクリーンリーダーの読み上げに使用されます。

例えば「表示するスライドを選択して下さい」のようなテキストを設定しておくことで、このボタンの意味を補完して説明することが出来ます。

画像

画像』をオンにすると、以下のように Bulletボタンにカーソルを合わせた際に、該当スライドのサムネール画像がポップアップします。
画像の大きさ、スタイル、表示位置などを指定できます。

ホバー時の表示』をオンにすると、カーソルを合わせた時だけ、Bulletボタンを表示するようになります。
また『Hide On』にて、デバイスごとに Bulletボタンを全く表示させなくすることも出来ます。
(例:スマホだけ Bulletボタン非表示など。)

非表示スライドID』:
たとえば、1枚目3枚目のスライドではBulletボタンを非表示にしたいという場合、『非表示スライドID』の欄に『1,3』とカンマで区切って入力します。

Text Bar

Text Bar』をオンにすることで、スライド上にタイトル(題名) や、説明文を表示させることが出来ます。

Text Bar のスタイルを選択して『Position』で位置を調整します。『Animate』をオンにすると、スライドを切替えた際に Text Barがゆっくり表示されるようになります。

バー』『タイトル』『説明』の「スタイル」を選択すると、スタイル管理画面が表示されるので、細かく表示設定をすることが出来ます。
スタイルを変更したら必ず「適用」ボタンを押し、元の画面に戻って右上の「保存」を押して確定させます。

Slide Count』をオンにすると、『タイトル説明文』ではなく、『ページ番号/ページ総数』の表示に切替わります。(例:1-3 → 2-3 → 3-3 )

全幅』がオンの状態で、『』のパーセンテージ 100%だと、Text Barはスライダー幅いっぱいの表示になります 。
区切り』では『タイトル- 説明文』の間の区切り文字(-, / など)を指定できます。

ホバー時の表示』をオンにすると、スライドにカーソルを合わせた時だけ Text Barを表示するようになります。

また『Hide On』にて、デバイスごとに Text Barを全く表示させなくすることも出来ます。
(例:スマホだけ Text Bar 非表示など。)

非表示スライドID』:
たとえば、1枚目3枚目のスライドではText Barを非表示にしたいという場合、『非表示スライドID』の欄に『1,3』とカンマで区切って入力します。

サムネイル (Thumbnail)

サムネイル』をオンにすると、スライダーの上下左右の位置に、スライドのサムネ画像を並べて表示させることが出来ます。

Desktop』『Tablet』『Mobile』にて、デバイスごとにサムネ画像のサイズを設定できます。
画像』は通常はオンにしておきますが、タイトルや説明文など、テキストのみ表示したい場合はオフにします。

Position』でサムネイルの表示位置を指定します。
Action』では、サムネイルによるスライドの切替え方法を変更します。

Click』:サムネイルをクリックしてスライドを切り替える
ホバー』:サムネイルにカーソルを合わせるだけでスライドが切り替わる

サムネイルの整列』では、プルダウンから整列の方法を選択できます。

開始』:サムネイルを左寄せ
中央』:サムネイルを中央寄せ
End』:サムネイルを右寄せ
Space-between』:両端揃え(サムネは均等配置)
Space-around』:サムネの両端に均等な余白をつけた上で均等配置

バー』『サムネイル』それぞれの「スタイル」をクリックして、スタイル設定画面を開くと、表示を細かくカスタマイズ出来ます。
スタイルを変更したら必ず「適用」ボタンを押し、元の画面に戻って右上の「保存」を押して確定させましょう。

キャプション』では、テキスト部分 (タイトルや説明文)のレイアウトをカスタマイズします。
タイトル』『説明』は、それぞれオフにすると非表示にすることが出来ます。『フォント』をクリックして、テキストのデザインを指定します。

Placement』では、テキスト部分 (タイトルや説明文)の表示位置を指定します。
Size』で、テキスト部分 (タイトルや説明文)の幅 (あるいは高さ) を指定します。

Before』:サムネイルの上に表示
オーバーレイ』:サムネイルに被せて表示
After』:サムネイルの下に表示

矢印』をオンにすると、サムネイルが一列にたくさん並んでいて、表示しきれないサムネイルがある場合において、先送り用 (戻る用) の矢印を表示させることが出来ます。
Size』『オフセット』で矢印のサイズと位置を指定します。

Prevoius Alt Tag』『Next Alt Tag』では、矢印についての説明書きを設定します。そのままで構いませんが、必要に応じて日本語で「次を見る」などと設定しておいても良いでしょう。

Next Arrow Image』では、オリジナルの矢印画像を指定することが可能です。

Group By』では数字を入力することで、サムネイルを1列だけでなく、2列や3列に変更することが出来ます。

Orientation』ではサムネイルの並び方向 (縦並び、横並び)を指定できます。『自動』のままで問題なければ、そのままで良いでしょう。
Size』ではサムネイルエリア全体の幅を「px or %」で指定できます。

ホバー時の表示』をオンにすると、通常はサムネイルが非表示になっていて、カーソルを合わせた時だけ表示するようになります。

また『Hide On』にて、デバイスごとに サムネイルを表示させなくすることも出来ます。
(例:スマホだけ サムネイル非表示など。)

非表示スライドID』:
スライドの番号 (5枚目なら「5」) を設定することで、そのスライド選択時はサムネイルを非表示にすることが出来ます。複数指定する場合は『5,9』などと数字をカンマで区切って入力します。

影 (Shadow)

』をオンにすると、スライダーエリア全体の下部に、装飾として影を付けることが出来ます。
プルダウンから選択するか、オリジナル画像の影を設定することも出来ます。

また『Hide On』にて、デバイスごとに を全く表示させなくすることも出来ます。
(例:スマホだけ を非表示など。)

非表示スライドID』:
たとえば、1枚目3枚目のスライドではを非表示にしたいという場合、『非表示スライドID』の欄に『1,3』とカンマで区切って入力します。

Fullscreen

Fullscreen』をオンにすると、スライダーに「全画面ボタン」を表示することが出来ます。

To Normal』では、全画面終了ボタンのデザインを選択できます。
ミラー』をオンにしておくと、全画面終了ボタンのデザインと同系統のデザインが全画面開始ボタンにも適用されます。違うデザインを選びたい時は『ミラー』をオフにして設定します。

Fullscreen』のスタイルをクリックすると、全画面ボタンのスタイルを細かく指定できます。
全画面ボタンの位置を変更したい時は『Position』から設定します (デフォルトは右上)。

また、『Image Width』で、デバイスごとの全画面ボタンのサイズを指定できます。

ホバー時の表示』をオンにすると、スライドにカーソルを合わせた時だけ 全画面ボタンを表示するようになります。

また『Hide On』にて、デバイスごとに全画面ボタンを全く表示させなくすることも出来ます。
(例:スマホだけ 全画面ボタン非表示など。)

非表示スライドID』:
たとえば、1枚目3枚目のスライドでは全画面ボタンを非表示にしたいという場合、『非表示スライドID』の欄に『1,3』とカンマで区切って入力します。

HTML

HTML』では、スライド上に「テキスト・画像・ハイパーリンク」等の要素を重ねて表示させたい場合などに、ここで個別にHTMLの記述法を用いて設定していくことが出来ます。
(*HTMLやCSSの基本理解が必要)
Position』にて、表示位置を細かく指定できます。

ホバー時の表示』をオンにすると、スライドにカーソルを合わせた時だけ HTML要素を表示するようになります。

また『Hide On』にて、デバイスごとにHTML要素を全く表示させなくすることも出来ます。
(例:スマホだけHTML要素を非表示など。)

非表示スライドID』:
たとえば、1枚目3枚目のスライドではHTML要素を非表示にしたいという場合、『非表示スライドID』の欄に『1,3』とカンマで区切って入力します。

まとめ

今回は、『スライダー設定』の『操作』について解説いたしました。 矢印やボタンなど、コントロール系の設定となり、ユーザー視点でのスライドの見やすさ、分かり易さに直結しますので重要な内容となります。


『スライダー設定』には、この後に、
アニメーション』『自動再生』『最適化』『スライド』『開発者』などの項目があり、それらの詳細についても、あらたに関連記事を追加していきます。

Pro版を使ってみる

本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀

コメント

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