yStandard Blocksのセクションブロック

セクションブロック

ブロックを入れ子にしてひとまとめにすることができるブロックです。

1カラムテンプレートとセクションブロックの全幅設定を併用することで、情報のまとまりごとに背景色を切り替えたレイアウトのページなどを簡単に作成できます。

特徴

区切り線

セクション上下をななめ線・波線・三角形で区切ることができます。

アニメーション

設定から簡単にアニメーションを設定できます。

画面いっぱいに表示

画面の高さいっぱいにセクションを表示することもできます。

設定項目

  • セクション上下余白(内側・外側)
  • セクション内の左右余白
  • 背景色
  • 文字色
  • 背景画像
  • 背景画像の固定表示(パララックス表示)
  • コンテンツ部分の最大幅
  • セクションを画面いっぱいの高さに表示
  • セクションの最小高さ設定
  • アニメーション高さ設定
  • セクションのHTMLタグ種類
  • HTMLアンカー

セクションサンプル

全幅設定に背景色を合わせて、情報のまとまり毎に背景色を切り替えることでいい感じの見た目を作りやすくなると思います。

余白の大きさはセクション外側と内側でそれぞれ設定できます。

背景画像を設定したセクション。

画像の上に重ねる色と透過具合も変更できます。

更には背景パララックスもボタン1つで簡単設定できます。

(※ブラウザによってはパララックス表示されないものもあります。)

ここからは区切り線のサンプルです。

斜め区切りなどでちょっと目を引くコンテンツ作りがしやすくなります。

斜め線もOK

三角形の区切りを使えば、手順の説明などにも使えるかもしれません。

アニメーションも設定できます。

スクロールに合わせてふわっと表示させるアニメーションを3種類用意しました。

そして、画面いっぱいに表示させる高さの設定もあります。

縮小しながら表示するアニメーションは画像背景と合わせるといいかもしれません。