概要
セクション領域にはさまざまなブロックを設置し、ページ内のコンテンツを充実させることができます。
セクション領域は複数設置することができ、「領域追加」から「セクション領域を追加」「タブ領域を追加」「カラム領域を追加」「スライダー領域を追加」の4つのタイプを選べます。
セクション領域：現在のセクション領域の下に、新しいセクション領域が追加されます。
タブ領域：タブで分けられた領域が生成されます。ブロック追加時にはどのタブかを選択した上で、ブロックの追加を行います。
カラム領域：カラムの数や比率を調整できる領域です。ブロックをより細かく設定したい場合などに便利です。
スライダー領域：ブロック単位でスライダーを設定できる領域です。画像だけでなく、コンテンツ（テキスト・ボタン・画像などを組み合わせた一つの塊）を丸ごと切り替えることができます。
また、「領域スタイル設定」から領域に対して背景色や背景画像、領域幅、枠線の設定などができます。
領域追加
セクション領域を追加
セクション領域を追加すると、現在の領域の下に新しいセクション領域が生成されます。
タブ領域を追加
タブ領域を追加すると、現在のセクション領域の下に、タブで分かれた領域が生成されます。
表示タブをクリックすると、ブロックを追加するタブ領域を切り替えられます。
タブ設定では、タブの追加やデザイン変更など、詳細な設定ができます。
タブ設定
「タブ設定」で「タブを追加」をクリックすると、新しいタブを作成できます。作成したタブの名称やリンクもここで設定できます。
※タブは最大100個まで作成できます。
※タブの順番はドラッグ＆ドロップで変更できます。
※タブの数を増やしすぎると、画面が圧迫されてデザインが崩れる可能性があります。実際の表示画面を確認しながら数を調整してください。
タブデザイン
タブのデザインを選択できます。
※デザインの数はテーマによって異なります。
カラム領域を追加
カラム領域を追加すると、現在のセクション領域の下に、複数のカラムに分かれた領域が生成されます。
設定から「カラム設定」を開くと、カラムの数や幅などを変更できます。
カラム領域設定
| カラム数 |
カラム領域に配置するカラムの数を入力できます。
※カラムサイズは 2 〜 6を入力してください。 |
| スマホ時のカラム |
スマホ表示時におけるカラムの並び方を「縦並び」または「横並び」から選択できます。 |
| カラム間の余白 |
カラム間の余白を設定することができます。 |
| 各カラムの幅 |
各カラムに対して幅を決めることができます。
| px |
カラム幅をpxで決定します。 |
| % |
カラム幅を%で決定します。 |
| auto |
カラム幅をオート設定します。 |
|
スライダー領域を追加
スライダー領域を追加すると、現在のセクション領域の下に、ブロック単位でスライダーを設定できる領域が生成されます。
表示タブをクリックすると、ブロックを追加するスライダー領域を切り替えられます。
スライダー設定では、スライドの追加やスクロール演出など、詳細な設定ができます。
スライダー設定
「スライダー設定」で「スライドを追加」をクリックすると、新しいスライドを追加できます。作成したスライドの名称はここで設定できます。
※スライドは最大100個まで作成できます。
※スライドの順番はドラッグ＆ドロップで変更できます。
デザイン
スライダーのデザインを選択できます。
※デザインの数はテーマによって異なります。
スライダー設定
スライダー設定では、スライダーの詳細を変更できます。
| スクロール演出 |
スクロール時のアニメーション効果を設定できます。
横スライド：対象が横方向にスライドして切り替わります。
クロスフェード：前後の画像が重なりながら、じわっと切り替わります。
|
| ループ再生を有効にする |
有効にするとスライダーがループ再生します。 |
| 自動スクロールを有効にする |
有効にすると自動的にスライダーがスクロールします。
| ●秒のスピードでスクロールする |
設定した速度でスライダーがスクロールします。 |
| ●秒毎にスクロールする |
設定した秒数で自動的にスライダーがスクロールします。 |
| 停止再生ボタンを表示する |
自動スクロールを一時停止・再開するためのボタンの表示のON/OFFができます。 |
|
| スワイプ操作を有効にする |
スワイプ操作ができるようになります。 |
| インジケーターを表示する |
インジケーターの表示のON/OFFができます。 |
| 左右の矢印を表示する |
左右の矢印の表示のON/OFFができます。 |
領域スタイル設定
| 背景色 |
領域の背景色を変更できます。 |
| 背景画像 |
領域の背景画像を設定できます。
（PC用） |
| 背景画像（SP） |
領域の背景画像を設定できます。
（スマホ用） |
| 最大幅 |
領域の幅を変更できます。 |
| 余白 |
領域の上下左右の余白を設定できます。PC、スマホそれぞれに対して設定可能です。 |
| 枠線の色 |
領域の枠線色を設定できます。 |
| 枠線の太さ |
領域の枠線の太さを変更できます。
|
| 角丸設定 |
領域の角を丸くできます。
「四隅とも同じにする」にチェックを入れることで同じ角丸の大きさに揃えることができます。 |
補足事項
領域を移動させることができないため、作成する際はページの構成を考慮しながら追加していく必要があります。
例えば、
- セクション領域
- タブ領域
- セクション領域
といった構成にしたい場合、まず、タブ領域を追加し、その下にもう一つセクション領域を追加します。
次に、元々タブ領域の下にあったブロックを、新しく追加したセクション領域にドラッグ＆ドロップで移動させてください。
このように、先に必要な領域を作成してから、ブロックを配置していくとスムーズに作業できます。
関連ページ
ページ編集画面｜機能ガイド｜LENSAhubサポート