【Smart Slider 3】レイヤーの種類④(Advanced Layer)【WordPress】

Advanced(高度)レイヤー

『Advanced(高度)』レイヤーでは、使用するのに、多少コーディングなどの専門知識が必要になるものもあります。
Web制作の経験が豊富な方であれば、さまざまな用途で活用できる可能性があります。

Image Areaレイヤー

『Image Area』レイヤーは、画像を任意の表示サイズにでき、選択した画像はそれに合わせて調整されます。(↓例)

『高度』カテゴリーの中から『Image Area』レイヤーを挿入したい箇所にドラッグ&ドロップします。

『Image Area』レイヤーが配置されました。

『レイヤーウィンドウ』から使用する画像を設定します。今回は例として、以下の縦横比 5対4のサイズの画像を使用して解説していきます。

素材として、今回のような正方形に近い画像がある場合でも、スライドに配置する際には、その素材を部分的に「縦長」や「横長」で使いたいということもあるかと思います。

『スタイル』タブにある『最大幅』と『高さ』を調節してみます。

最大幅: 500px、高さ: 150px に指定すると、以下のようになりました。
サイズはこれでOKとしますが、このままでは被写体の女性の顔が見えていません。

女性の顔が見えるように「フォーカスポイント」を最も見せたいエリアまでドラッグして移動させます。

見せたい範囲にフォーカスを当てることが出来ました。

同じ要領で、以下のように縦長サイズに調整することも出来ます。

この『Image Area』レイヤーは、例えば 「Webショップ」や「カタログページ」などで、サイズが異なる複数の画像を、商品のアイキャッチ画像として同サイズで表示したい場合などにも役立ちます。

Areaレイヤー

『Area』レイヤーは、空(カラ)のエリアをスライド上に配置して活用するレイヤーです。
レイヤーを挿入したい箇所にドラッグ&ドロップします。

設定項目で主なものとしては、『背景色』や『幅』『高さ』くらいしかありません。

『背景色』にカラーを設定して使用することも出来ますが、使い道としては『背景色』を透明にして、スライドの一定のエリアをカバーするように配置するという用途が想定されているようです。

具体的な利用事例は、また別の記事 (レイヤーアニメーション関連) で解説したいと思います。

Iframeレイヤー

iframeとは、Webページの中に別のWebページや外部コンテンツを埋め込むためのHTMLタグです。

『Iframe』レイヤーを挿入したい箇所にドラッグ&ドロップします。

表示させたいWebページや外部コンテンツのURLを入力します。

以下は、Spotifyの iframe URLを入力し、表示サイズを調整した例です。

同様に、Googleマップなども簡単に埋め込むことが可能です。このように外部コンテンツを手軽にスライド上に配置できるので、使い方次第でスライダーの用途が広がりますね。

入力レイヤー

『Input』レイヤーはシンプルなHTMLタグです。実際に検索フォームや、メルマガ購読フォームなどとして機能させるには、コーディングの知識が必要になります。
ここでは、具体的な実装方法については省略します。

『Input』レイヤーを挿入したい箇所にドラッグ&ドロップします。

フォームのデザインは、『スタイル』タブから調整することが出来ます。

HTMLレイヤー

『HTML』レイヤーでは、独自のHTMLおよびCSSコードを記述することが出来ます。

レイヤーを挿入したい箇所にドラッグ&ドロップします。

『レイヤーウィンドウ』から、HTMLおよびCSSコードを記述することで、レイヤー上に内容を表示させます。

以下は例として、HTMLおよびCSSコードを記述することで、表(テーブル)を表示させてみました。

あるいは、コーディングの知識のある方であれば、オリジナルのお問合せフォームなどを実装することも出来るでしょう。

まとめ

今回は、Smart Slider3 Proの『レイヤーの種類 (高度: Advanced Layer)』について解説いたしました。

冒頭にも書いた通り、使用するのに多少コーディングなどの専門知識が必要になるものもありますが、Web制作の経験が豊富な方であれば、さまざまな用途で活用できるのではないでしょうか。

Pro版を使ってみる

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

Pro版の機能を含めた使い方については、詳しく解説した記事を少しずつ追加しておりますので、こちらもぜひご覧ください👇👇👇