【Smart Slider 3】スライダー設定① 一般設定【WordPress】

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

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

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

スポンサーリンク
スポンサーリンク

スライダー設定(Settings)

スライダー設定について解説していきます。

『一般設定』『Size』『操作』『アニメーション』『自動再生』『最適化』『スライド』『開発者』と、現状8つの設定タブが設けられています。

その中で、本記事では一番右の『一般設定』について詳しく解説していきます。

公開(Publish)

まず、一般設定タブの『公開』から見ていきましょう。WordPressページに、スライドを表示させる方法は3種類あります。

ショートコード貼り付け

ショートコード」を使用する方法です。まず、表示されているショートコードをコピーして、スライダーを表示させたい投稿(固定)ページの編集画面(エディター)を開きます。

投稿(固定)ページのエディターを開いたら、以下のようにショートコードを貼り付けるだけです。ビジュアルエディターの方に貼り付けてしまって大丈夫です。

クラッシックエディターでも方法は同じです。

ブロックを追加

2つ目の方法ですが、エディターの「ブロックの挿入」や「ボタン」などからスライダーを簡単に挿入する方法です。ブロックエディター/クラッシックエディターはもちろん、ElementorDivi などのページビルダーにも対応していますよ、と書いてあります。

ブロックエディター (Gutenberg) の場合は、ブロックを追加から簡単に挿入することが出来ます。

Smart Sliderのブロックが挿入されるので「SELECT SLIDER(スライダーを選択)」を押します。

挿入するスライダーを選択して「INSERT(挿入)」を押せばページ内に挿入されます。簡単ですね。

クラッシックエディターをお使いの場合も同様に、以下の帽子のアイコンから挿入できます。

PHPコードを貼り付け

WordPressテーマを構成するファイルに直接コードを書き込む方法です。HTMLCSSなどの知識が必要になりますので、具体的な方法は別の記事で触れることとして、ここでは詳細な説明は省略いたします。

一般設定(General)

『公開』の下に行くと、以下の設定項目が並んでいます。一見すると難しそうに見えるかもしれませんが、ひとつずつ詳しく見ていきましょう。

ここからは、何か設定を変更したら、必ず右上の『保存』ボタンを押して確定させるのを忘れないようにして下さい。

一般設定

『一般設定』の文字の横に『Simple Slider』とありますが、これはスライダーのタイプによって表示が変わります。

スライダーシンプル

以下のように表記が変わりますので、自分が編集しているのはどのタイプなのかをここで確認するようにしましょう。設定内容も変わってきます。

ブロック

カルーセル

ショーケース

プロジェクトタイプ』『スライダータイプ』によって、設定項目の内容が少しずつ異なりますので覚えておいて下さい。

名前

『名前』の欄にはプロジェクト名が表示されます。日本語で入力してもOKです。

プロジェクトの数が増えてくると、探すのが大変になってきます。あとで検索しやすいように分かりやすい名前を付けるようにしょう。

サムネイル

ダッシュボードに表示されるプロジェクトのサムネイルとして画像を指定します。

基本、ここに何も設定しなくても、スライドに使用している画像が、自動的にサムネイルとして表示されることもあるので、そこまで気にしなくてもOKです。

ただし、サムネイル未設定ですと、以下のようにダッシュボード上で、画像が何も表示されない場合もあります。このままですと、プロジェクトの内容が分かりにくいですよね。

その場合は、メディアライブラリから、なにか画像を選んでサムネイルとして指定しておきます。

ARIA Label

ARIA Labelは『アクセシビリティ』対応に用いられます。ウェブページから視覚的に情報を得ることが困難な方(目の不自由な方)は、テキスト読み上げ機能の『スクリーンリーダー』を使用するケースがあります。

その場合『このスライダーはどういった内容なのか』が分かるように、aria-label属性として説明文を指定しておく訳です。指定しておくと『スクリーンリーダー』での読み上げが可能になります。

aria-label属性については、こちらのサイトの説明が分かりやすいかなと思います。
>> 知っていると便利なaria-label属性の使い方

ただ、使い所としては知識がないと判断が難しいですね。スライダー内に十分なテキスト情報が含まれていれば、設定する必要がないケースがほとんどかもしれません。

別名(Alias)

作成したプロジェクトには、作成した順に『ID: 2ID: 3、…』というID番号が割り振られていきます。これらのID番号を別の分かりやすい名前に変更できます。

たとえば、別名 (Alias) として『products』と設定してみます。

通常は、エディターに貼り付けるショートコードは『slider=”2“』のようにID番号が入ります。でも、これだとエディター上では、何のスライダーなのか分かりにくいですよね。

このID番号のところを、別名 (Alias) に置き換えることができます。これであれば『Products(商品)』に関するスライダーだとひと目で分かります。

『公開』の『ショートコード』欄にも、別名版のショートコードが追加されてますので、こちらをエディターに貼り付けてもOKです。

PHPコードをテーマファイルに埋め込む際も、同じ要領で “別名” に変更できます。

<?php
echo do_shortcode('[smartslider3 slider="products"]');
?>

Use As Anchor

設定した『別名 (Alias) 』はアンカーとして使うことができます。

スライダーを設置したページのURL末尾に『#Alias』をつけることで、そのページへリンクするだけでなく、スライダーのある位置までジャンプさせることが出来ます。


たとえば、以下のようにURL末尾に『#Alias』を付け足します。

Use As Anchor』をオンにします。

アンカーへのジャンプは、実際にはこのような動きになります。リンク

Smooth Scroll

Anchorとともに、Smooth Scrollをオンにすると、いきなりジャンプ先のスライドに切り替わるのではなく、ページトップからスクロールしてスライドまで移動するようになります。

ただしこの場合、ページ全体に以下のStyleが適用されてしまいます。すべてのページ内リンクにSmooth Scrollを適用したくない場合はオフにしておいた方が良いでしょう。

また、ブラウザによって、スクロールの挙動が異なり、スクロールスピードも制御できないので、思い通りの動作にしたい場合は、JavaScript (jQuery)等で実装するのが通常です。

Switch Slide

さらに、Switch Slideをオンにすれば、最初に何枚目のスライドを表示させるか指定できます。

たとえば、2枚目のスライドを最初に表示させたい場合は、以下のように指定します。

Scroll To Slide

最後のScroll To Slideをオフにすると、以下の仕様になります。

  • 最初に表示させるスライドを指定するが、
  • アンカーとしては機能させない

Slider Design

Slider Design』は少し設定項目が多いですが、順を追って解説していきます。

Slider Background Image

『スライダーエリア全体の背景』として画像を設定することが出来ます。「+」ボタンを押してメディアライブラリから画像を読み込みます。

ここで設定した背景画像は固定表示され、スライドと一緒に動いたり、切り替わったりすることはありません。

たとえば以下。スライドが切り替わっても、背景画像はそのまま変化しないことが分かりますね。

Acorn Studio
Image is not available
Acorn Studio
We build brands and digital experiences for your business!
Who we are?
Who we are

We are a digital creative agency with offices in San Francisco. We build products that achieve better performance for your business or brand.

What we do?
Image is not available
Web Development
Image is not available
App Development
Image is not available
Multimedia Production
Image is not available
Strategy & Branding

ここで設定するのは『スライド』の背景画像ではなく、『スライダーエリア』の背景画像であることをよく理解してください。

固定(Fixed)

固定』をオンにすると、背景画像に Parallax effect (視差効果) をつけることが出来ます。以下のように、画面をスクロールしても背景画像だけ位置が固定されます。

Acorn Studio
Image is not available
Acorn Studio
We build brands and digital experiences for your business!
Who we are?
Who we are

We are a digital creative agency with offices in San Francisco. We build products that achieve better performance for your business or brand.

What we do?
Image is not available
Web Development
Image is not available
App Development
Image is not available
Multimedia Production
Image is not available
Strategy & Branding

Size

スライダーの背景画像には『background-size』を設定します。

background-size』の指定は以下の3種類です。
※ここではスライダーエリアのことを要素と呼びます。

  • cover:要素にすき間ができないように画像を表示
  • contain:要素にすき間ができたとしても画像全体を表示
  • auto:ありのままの画像サイズで表示(リサイズされない)

背景色

スライダーの背景に画像を設定するのではなく、背景色を指定することもできます。

カラーピッカーが開くので、好きな色に変更できます。

Background VIdeo

スライダーの背景に『動画(ビデオ)』を設定することもできます。通信環境によってビデオが再生されないケースに備えて『画像』も合わせて設定しておくと良いでしょう。

Background VIdeoの設定は『Muted』『Loop』『Fill Mode』の3項目です。

  • Muted:ビデオのミュート(なぜかOFFにしたときにミュートされます)
  • Loop:ビデオを繰り返し再生
  • Fill Mode:以下の3つのモードから選択
    Fill:すき間ができないようにトリミングされて表示
    Fit:ビデオ全体が収まって表示される。トリミングされない
    Center:ありのままのビデオサイズで表示(リサイズされない)

Background VIdeoを設定すると、たとえば以下のような感じです。15秒程度の動画がループ再生されています。動画を設定する際は、サイズが重くならないように気をつけましょう。

What People Say
Image is not available
Dave Turner
Motivational Speaker
Image is not available
Carrie Steiniger
Account Manager
Image is not available
Chris Mayne
Tech Reviewer
Image is not available
Samantha Lewis
Eyewear Boutique Founder
Slide 1
“Infinite Ideas helps us to create an unique webshop that's as special as the items we sell. Excellent customer service!”
Slide 2
“When I think of Infinite Ideas, I think of two things: professional solutions and outstanding customer support when I need it.”
Slide 3
“Choosing Infinite Ideas was the best software decision we made last year. I think it’s a long term relationship. ”
Slide 4
“These guys helped me grow my business like a boss. Everything is very professional, unlike many other solutions.”

整列(Align)

スライダーの横幅を、ページ幅よりも狭くなるように設定することもあるでしょう。その場合、特に何もしないと、以下のようにスライダーがページの左寄りに表示されてしまうことがあります。

previous arrowprevious arrow
Product 1
HOME / BEDROOM
Bed frame with storage
$1199
Product 2
HOME / LIVING ROOM
Modern Leather Sofa & Chair
Product 3
HOME / SOFAS
Loveseat, gunnared light gray
$1199
Product 4
HOME / DINING
Bar stool, black
next arrownext arrow

スライダーを中央に表示したい場合は『整列(Align)』から『中央』を選択します。

マージン・パディング(Margin / Padding)

スライダーエリアの『外側の余白』『内側の余白』をそれぞれ設定できます。

たとえば『マージン』も『パディング』も設定していない場合、スライダーエリアは以下のようなイメージです。余白がまったくありません。

以下が、マージンとパディングのイメージです。
外側の余白が『マージン』、内側の余白が『パディング』となります。

余白は『上下左右』で、それぞれ数値を個別に設定することも可能です。


Top(上)、Right(右)、Bottom(下)、Left(左)と、時計回りに設定します。以下の例ですと、上下に5px(左右はゼロ)のマージンが入ることになります。

ここで設定するマージン・パディングは、スマホやタブレットの表示でも反映されてしまいます。なので、あまり大きな数値は入れない方が良いでしょう。通常、小さなスマホ画面ではスライダーはフル幅表示した方が視認性が良くなります。

Perspective

要素に奥行き表現を設定する『Translate』という機能があります。

その奥行の表現に加えて、それを『近くから見ているのか』『遠くから見ているのか』を設定するのが『Perspective』です。

Translate』については別記事で解説する予定なので、『Perspective』についてもそこで詳しく解説します。

Border-Width・角丸(Border Radius)

背景画像に『Border(枠線)』を設定することが出来ます。

たとえば、以下のような、全体的に明るめの背景画像をどう思いますか。白い背景と画像の境目がすこし不鮮明でボヤッとしてますね。

Slide

そこで『Border』で1pxの枠線、『Border Color』で枠線の色を指定してみます。『角丸(Border Radius)』では角に丸みも設定できます。

Borderを付けることで、画像の境目がハッキリとし、角に丸みをつけることも出来ました。

Slide

Slider CSS Preset

Slider CSS Preset』を使用すると、スライダーに対して、ドロップシャドウなどの効果を簡単に付けることができます。

たとえば、プリセットから『写真』を選択してみます。『スライダーCSS』の中に自動的にコードが書き込まれます。

CSS Preset』が適用されたスライダーを見てみましょう。

スライダーのまわりに影がついて、画像が浮き上がったような効果が出ているのと、Border8px, ホワイト)も自動的に適用され、フチあり写真っぽい効果も入りました。

previous arrowprevious arrow
Product 2
HOME / LIVING ROOM
Modern Leather Sofa & Chair
Product 3
HOME / SOFAS
Loveseat, gunnared light gray
$1199
Product 4
HOME / DINING
Bar stool, black
Product 1
HOME / BEDROOM
Bed frame with storage
$1199
next arrownext arrow

スライダーCSS』の中に書き込まれたコードは、自分で数値を書き換えることもできます。効果を解除したいときは、コードを削除すればOKです。

box-shadow: 1px 0 5px RGBA(0, 0, 0, 0.2), -1px 0 5px RGBA(0, 0, 0, 0.2);

Side Spacing

こちらは、要は『パディング(内側の余白)』と同じなのですが、『カルーセル』か『ショーケース』を選択している場合のみ表示されます。余白の数値をデバイスの種類ごとに設定できるようになってます。

たとえば以下のように、内側の余白を『50px』に設定して、モバイルサイズ以下になったら『上下50px左右20px』に変化するようにします。

『カルーセル』タイプを例にします。
薄いグリーンの部分が内側に設定した余白です。上下左右に50pxの余白が入っていますね。

Slide

仮に、ブラウザの幅を狭くしていっても、内側にいい感じの余白が確保されます。

そして、画面がスマホサイズになったら、左右の余白は自動的に20pxに変わります。

まとめ

今回は、『スライダー設定』の『一般設定』について解説いたしました。基礎がしっかり理解できていると、Smart Sliderを自在に使いこなせるようになります。頑張りましょう!


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

Pro版を使ってみる

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

コメント

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