はじめに
「段落」ブロックには専用の[C] スタイルがありますが、「段落」ブロック自体は他のブロックを内包できません。
そこで、複数のブロックに[C] スタイルを適用できるようにします。
この記事では、この方法について説明します。
実装手順
Gutenbergエディター
以下の手順で作成します。
- 複数のブロックを選択し「グループ化」とします。
- 高度な設定→追加CSSクラスに、後述の完成イメージに示すCSSクラス(例:
is-style-stitch-box)を入力します。
完成イメージ
- 薄背景
- is-style-light-background-box
- ストライプ
- is-style-stripe-box
- 方眼
- is-style-section-paper-box
- チェック
- is-style-checkered-box
- かぎ括弧
- is-style-square-brackets-box
- 角括弧
- is-style-parenthetic-box
- ずれた二重線
- is-style-p-style-08
- 角三角
- is-style-triangle-box
- ホチキス
- is-style-stapler-box
- ホチキス左上
- is-style-stapler-top-left-box
- 穴あけパンチ
- is-style-hole-punch-box
- 手書き風
- is-style-handwritten-box
- 上線
- is-style-border-top-box
- 付箋
- is-style-border-left-box
- 左吹き出し
- is-style-balloon-left-box
- 右吹き出し
- is-style-balloon-right-box
- 上吹き出し
- is-style-balloon-top-box
- 下吹き出し
- is-style-balloon-bottom-box
さいごに
今回紹介した方法を使えば、「案内ボックス」に「段落」スタイルを適用し、他のブロックを内包できるようになります。
これにより、より柔軟なレイアウトが可能となり、デザインの自由度が広がります。