Smart Sliderで利用出来る『レイヤースタイル設定(Style tab)』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。
また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。
本記事は、パソコンの画面から見ていただくことを推奨します。
レイヤースタイル設定とは
レイヤーパネルから配置した「テキスト」「ボタン」「画像」などのレイヤーに対して、文字の色、大きさ、背景、余白、レイアウトなど、装飾的な見た目を指定するのが『スタイル』設定の役割です。
スライドエディター上で、レイヤーを選択すると、そのレイヤーの『レイヤーウィンドウ』が表示されます。スタイル設定は『スタイル』タブから行っていきます。
一般的な設定項目
以下は、「見出し」レイヤーですが、「テキスト」「ボタン」レイヤーでも、ほぼ同様の設定項目となっています。
プリセット
「スタイル」タブで設定した内容を新規プリセットとして保存でき、再度、プラスボタンから読み込むことも出来ます。デフォルト設定にリセットすることも可能です。
「リセット」「保存」「呼び出し」
TYPOGRAPHY
フォント、サイズ、カラーなど、テキストの見た目を指定します。右上のプルダウンで「ホバー」に切り替えると、マウスオーバー時のスタイルを個別に設定できます。
背景
レイヤー領域内の、背景色を指定できます。ここでも右上の「通常」を「ホバー」に切り替えることで、マウスオーバー時のスタイルを個別に設定できます。
ちなみに「もっと(MORE)」を押すと隠れている設定項目が表示されます。(「LESS」で閉じる)
CSSを直接、記述してスタイル指定することも出来ます。
枠線
「枠線」はレイヤー領域の外枠に表示する線の太さや種類を指定。
「角丸」は、四つ角を丸める訳ですが、背景色か枠線が設定されていれば視認できます。
SPACING
「パディング」は、レイヤー領域の内側の余白を指定します。
このままですと、上下左右４方向すべてに同じ余白が設定されますが、
チェーンのアイコンを押して展開すると、４方向の余白を個別に設定することが出来ます。
上(top)、右(right)、下(bottom)、左(left) の順に指定します。
レスポンシブ
「Hide On」で、レイヤーを非表示にするデバイスを選択できます。
↑(例) スマホではレイヤーを非表示
「Text Scale」では、デバイスごとのフォントサイズを調整できます。
例えば、上部の「デバイスセレクタ」でモバイル表示に切り替えてから、「Text Scale」を70%に指定すると、「デスクトップ：100%」↔︎「モバイル：70%」でフォントサイズが切り替わるように設定できます。
効果
「視差効果(パララックス)」は、数値を大きくすると効果も強くなります。効果を確認するにはプレビューします。
「クロップ」では、コンテンツがレイヤーより大きい場合、サイズに合わせてトリミングします。
通常は、テキスト量や画像サイズに合わせて、レイヤーの大きさは可変したり調整されたりするが、レイヤーの「幅」や「高さ」を固定した上で『クロップ』を有効にすると、表示しきれない分がトリミングされる。
「角度」は、レイヤーを回転させることが出来ます。
特殊な設定項目
POSITION
「Position」では、レイヤーの配置方法を変更できます。
「Position」を「Absolute」に変更すると、基準となる親要素からの距離＝「絶対位置」としてレイヤーの配置を指定することが出来ます。
「Absolute」に変更した場合、通常は、「コンテンツ」レイヤーが基準(親要素)となってます。レイヤーが「列」の中に配置されている場合は、その「列」レイヤーが親となります。
「Link To」で、親要素を別のレイヤーに変更できます。ただし、親に指定できるのは、同じレベル(階層)にある他のレイヤーに限られます。
親のレイヤーを選択した状態
「レスポンシブ」がオンの場合、デバイスの横幅が狭くなっても、レイヤーの絶対位置を調整してくれます。
サイズ
「サイズ」は、「Position」が「デフォルト」か「Absolute」かで設定項目が変わります。
「Position」が「デフォルト」の場合
「マージン」はレイヤー領域の外側の余白を指定します。
チェーンのアイコンを押して「上(top)、右(right)、下(bottom)、左(left) 」を個別に指定することも出来ます。
「Position」が「Absolute」の場合
「レスポンシブ」がオンの場合、レイヤーの表示サイズがデバイスによって自動調整されます。
高度
「Z Index」は、要素の重なり順を指定します。数値が大きいほど前面に表示され、小さいほど背面に表示されます。(デフォルト値は「2」)
「CSSクラス」では、レイヤーのコンテナに対して「カスタムCSSクラス」を指定出来ます。
背景画像・背景色の指定
背景画像の設定
「行」と「列」レイヤーにおいては、「スタイル」タブにて、背景画像(background-image)を指定することが出来ます。
「行」レイヤーに、背景画像(background-image)を指定した場合の例。
背景色・グラデーション
「行」と「列」レイヤーの場合、「背景色」で単色のほかに、グラデーションを選択することも出来ます。
以上で、基本的なスタイル設定についてはご説明いたしました。
レイヤーの種類によっては、設定項目に若干の違いがあるかもしれませんが、そこまで大きな違いではなく、応用がきくレベルだと思います。
まとめ
今回は、Smart Slider3 Proの『レイヤースタイル設定(Style tab)』について解説いたしました。
「スタイル」タブにおける設定は、「テキスト」「画像」「ボタン」などの各レイヤーを、スライド上で、思い通りにレイアウトする為に、たいへん重要な項目となっています。
「パディング」や「マージン」などを使った適切な余白の設定も、整理された見やすいレイアウトには必須の作業となりますので、しっかり理解して使いこなせるようにしておきましょう。
Pro版を使ってみる
本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀
Pro版の機能を含めた使い方については、詳しく解説した記事を少しずつ追加しておりますので、こちらもぜひご覧ください👇👇👇
コメント