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

Cocoonアイコンボックスは、アイコンとテキストを組み合わせた魅力的なボックスデザインを簡単に作成できます。補足情報に便利ですが、デフォルトではデザインが固定され１パターンのみ。

この記事では、初心者でも5分で導入できる方法で、ワンクリックで8種類のスタイリッシュなデザインを切り替えるカスタマイズを紹介します。

このカスタマイズの完成コードは記事後半で公開しています。

当サイトでも愛用中のアイコンボックスカスタマイズで、有料テーマ並みのデザインを簡単に実現します。

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

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

Cocoon標準

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

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

カスタムスタイル一覧

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

枠あり

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

背景透明

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

枠なし

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

上枠のみ

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

左枠のみ

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

丸アイコン・枠あり

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

丸アイコン・枠なし

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

タブ見出しでも活用可能

丸アイコン・枠ありのスタイルは、カスタマイズしたタブ見出しボックスでも使えます。

• 選べる記号が豊富
• ボーダー色・背景色の設定可能
• 有料テーマSWELLでも採用されるデザインで使い勝手抜群

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

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

モバイル表示の改善

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

アイコン変更

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

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

Cocoonアイコンボックスの基本操作（はじめての方向け）

この記事ではカスタマイズ方法を中心に解説していますが、はじめて使う方でも迷わないように基本操作を簡単にまとめておきます。

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

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

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

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

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

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

最短で導入したい方はぜひご活用ください。