コンポーネントサンプル

コンポーネントサンプル

Gutenbergの「グループ」ブロックを利用することで、同一要素に複数の異なるデザインを適用できるようにコーディングを行っています。

「グループ」ブロックは、HTMLではそのままdivタグとして出力されますが、「高度な設定」セクションに「追加 CSS クラス」項目があります。この追加CSSのボックスにスタイルを指定することでコンポーネントのデザインを指定することが可能です。

また、同様に、特定のGutenbergブロックに対して「追加 CSS クラス」を指定することで、固有のデザインが適用できるものもあります。

コンポーネントには大きく「1. サイト全体でデザイン固定の共通のコンポーネント」と、「2. 追加CSSを指定することでデザインの変更ができるコンポーネント」、「2. 特定の追加CSSクラスの配下（divタグの内側）でのみデザインが変更されるコンポーネント」の3種類があります。

サイト全体で共通のコンポーネントの例

H2見出し

追加CSSを指定することでデザインの変更ができるコンポーネントの例

• 箇条書きのバレットをアスタリスク「※」にする。

特定の追加CSSクラスの配下でのみデザインが変更されるコンポーネントの例

通常のH3見出し

2を指定する場合は、グループブロックを階層化（ネスト）させることで、複数のデザイン条件が適用されたコンポーネントを配置することができます。