Cocoonアイコンボックスをおしゃれにカスタマイズ｜クリックで簡単デザイン切り替え

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

しかし標準状態ではデザインが1種類のみで、記事内容に合わせて使い分けたいと感じることもあるのではないでしょうか。

そこで、この記事ではアイコンボックスに複数のカスタムデザインを追加し、編集画面からワンクリックで切り替えられるカスタマイズ方法を紹介します。

Cocoonでデザインの自由度を高めたい方に向けた内容で、当サイトでも実際に使用しているカスタマイズです。

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

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

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

カスタムスタイルを追加し、サイドバーからクリック操作だけで簡単に切り替え可能。これによりブロック単位で異なるデザインを自由に組み合わせられます。

Cocoon標準

Cocoonには標準で「アイコンボックス」が用意されており、10種類のアイコンが選べます。

背景色やアイコン色はテーマ設定に準拠します（固定）。標準デザインはシンプルで使いやすいですが、CSSを少し編集するだけでサイトの雰囲気に合わせたおしゃれなデザインに変身。

カスタムスタイル一覧

どのスタイルも、Cocoonの標準色設定（アイコン色・背景色）を活かしつつ、レイアウトと装飾を最適化しています。以下、実際の表示サンプルを掲載しますので導入の参考にしてください。

枠あり

• 四角いボックスでスッキリ
• アイコンサイズを小さくし、モバイルでもボックス左側に表示

背景透明

• 外枠はあるが背景色なしでミニマル
• 情報をさりげなく伝えたいときに最適

枠なし

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

上枠のみ

• 付箋風のデザインで、上枠だけを強調
• シンプルながらアイコンが目立つ

左枠のみ

• 左枠だけを強調した付箋風デザイン
• 内容をしっかり目立たせたいときに有効

丸アイコン・枠あり

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

丸アイコン・枠なし

• 背景色あり（外枠なし）、アイコンが左上に表示
• 文章中で目立たせたいコメントや注意書きに最適

タブ見出しでも活用可能

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

• 選べるアイコンが豊富
• ボーダー色・背景色が自由に設定できる
• 有料テーマSWELLでも使われるデザインで使い勝手抜群

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

モバイル表示・アイコン変更・Font Awesome設定

モバイル表示の改善

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

アイコン変更

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

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

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

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

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

ここから先は、紹介してきたデザインをそのまま使える 「完成版コード」 をまとめた有料パートです。

「設定に迷わず、確実に動く形で導入したい」方向けに、動作確認済み・コピペで使えるコードを整理して公開しています。

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