セクションブロック

セクションブロック

コンテンツのまとまりごとに背景色や区切り線をつけてグループ分けする時に便利なブロックです。

ブロックごとに余白の設定をしたり、ふわっと表示されるアニメーションをつけることもできます。

  • このページで紹介している機能ではプラグイン「yStandard Blocks」を使用しています。
    プラグインの詳細は yStandard Blocks ページをご覧ください。

ブロックサンプル

サンプル

セクションに背景画像を設定して、その上にグラデーションを重ねることもできます。

ちょっと見栄えのいいコンテンツが簡単に作れます。

区切り線サンプル

セクションの上下に三角形や波線、斜線の区切り線を設定できます。

区切り線のサイズには最大・最小値を設定でき、モバイル表示とデスクトップ表示で区切り線の大きさを変えられます。

セクションの上下に三角形や波線、斜線の区切り線を設定できます。

区切り線のサイズには最大・最小値を設定でき、モバイル表示とデスクトップ表示で区切り線の大きさを変えられます。

セクションの上下に三角形や波線、斜線の区切り線を設定できます。

区切り線のサイズには最大・最小値を設定でき、モバイル表示とデスクトップ表示で区切り線の大きさを変えられます。

アニメーションサンプル

このセクションは画面内に入ってからふわっと表示されます。

セクションブロックの設定で、スクロールに合わせたアニメーションの設定ができます。

その他のサンプル

その他、セクションブロックと他のブロックを組み合わせてできるサンプルなどはこちらのページで紹介しています▼

セクションブロック サンプル集
yStandard Blocksのセクションブロックとその他のブロックを組み合わせてできるレイアウトのサンプルを掲載しています。
wp-ystandard.com

セクションブロックの設定

設定説明
■ツールバー
画面幅まで広げるセクション内のコンテンツを画面幅いっぱいに引き伸ばす設定
※全幅設定のときのみ有効にできる設定
■余白設定
余白設定(外側) – 上側セクション外側の余白 – 上側 (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タグ種類