Cocoonアイコンボックスのカスタマイズ方法｜デザイン切替・色変更も完全対応

Cocoonのアイコンボックスは、補足説明や注意書きを分かりやすく伝えられる便利なブロックです。

ただし標準状態ではデザインの自由度が限られており、

• 記事ごとに雰囲気を変えたい
• 色をブランドカラーに合わせたい
• サイト全体のトーンを統一したい

と感じることもあるのではないでしょうか。

そこでこの記事では、次のようなカスタマイズ方法を紹介します。

完成コードは記事後半で公開しています。

すぐに使いたい方、確実に動く形で導入したい方はぜひご活用ください。

アイコンボックス｜Cocoon標準仕様

Cocoonには標準で10種類のアイコンが用意されています。

背景色やアイコン色はテーマ設定に準拠（固定）です。

シンプルで使いやすい反面、「サイトの世界観を出す」にはやや物足りない部分もあります。

選べるデザイン一覧｜アイコンボックスのカスタマイズ例

このカスタマイズでは、用途別に使える複数デザインを追加しています。

すべて編集画面から選択可能。同じ記事内でも用途に応じてブロック単位で使い分けできるため、読みやすさがアップします。

シンプル

• デフォルトをベースにしたシンプルスタイル
• アイコンを小さく、モバイルでも左側に自然に配置

背景透明

• 背景色なしでスッキリ
• 情報をさりげなく伝えたいときに最適

枠なし

• 外枠がなく柔らかい印象
• 補足情報や注釈に向いている

付箋風（上線）

• 上線を強調した付箋風
• シンプルながらアイコンが目立つ

付箋風（左線）

• 左線を強調した付箋風
• 内容をしっかり目立たせたいときに有効

丸アイコン・枠あり

• アイコンを左上に表示、背景色なし
• スッキリ洗練された印象で落ち着きのあるデザイン

丸アイコン・枠なし

• 丸アイコンを左上に表示、背景色のみ
• 文章中で目立たせたいコメントや注意書きに最適

表示改善・拡張カスタマイズ

タブ見出しでも活用可能

丸アイコン・枠ありのスタイルは、タブ見出しボックスをカスタムしても作れます。

• 選べるアイコンが豊富
• ボーダー色・背景色がブロック単位で設定できる
• 他テーマでも採用されている定番デザイン

タブ見出しのカスタマイズ方法は別記事で紹介しています

モバイル表示の改善

デフォルトではスマホ表示でアイコンがテキストの上に表示されますが、カスタマイズでPCと同じ横並びに調整。スマホでも違和感なく見やすくなります。

アイコン変更

標準の「メモ」アイコンを、よりシンプルで親しみやすいデザインに変更。

カスタムアイコンを使用する場合は、Cocoon設定 → 全体 → 「サイトアイコンフォント」 → Font Awesome 5 にチェックを入れてください。

Cocoonアイコンボックス｜カスタマイズの注意点と特徴

このカスタマイズは基本的にコピペで安全に導入でき、Cocoon標準環境で動作確認済みです。ただし、利用しているスキンやサーバー設定によっては挙動が変わる場合があります。作業前に以下のポイントを押さえておくと安心して進められます。

アイコンボックスのカラーを変更する方法

カラーはすべてCSS変数で管理しています。

• アイコンの種類ごとに色設定ができます
• サイト全体に一括適用されます

変更したい場合は、掲載コードの「カラー定義エリア」だけを編集してください。

/* カラー定義エリア（ここだけ触ればOK） ------------------*/
:root {

  /* 通常アイコン */
  --info-color: #87cefa;    /* 情報（i） */
  --question-color: gold;   /* はてな（?） */
  --alert-color: #f3aca9;   /* 注意・警告 */
  --memo-color: #7ad0b6;    /* メモ */
  --comment-color: #999999; /* コメント */

  /* 評価系アイコン */
  --ok-color: #3cb2cc;     /* OK */
  --ng-color: #dd5454;     /* NG */
  --good-color: #98e093;   /* Good */
  --bad-color: #eb6980;    /* Bad */

  /* プロフィール */
  --profile-color: #999999; /* プロフィール枠 */

  /* 共通設定 */
  --icon-white: #ffffff; /* アイコン内の文字色 */
  --box-shadow: 1px 1px 1px rgb(0 0 0 / 0.1); /* ボックス影 */
}

掲載コードはCocoonの固定値（デフォルト）にしています。

たとえば「情報（i）」の色を変えたい場合は、

--info-color: #8eaae7;

のようにカラーコード部分を一ヶ所書き換えるだけでOKです。

※全角スペースや不要な文字が入らないように注意してください。（エラーの原因になるため）

背景色は自動で淡くなります

設定したベースカラーをもとに、ボックス背景色は自動で薄い色に調整されます。

• 枠とアイコンははっきり
• 背景はやわらかく

というバランスが自然に整います。

色を変更してもレイアウトが崩れることはありません。

Cocoonアイコンボックスの実装手順｜完成コードのご案内

ここから先は、実際に動作確認済みの完成コードをそのまま使える形でまとめています。

1. functions.php に PHP コードを貼り付け
2. style.css に CSS を貼り付け
3. サイドバーで希望のスタイルを選択
4. プレビューで表示を確認 → 完成！

以下は有料コンテンツのご案内および特定商取引法に基づく表記です。