セクションブロック サンプル集

セクションブロック サンプル集

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

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

セクションブロックのマニュアルはこちら▼

セクションブロック
コンテンツのまとまりごとに背景色や区切り線をつけてグループ分けする時に便利なブロックです。 ブロックごとに余白の設定をしたり、ふわっと表示されるアニメーションを…
wp-ystandard.com

セクションを斜め線や波線で区切るサンプル

区切り線サンプル

サンプル説明サンプル説明サンプル説明サンプル説明サンプル説明サンプル説明サンプル説明

「区切り線(上)」「区切り線(下)」を使ってセクション上下を斜め線や波線で区切ったサンプル。

区切り線の形状・サイズ・色を選択すると区切り線が表示されます。

PCとモバイルで区切り線の大きさを調整できるなど、ちょっと細かなカスタマイズもできます。

セクションが画面内に入ったらふわっと表示されるサンプル

ふわっと表示されるサンプル

サンプル説明サンプル説明サンプル説明サンプル説明サンプル説明サンプル説明サンプル説明

「アニメーション設定」で「フェードイン」を選択したサンプル。

スクロールによってセクションが画面内に入ったらふわっと表示されます。

アニメーション開始までのタイミング(秒)やアニメーションの速度も調整できます。

画面幅まで広げる機能を使ったサンプル

サンプル見出し

サンプル説明サンプル説明サンプル説明サンプル説明サンプル説明

サンプル見出し

サンプル説明サンプル説明サンプル説明サンプル説明サンプル説明

サンプル見出し

サンプル説明サンプル説明サンプル説明サンプル説明サンプル説明

サンプル見出し

サンプル説明サンプル説明サンプル説明サンプル説明サンプル説明

全幅にしている時に設定できる「画面幅まで広げる」オプションをONにし、セクション内のコンテンツを画面幅いっぱいまで引き伸ばしたレイアウトのサンプル。

セクションの中にはyStandard Blocksのカスタムカラムブロックを追加し、「カラム間の余白を削除」で「余白なし」をONにします。

カラム内にはWordPress標準ブロックのカバーブロックを使い、画像を背景にしカバーブロック内に見出しや説明文などを追加しています。

サンプルのアイコン表示はyStandard Blocksのアイコンブロックを使っています。