Smart Sliderで利用出来る『レイヤーの種類と追加方法』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。
また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。
本記事は、パソコンの画面から見ていただくことを推奨します。
レイヤーとは
基本的に、複数枚の画像が順番に切り替わるのが、一般的なスライダーですが、その背景画像の上に『見出し・テキスト』『ボタン』『画像』などの要素をレイヤーとして重ねて表示させることが出来ます。
Smart Sliderでは、様々な種類のレイヤー要素を、簡単な手順で配置でき、自在にカスタマイズ出来るようになっています。
レイヤーの構造
以下は『スライドエディター』の画面です。ひとつのスライドには、最初に２つの枠 (箱のようなもの) が設定されています。
外側の『スライド』枠には通常、スライド全体に対する「背景画像」が設定されます。
そして、内側の『コンテンツ』枠の中に、『見出し・テキスト』『ボタン』『画像』などの要素をレイヤーとしてレイアウトしていくことが出来ます。
『スライド』枠に、以下のように背景画像を設定してみました。
左端のレイヤー追加パネルから、各レイヤーを追加してみましょう。
行と列 (Row and Column)
レイヤー追加パネルから『行』をドラッグ&ドロップで追加します。(クリックするだけでも追加されます)
スライドの中央に、１行２列の枠が挿入されました。
『行』が選択された状態のとき、『レイヤーウィンドウ』では『行』に対する設定ができます。
マウスドラッグで、２つの列幅の割合を変更したり、順番を入れ替えたりが可能です。また、プラスボタンで列の数を「３列、４列 … 」と増やすことも出来ます。
レイヤーウィンドウ
左上のボタンからレイヤーリストを表示
右上のボタンからレイヤーリストを開くと『コンテンツ』枠の中に『行と列』が格納されているのが分かります。クリックして、各要素を選択することも出来ます。
見出し (Heading Layer)
レイヤー追加パネルから『見出し』レイヤーをドラッグ&ドロップで追加します。
(＊列幅の左右の割合は、60%-40%の割合に調整してあります。)
見出しのテキスト編集は「レイヤーウィンドウ」から行います。
フォント、色、サイズなどの文字設定は「スタイルタブ」から行うことが出来ます。
レイヤーウィンドウ
フォント、色、サイズなど文字設定
見出しのテキストを以下のように変更してみました。
続いて『テキスト』レイヤーを追加してみましょう。
テキスト (Text Layer)
レイヤー追加パネルから『テキスト』レイヤーをドラッグ&ドロップで追加します。
マウスドラッグしてきた際に、追加する位置が青色にハイライトされますので、希望の位置に追加して下さい。今回は『見出し』の下に追加してみます。
見出しの下に『テキスト』が追加されました。テキストの内容は「レイヤーウィンドウ」から編集して下さい。
テキストを以下のように書き換えました。
文字揃えや余白の設定などの見た目の調整は、後ほどまとめて行います。
画像 (Image Layer)
レイヤー追加パネルから『画像』レイヤーをドラッグ&ドロップで追加します。ここでは、画像レイヤーを右側の列に配置してみましょう。
『画像』レイヤーが挿入されました。
最初は緑色のダミー画像が設定されていますので、『レイヤーウィンドウ』から画像を入れ替えます。
画像が設定されました。画像の表示サイズなど、最後にまとめてレイアウトの調整をします。
ボタン (Button Layer)
レイヤー追加パネルから『ボタン』レイヤーをドラッグ&ドロップで追加します。ここでは、テキストエリアの下に配置してみます。
テキストの下に『ボタン』レイヤーが配置されました。
ボタンに表示される文字は『レイヤーウィンドウ』から変更でき、ボタンにハイパーリンクも設定できます。
ボタンや文字の色など、見た目の変更は「スタイル」タブから行うことが出来ます。
ボタンの見た目を以下のように変更しました。それでは、ここから全体のレイアウトを少し整えていきましょう。
全体のレイアウト調整
まず、『行』レイヤーの左右の内側の余白(パディング)を広げて、全体のボリュームをもう少し中央に寄せてみます。
内側の余白(パディング)は『レイヤーウィンドウ』の『スタイル』タブから変更することが出来ます。
最初は、上下左右に 10pxの同じ余白が設定されていますが、「上→右→下→左」の順で個別に設定することが出来ます。ここでは左右のパディングを 30pxに変更してみます。
パディング(内側の余白)
「上•右•下•左」の順で個別に設定できる
左右のパディングが 30pxに広がり、全体を少し中央に寄せることが出来ました。
同様に『見出し』『テキスト』レイヤーの下に、それぞれ余白(ここではマージン)を広げて、レイアウトを整えます。
『テキスト』レイヤーの左右の内側には、少しパディングを入れて、テキストの幅を調節します。
さらに『テキスト』の文字が中央揃えになっているので、ここでは『レイヤーウィンドウ』から左揃えに変更しておきます。
また、読みやすい表示にする為に、テキストの途中に改行<br>を入れます。
文字揃えを「左寄せ」に
改行を入れる箇所に<br>
テキストが左揃えになり、文の途中で改行も入り見やすくなりました。
右側の画像のサイズが、全体の高さに揃うように、上下左右のマージンを追加して調整します。
最終的に以下のようにレイアウトが調整されました。余白を適切にとることで、すっきりと整理された印象になったと思います。
ここまでで、デスクトップ表示でのレイアウト調整は出来ましたが、本来ここからモバイル(スマホ・タブレット) 表示の調整もする必要があります。
本記事は「レイヤーの種類と追加方法」の解説をメインとしたいので、モバイル表示での調整については、また別記事で詳しく解説いたします。
アイコン (Icon Layer)
最後に『アイコン』レイヤーというものがあるので、簡単に説明していきます。
レイヤー追加パネルの緑色のプラスボタンを押して『アイコン』レイヤーを追加します。
以下のように『アイコン』レイヤーが追加されます。アイコンの種類、色やサイズ等は『レイヤーウィンドウ』から変更できます。緑色のプラスボタンを押すと、
Font Awesomeなど、有名なアイコンストックサービスのものから、自由に選択できるようになっています。
スライダーに限らず、Webページを制作していると、ちょっとしたアイコンが必要になることが、結構あります。
例えば以下のように、テキストの先頭に配置したりして、何についての情報なのか補足としてアイコンを使うなどが考えられます。
ただし、見栄え良くレイアウトするには、『行と列』レイヤーを上手く使って配置していく必要がありそうです。
まとめ
今回は、Smart Slider3 Proの『レイヤーの種類と追加方法』について解説いたしました。
本記事で紹介した６種類のレイヤーは、基本(Basic)レイヤーで、この他にまだ 20種類の特別なレイヤーが用意されています。また別記事で詳しく解説いたします。
また、レイヤー配置後のレイアウトの基本的な調整方法についても触れました。
スマホやタブレットなどモバイル表示におけるレイアウトの調整方法についても、別記事で詳しく解説いたします。
Pro版を使ってみる
本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀
コメント