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

はじめに

「アイコンボックス」ブロックでは、アイコンのスタイル選択が可能ですが、汎用ボックスのようにアイコンやボーダー色をスタイル設定から自由に変更することはできません（図1参照）。

そこで、「ラベルボックス」ブロックを活用し、ボーダー色やアイコンを自由に選択できるようにします。

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

いつの間にかコードを、以下でスタイルボタン付きで有料公開？

Cocoonラベルボックスのカスタマイズ方法｜CSSコピペでおしゃれにするデザイン例

Cocoonのラベルボックスは便利ですが、ラベルの後ろに線が見えて少し野暮ったい長いラベルだとスマホで崩れやすいデザインのバリエーションが少なく使い分けしづらいと感じることもあります。この記事では、CocoonラベルボックスをCSSでおしゃ...

完成イメージ

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下の手順で設定します。
1. 「ラベルボックス」ブロックを配置します。
2. 高度な設定→追加CSSクラスにmy-icon-boxと入力します。
3. スタイル設定でアイコンやボーダー色を設定します。
アイコンの色と背景色は、ボーダー色に従って変更されます。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

このコードは、Cocoon標準の「ラベルボックス」ブロックを前提としています。

.my-icon-box {
  position: relative;

  &.cocoon-block-label-box .label-box-content {
    background-color: color-mix(in srgb, var(--cocoon-custom-border-color), #fff 95%);
    border-radius: 4px;
    border-width: 1px;
    margin: 0;
    padding: 20px 20px 20px 72px;
  }

  .label-box-label {
    display: grid;
    inset: 0 auto 0 10px;
    margin: 0;
    padding: 0;
    place-content: center;
    position: absolute;
    text-shadow: none;

    &::before {
      border-right: 1px solid var(--cocoon-custom-border-color);
      color: var(--cocoon-custom-border-color);
      font-size: 34px;
      line-height: 1;
      padding-right: 0.15em;
      text-align: center;
      width: 44px;
    }

    .label-box-label-text {
      display: none;
    }
  }
}