「アイコンボックス」ブロックのアイコン、ボーダー色をスタイル設定から変更する方法

簡単にアイコンボックスのアイコンを変更する方法

以前、説明した通りCSSを追加する必要なく、Cocoonの既存「アイコンボックス」ブロックのアイコンを簡単に変更できます。

簡単に、「アイコンボックス」ブロックのアイコンを変更する方法

「アイコンボックスのアイコンを変更する方法」を解説。CSSを使わず、Gutenbergエディターの追加CSSクラスにFont Awesomeのアイコン名を指定する方法や、アイコンボックス・段落ブロックで変更できるアイコン、設定時の注意点を分...

ss1.xrea.com

WordPress 7.0の「追加CSS」を活用する方法

WordPress 7.0以降、ブロックごとに直接CSSを記述できる「追加CSS」機能が導入されました（図3参照）。
この機能を活用することで、CSSファイル（style.css）を編集したり追加クラスを定義したりすることなく、エディタ上だけでアイコンや配色の変更が完結します。

完成イメージ

実装手順

アイコンのみを変更

以下のコードを追加CSSに追加します。
アイコンだけを手軽に別のもの（例: \f0a1）へ差し替えます。

&::before {
  content: '\f0a1';
}

アイコン・背景色・ボーダー色をまとめて変更

以下のコードを追加CSSに追加します。
アイコンの変更に加え、ボーダー色とそれに連動した薄い背景色を一括で設定します。

& {
  --border-color: #1e50a2;
  background-color: color-mix(in srgb, var(--border-color), #fff 95%);
  border-color: var(--border-color);

  &::before {
    border-color: var(--border-color);
    color: var(--border-color);
    content: '\f0a1';
  }
}

各方法のメリット・デメリット

各カスタマイズ手法の特徴を表にまとめました（表1参照）。
ご自身の環境や目的に合わせて最適な方法を選択してください。

さいごに

今回紹介した方法を使えば、Cocoon標準の「ラベルボックス」ブロックを活用して、柔軟にアイコンやボーダー色を設定できるデザインが可能になります。