簡単に、配置したブロック全体に段落スタイルを適用する方法

Cocoonカスタマイズ集
この記事は約2分で読めます。
記事内に広告が含まれています。

はじめに

「段落」ブロックには専用の[C] スタイルがありますが、「段落」ブロック自体は他のブロックを内包できません。

そこで、複数のブロックに[C] スタイルを適用できるようにします。

この記事では、この方法について説明します。

実装手順

Gutenbergエディター

以下の手順で作成します。

  1. 複数のブロックを選択し「グループ化」とします。
  2. 高度な設定→追加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-stitch-box
  • かぎ括弧
  • is-style-square-brackets-box
  • 角括弧
  • is-style-parenthetic-box
  • 交差点
  • is-style-cross-line
  • ずれた二重線
  • is-style-p-style-08
  • 角三角
  • is-style-triangle-box
  • クリップ
  • is-style-clip-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

さいごに

今回紹介した方法を使えば、「案内ボックス」に「段落」スタイルを適用し、他のブロックを内包できるようになります。
これにより、より柔軟なレイアウトが可能となり、デザインの自由度が広がります。

タイトルとURLをコピーしました