コンテンツのまとまりごとに背景色や区切り線をつけてグループ分けする時に便利なブロックです。
ブロックごとに余白の設定をしたり、ふわっと表示されるアニメーションをつけることもできます。
ブロックサンプル
サンプル
セクションに背景画像を設定して、その上にグラデーションを重ねることもできます。
ちょっと見栄えのいいコンテンツが簡単に作れます。
区切り線サンプル
セクションの上下に三角形や波線、斜線の区切り線を設定できます。
区切り線のサイズには最大・最小値を設定でき、モバイル表示とデスクトップ表示で区切り線の大きさを変えられます。
セクションの上下に三角形や波線、斜線の区切り線を設定できます。
区切り線のサイズには最大・最小値を設定でき、モバイル表示とデスクトップ表示で区切り線の大きさを変えられます。
セクションの上下に三角形や波線、斜線の区切り線を設定できます。
区切り線のサイズには最大・最小値を設定でき、モバイル表示とデスクトップ表示で区切り線の大きさを変えられます。
アニメーションサンプル
このセクションは画面内に入ってからふわっと表示されます。
セクションブロックの設定で、スクロールに合わせたアニメーションの設定ができます。
その他のサンプル
その他、セクションブロックと他のブロックを組み合わせてできるサンプルなどはこちらのページで紹介しています▼
セクションブロックの設定
| 設定 | 説明 |
|---|---|
| ■ツールバー | |
| 画面幅まで広げる | セクション内のコンテンツを画面幅いっぱいに引き伸ばす設定 ※全幅設定のときのみ有効にできる設定 |
| ■余白設定 | |
| 余白設定（外側） – 上側 | セクション外側の余白 – 上側 (margin-top) 歯車アイコンクリックでPC-モバイルの余白を設定可能 |
| 余白設定（外側） – 下側 | セクション外側の余白 – 下側 (margin-bottom) 歯車アイコンクリックでPC-モバイルの余白を設定可能 |
| 余白設定（内側） – 上側 | セクション内側の余白 – 上側 (padding-top) 歯車アイコンクリックでPC-モバイルの余白を設定可能 |
| 余白設定（内側） – 下側 | セクション内側の余白 – 下側 (padding-bottom) 歯車アイコンクリックでPC-モバイルの余白を設定可能 |
| 余白設定（内側） – 左側 | セクション内側の余白 – 下側 (padding-left) 歯車アイコンクリックでPC-モバイルの余白を設定可能 |
| 余白設定（内側） – 右側 | セクション内側の余白 – 下側 (padding-right) 歯車アイコンクリックでPC-モバイルの余白を設定可能 |
| ■背景色・オーバーレイ | |
| 背景色 | セクション背景色 単色とグラデーションを設定可能 |
| 不透明度 | 背景色の不透明度 |
| サイズ・配置 | 背景レイヤーのサイズ・配置の変更 ON-OFF |
| サイズ – 幅 | 背景レイヤーの幅 |
| サイズ – 高さ | 背景レイヤーの高さ |
| 配置 – 上下 | 背景レイヤーの配置 上下 上・下どちらか選択と位置(px,%) |
| 配置 – 左右 | 背景レイヤーの配置 左右 左・右どちらか選択と位置(px,%) |
| ■背景色・動画 | |
| 背景画像・動画 | 背景画像または動画の設定 |
| 背景パターン | 背景画像にパターン画像を使う場合の設定 |
| 背景パターン – オーバーレイ | 背景画像をオーバーレイより前に重ねる |
| 背景パターン – 背景画像の不透明度 | 背景パターン画像の不透明度 ※背景パターン – オーバーレイがONの場合に設定可能 |
| ■枠線設定 | |
| 枠線サイズ | 枠線の太さ(px) |
| 枠線スタイル | 枠線のスタイル ※背景色と合わせて設定する場合、直線以外を選択するときれいに表示されません。背景色・背景画像と直線以外を使う場合はyStandard Toolboxのボックスブロックをご利用ください。 |
| 枠線色 | 枠線の色 |
| ■文字設定 | |
| 文字色 | セクション内テキストの文字色 |
| ■区切り線（上） ■区切り線（下） | セクション上下に表示できる区切り線 上下とも設定内容は同じ |
| 区切り線 – タイプ | 区切り線のタイプ |
| 区切り線 – 左右反転させる | 区切り線の表示を左右反転させる |
| 区切り線 – レベル | 区切り線のサイズ、角度等の大きさ 歯車アイコンクリックでPC-モバイルのレベルを設定可能 |
| 区切り線 – 色 | 区切り線の色 |
| ■コンテンツ幅設定 | |
| コンテンツ部分の最大幅 | セクション内コンテンツの最大幅 |
| ■セクション高さ設定 | |
| セクション高さ – 画面と同じ高さにする | セクションを表示画面と同じ高さにする |
| セクション高さ – セクション最小高さ | セクションの高さの最小値を設定 |
| ■アニメーション設定 | |
| アニメーション種類 | 画面内に入ったときに実行するアニメーションの種類 |
| アニメーション速度 | アニメーション開始〜終了までの時間 |
| アニメーション開始までの時間 | 画面に入ってからアニメーション開始するまでの時間 |
| ■HTMLタグ設定 | |
| HTMLタグ設定 | セクションブロックのHTMLタグ種類 |