Smart Sliderで利用出来る『レイヤーの種類(Special Layer)』について解説しています。Pro版の機能も含めて解説しています。
本記事は、パソコンの画面から見ていただくことを推奨します。
特別レイヤー
左端の『レイヤー追加パネル』には、５つの基本レイヤーが並んでいますが、これら基本レイヤー以外の特別なレイヤーは、緑色のプラスボタンを押して、開いたウインドウの中から選択することが出来ます。
ここでは、全部で11種類ある特別レイヤーについて設定方法も含め、詳しく解説していきます。
Image Box
『スペシャル』カテゴリーの中から『Image Box』を挿入したい箇所にドラッグ&ドロップします。（クリックするだけでも挿入されます）
『Image Box』レイヤーが配置されました。
最初はダミー画像が設定されていますので『レイヤーウィンドウ』から変更して下さい。
以下のように画像を変更しました。ここではいったん『レイヤーウィンドウ』から画像幅を50%に調整しています
また、見出しと説明文も『レイヤーウィンドウ』から以下のように書き換えました。
また、画像とテキストの『レイアウト(４パターン)』を、プルダウンから簡単に変更できます。
以下は「横並び・画像左」にした場合。
『Image Box』を『行・列』レイヤーの中に配置すれば、以下のような３列組のレイアウトも簡単に実現できます。
Animated Heading
『Animated Heading』レイヤーは、以下のように、見出しテキストの一部をリスト内の別のテキストに置き換えられる機能です。
『Animated Heading』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
『レイヤーウィンドウ』の『Animated Text』の欄に、置き換えをしたいテキスト(２行以上)を設定します。
切替えアニメーションのタイプは、８種類から選択できるようになっています。
・Auto Width：(オン) 入れ替えテキストの表示スペース(幅)を自動調整してくれます。
・Loop：(オン) アニメーションがループ再生する。(オフ)１回のみ再生して停止。
・遅延：アニメーションが開始するまでの時間を指定できる。
・速度：アニメーションの速度。数値が大きいほど速くなる。
・Show Duration：ひとつのテキストが表示されている時間を指定できる。
Highlighted Heading
『Highlighted Heading』は、見出しの重要な部分をハイライトで強調できるテキストです。
『Highlighted Heading』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
『ハイライト付きテキスト』の欄に、強調したいテキストを設定します。
強調アニメーションのタイプを、20種類以上から選択でき、線の色や太さも変更できます。
キャプション
『キャプション』レイヤーは、画像にマウスオーバー時に、テキストをオーバーレイ表示させることが出来ます。（↓例）
タイトルだけでなく、説明文も表示させることが出来ます。
『キャプション』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
最初はダミー画像が設定されてますので『レイヤーウィンドウ』から画像を変更しておきます。
マウスオーバー時に、画像の上に表示させる『タイトル』（必要であれば『説明文』）を設定します。
テキストのスタイル変更は『スタイル』タブから、「タイトル・説明文」を切替えて個別に設定できます。
「タイトル」と「説明文」を入力
「タイトル」「説明文」切替えて個別に設定
キャプションレイヤー全体の表示サイズは、『スタイル』タブの『最大幅』から指定すると良いでしょう。
「最大幅」で表示サイズを指定
画像・タイトル・説明文を設定し、表示サイズを最大幅500pxに指定し、以下のような表示となりました。
キャプションを表示させる動き(アニメーション)は、3種類から選択できます。
『Scale』をオンにすると、マウスオーバーに合わせて画像が拡大表示されます。
Transition
『Transition』レイヤーでは、マウスオーバーに合わせて、2種類の画像を入れ替えて表示させることが出来ます。(↓例)
『Transition』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
『レイヤーウィンドウ』から、切替えに使用する画像2枚(Front, Back)を設定します。
画像切替えのアニメーションは、3種類から選択できます。
リスト
『リスト』レイヤーは、単純にリスト表示するだけのシンプルなレイヤーです。
挿入したい箇所にドラッグ&ドロップして配置します。
『Items』の欄に、リスト表記するテキストを設定します（リスト項目は増やせます）。
リスト形式の種類をプルダウンから選択できます。
デザイン的に、リストを枠線で囲うなどの場合は、『行』レイヤーの中に『リスト』レイヤーを配置して、枠線を『行』レイヤーの方に設定すると良いかもしれません。(↓例)
『行』レイヤーに、枠線1pxと背景色(半透明)を設定した例
プログレスバー
『プログレスバー』は、以下のように棒グラフのアニメーションで、情報を表示するグラフィカル機能です。
『プログレスバー』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
『値』にプログレスバーがカウントする値。『Start From』にカウント開始時の値。『Total』に最大値を設定します。
『ラベル』にプログレスバーのタイトル。『Placement』にタイトルを表示させる場所を指定します。
『Pre』：「値の数値」の前に表示するテキスト
『Post』：「値の数値」の後ろに表示するテキスト (＊「投稿」となってるのは誤訳ですね)
円形カウンター
『円形カウンター』は、以下のように円形グラフをアニメーションで表示する機能です。
『円形カウンター』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
『円形カウンター』の設定内容は『Progress Bar』とほぼ同じです。
『サイズ』で円形カウンターのサイズを、『Stroke Width』で円形カウンターの線の太さを変更できます。
カウンター
『カウンター』レイヤーでは、以下のような数字カウンターを実装することができ、ダウンロード数、顧客満足度、売上数などを数値で表示させることが出来ます。
『カウンター』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
『カウンター』の設定内容は『Progress Bar』や『円形カウンター』の設定をよりシンプルにした感じです。
Countdown
『Countdown』レイヤーでは、設定した時間のカウントダウンを作成できます。
『Countdown』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
『レイヤーウィンドウ』で、カウントダウンの終了日時を設定します。
＊自動的に、サイトに設定したタイムゾーンが使用されます。(WordPressの場合：設定 → 一般 → タイムゾーン)
『Use Slide Schedule』をオンにすると、スライドの「公開停止日」をカウンターの終了日として設定できます。
ただし、この場合の公開停止日は、『スライド』レイヤーの『Unpublish On』をオンにして日時を設定する形になります。
カウンターが「0」に達した時点でスライドが公開停止されます。
『Use Slide Schedule』をオン
『スライド』→『Unpublisf On』で日時を設定
『列』で、カウンターの表示を「4×1、2×2、1×4」の表示から選択します。これは、タブレットとスマホの表示で、それぞれ個別に設定することも出来ます。
「4列 → 2列 → 1列」
『Action When Ends』では、カウントダウンが終了した後に実行したいアクションを指定できます。
・No action：何もしない。数字はゼロのままです。
・Hide layer：カウントダウン終了後にカウントダウンレイヤーを非表示にします。
・Redirect to URL：指定されたURLにリダイレクトします。
Before After
『Before After』レイヤーは、以下のように２枚の画像のビフォア・アフターをドラッグ操作で比較できる機能です。(↓例)
『Before After』レイヤーを挿入したい箇所にドラッグ&ドロップして配置します。
『レイヤーウィンドウ』から、「ビフォア画像」「アフター画像」を設定します。
「ビフォア画像」「アフター画像」を設定しました。
前後の画像にラベルを表示するかどうか、表示のさせ方、表示する位置などを指定します。
ラベルに表示する文字列は自由に変更できます。
分割ラインの表示タイプや、色、線幅などを指定することが出来ます。
まとめ
今回は、Smart Slider3 Proの『レイヤーの種類 (Special Layer)』について解説いたしました。
本記事で紹介した11種類の「Special Layer」のほかに、「Media Layer (4種類)」や「Advanced Layer (5種類)」という特別なレイヤーも用意されています。別記事で詳しく解説いたします。
Pro版を使ってみる
本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀
Pro版の機能を含めた使い方については、詳しく解説した記事を少しずつ追加しておりますので、こちらもぜひご覧ください👇👇👇
コメント