サイト型トップページの作り方を公開しています！Check

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

アイキャッチ｜アイコンボックス Cocoon
2024年09月29日
Cocoon
デザイン切り替え
記事内に広告が含まれています

2025.8.26　デザインと実装コードを見直し、修正をおこないました。

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

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

このカスタマイズでできること
  • ワンクリックでスタイル切り替え
    サイドバーから簡単に、8種類のデザインを自由に選べます。
  • 複数スタイルを同ページ内で活用
    情報の種類や重要度に応じて、枠あり・枠なし・丸アイコンなどを使い分け。おしゃれで読みやすいページになります。
  • 簡単導入、作業時間わずか5分
    PHPとCSSをコピペするだけで設定完了。サイト全体で繰り返し使えます。

このカスタマイズの完成コードは記事後半で有料公開中。

当サイトでも愛用中のアイコンボックスカスタマイズで、有料テーマ並みのデザインを簡単に実現！実装例でビフォーアフターを確認しながら、Cocoonの可能性を広げましょう。

＼先に完成コードを見たい方はこちら／
実装手順はこちらで公開中
スポンサーリンク

About meこの記事を書いた人

はるみです
吹き出し／女性

ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。

  • ドメインパワー : 40（2025年8月時点）
  • 2023年より有料記事公開
    累計460件（月間約20件）のご購入実績
  • カスタマイズを丁寧にサポート

Cocoonアイコンボックス｜デフォルトデザイン

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

情報(i)

質問(?)

アラート(!)

メモ

  • 情報 (i)
  • 質問 (?)
  • アラート (!)
  • メモ
  • コメント
  • OK
  • NG
  • GOOD
  • BAD
  • プロフィール

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

「色はそのまま、印象だけ変えたい」方に最適です。

スポンサーリンク
目次に戻る

こんなデザインが可能に！Cocoonアイコンボックスのカスタマイズ例

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

カスタムスタイル一覧

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

ひとつでも「これいいかも！」と思ったスタイルがあれば、ぜひ試してみてください。

枠あり

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

情報(i)

質問(?)

アラート(!)

メモ

背景透明

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

情報(i)

質問(?)

アラート(!)

メモ

枠なし

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

情報(i)

質問(?)

アラート(!)

メモ

上枠のみ

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

情報(i)

質問(?)

アラート(!)

メモ

左枠のみ

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

情報(i)

質問(?)

アラート(!)

メモ

丸アイコン・枠あり

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

情報(i)

質問(?)

アラート(!)

メモ

丸アイコン・枠なし

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

情報(i)

質問(?)

アラート(!)

メモ

以上のカスタムデザインは、記事後半でPHP＋CSSの実装方法を有料公開しています。

＼この記事のデザインを5分で導入／
完成コードを購入する

応用｜タブ見出しでも活用可能

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

見出し

タブ見出しボックスを活用した例

＼タブ見出しボックスで使うメリット／
  • 選べる記号が豊富
  • ボーダー色・背景色の設定可能
  • 有料テーマSWELLでも採用されるデザインで使い勝手抜群

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

Cocoonタブ見出しボックスを有料テーマ風に！簡単カスタマイズでデザイン切り替え
Cocoonの「タブ見出しボックス」はシンプルで使いやすいですが、もっとおしゃれにしたい、デザインを自由に使い分けたいというニーズに応えるカスタマイズがあります...
turicco.com

こだわりポイント｜モバイル表示・アイコン変更・Font Awesome設定

モバイル表示の改善

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

BEFORE

アイコンボックス（モバイル）

AFTER

アイコンボックス（モバイル）

アイコン変更

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

BEFORE

Cocoonデフォルトのメモアイコン

AFTER

カスタマイズ後のメモアイコン

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

スポンサーリンク
目次に戻る

Cocoonアイコンボックスの使い方

Cocoonのアイコンボックスは、クリック操作だけで直感的に使える便利なブロックです。以下の手順で簡単に設定できます。

  • Step1
    ブロックを追加

    ブロックエディタで「＋」ボタンをクリックし、「アイコンボックス」と検索して追加します。アイコン付きのボックスがページ内に挿入されます。

  • Step2
    スタイルを選ぶ

    サイドバーの「ブロック」タブ → 「スタイル」からお好みのデザインをクリック。

    ・枠ありで情報を強調
    ・背景透明でミニマルに
    ・丸アイコンで柔らかい印象に
    といったように、用途に応じて即座に切り替えられます。

    選んだスタイルはプレビュー画面で即時反映されます。

  • Step3
    アイコンタイプを設定

    「情報」「注意」「質問」「OK」など10種類以上のアイコンが用意されているので、内容に合ったものを選びましょう。（例：ヒントには💡、注意事項には⚠️を設定）

  • Step4
    コンテンツを入力

    ボックス内にテキストを入力すれば完成です。改行やリスト、リンクなども利用できるため、簡単な説明から詳細な解説まで柔軟に対応できます。

スポンサーリンク
目次に戻る

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

イメージ画像／ポイント

カスタマイズは基本的にコードを貼り付けるだけで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。

  • スキンによる影響
    • この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
  • 子テーマを利用
    • コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
  • バックアップの推奨
    • 念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
    • 関連記事 バックアップ＆復元方法
  • サーバー設定の影響
    • WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。
スポンサーリンク
目次に戻る

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

ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。

PHPの設定

目的：「スタイル切り替え機能」を追加

記述場所：子テーマの functions.php

CSSの設定

目的：「各スタイルのデザイン」を定義

記述場所：子テーマのスタイルシート (style.css)

  1. WordPress管理画面で 「外観」→「テーマファイルエディター」 を開きます。
  2. 子テーマ（Cocoon Child） が選択されていることを確認します。
  3. 右側のファイル一覧から 「Cocoon Child: テーマのための関数 (functions.php)」 をクリックします。
  4. 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記します。
phpの記述について
  1. WordPress管理画面で 「外観」→「テーマファイルエディター」 を開きます。
  2. 子テーマ（Cocoon Child）が選択されていること を確認します。
  3. ファイル一覧から 「Cocoon Child: スタイルシート (style.css)」 を開きます。
  4. 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加します。
CSS編集／スタイルシート

参考記事 Cocoonカスタマイズ｜HTML・CSSの編集とワードプレスをバックアップする方法

  • PHP＋CSSの完成版コード（コピペで導入可能）
  • 8種類のデザインをサイドバーからワンクリック切り替え

作業時間はわずか約5分。最短で「完成形のアイコンボックス」を導入したい方はぜひご活用ください。

特定商取引法に基づく表記

■ サイト名
Turicco

■ サイトURL
https://turicco.com/

■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/

■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。

■ 納品方法
購入完了後、対象の記事が閲覧可能になります。

■ お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済

※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。

■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。

■ 販売価格
500円（税込）

Comment 記事の感想を書き込んでいただけると幸いです

タイトルとURLをコピーしました