Cocoonアイコンボックスをおしゃれにカスタマイズ｜デザイン切替・色変更も対応

Cocoonのアイコンボックスは便利ですが、使っているうちに

• 補足も注意点も同じ見た目になる
• パソコンで見るとアイコンが大きいかも
• 他のサイトと差別化したい

と感じることがありました。

そこで作ったのが今回のカスタマイズです。

この記事では、実際に運用しているデザイン例やカスタマイズ内容を紹介しています。

完成コードは記事後半で公開しています。すぐに導入したい方や確実に再現したい方はぜひ活用してください。

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

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

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

シンプルで使いやすい反面、アイコンの大きさが気になったり、「サイトの世界観を出す」にはやや物足りない部分もあります。

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

このカスタマイズでは、用途別に使える複数デザインを追加。すべて編集画面から選択でき、補足・注意・メモなどを役割ごとにデザインを使い分けられます。

この記事用に作ったサンプルではなく、現在も実際の運営サイトで使い続けているコードです。使わなくなったデザインは整理し使用頻度が高いスタイルだけを残しています。

使用例：

• シンプル→ 補足説明
• 背景透明→ 記事途中のワンポイント
• 付箋風→ 読者に覚えてほしいポイント
• 丸アイコン→ 注意事項や重要情報

シンプル

• 補足説明向け
• 普段使いしやすい定番デザイン

背景透明

• 記事途中のワンポイント向け
• 本文の流れを邪魔せず挿入しやすい

枠なし

• 補足情報や注釈向け
• 柔らかく自然な印象で本文になじみやすい

付箋風（上線）

• 覚えてほしいポイント向け
• シンプルながらアイコンを目立たせやすい

付箋風（左線）

• 重要な補足説明向け
• 内容をしっかり目立たせたいときに使いやすい

丸アイコン・枠あり

• 注意事項向け
• CTA前の補足や確認事項に使いやすい

丸アイコン・枠なし

• コメントや注意書き向け
• 文章中でも自然に目立たせやすい

このカスタマイズで改善されるポイント

モバイル表示の改善

気になっていたのがスマホ表示です。

標準状態だとアイコンが上に回り込み、文章との一体感が少し崩れてしまいます。

このカスタマイズでは、スマホでもPCと近い見た目になるよう調整しています。読者から見れば小さな違いですが、記事全体の読みやすさや完成度は変わります。

アイコン変更

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

Cocoon設定 → 全体 → 「サイトアイコンフォント」 → Font Awesome 5 にチェックを入れてください。

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

このコードでは、カラー定義エリアを変更するだけでアイコン・枠線・背景色をまとめて変更できます。

通常のように複数箇所のCSSを探して修正する必要はありません。

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

--info-color: #8eaae7;

のようにカラーコードを書き換えるだけです。アイコンごとに色を設定できるため、サイトカラーやブランドカラーにも合わせやすくなっています。

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

基本的にはコードをコピペするだけで導入でき、Cocoon標準環境で動作確認済みです。

Cocoonアイコンボックスの実装手順

ここまで紹介したデザインや表示改善は、PHPとCSSを貼り付けるだけでまとめて導入できます。

1つずつスタイルを作る必要はなく、編集画面から選択できる状態まで再現可能です。

実際に運営サイトで使用している運用版コードをそのまま掲載しています。

まずは完成形を導入し、必要に応じてカラーだけ調整する使い方がおすすめです。

カスタマイズ全体の流れ

1. 登録：codocコードクへ会員登録（初回のみお願いします）
2. 入力：有料エリアの内容をご自身で入力してください
3. 確認：プレビューで表示確認して完了です

販売者情報は 「特定商取引法に基づく表記」をご確認ください。