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

Cocoon「アイコンボックス」のカスタマイズ方法|12種類のスタイルをサイドバーで切り替え

アイキャッチ|アイコンボックス Cocoon
Cocoon
記事内に広告が含まれています

もっと手軽に、ブロックのデザインを変えられたらいいのに…

そんな“あったらいいな”を叶えるカスタマイズを考えました。

この記事では、Cocoonテーマの「アイコンボックス」ブロックに12種類のカスタムスタイルを追加し、クリックだけで切り替え可能なデザイン性アップ術をご紹介します。

カスタマイズ内容
  • 簡単操作サイドバーから選ぶだけ
    クリック操作だけで12種類のデザインが選べます。
    • NEW 角丸スタイルを追加しました!!
  • 同一ページ内で複数のデザイン使用
    異なるデザインを同じページ内で自由に組み合わせできます。
  • 簡単な実装手順
    コード2か所の貼り付けで完了します(作業時間:約5分)。
    • 一度の設定で、サイト全体で繰り返し使えます。
      • 不要になった場合、追加したコードを削除することで元に戻ります。

有料テーマのような操作性が手軽に実現できます!

スポンサーリンク

この記事を書いた人

はるみです
吹き出し/女性
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー45(2025年5月現在)
  • 2023年~有料記事公開
    • →累計420件(月間約20件)購入いただいています

実装イメージ|Cocoonアイコンボックス

Cocoonのブロック「アイコンボックス」に複数のスタイルを追加し、サイドバーで切り替えできるようにします。

以下動画は操作イメージです。

すべて同じ「アイコンボックス」を表示し、それぞれスタイルを切り替えています。

サイドバーでクリックするだけ
スポンサーリンク

Cocoonアイコンボックスのスタイル

デフォルトでは「アイコンボックス」は決まったデザインのみが提供されていますが、今回のカスタマイズにより自由にスタイルを選んで適用できるようになります。

選べるアイコンタイプ

Cocoonでは、以下10種類のアイコンタイプがデフォルトで用意されています。選んだタイプごとに背景色・アイコン色は固定されています(※色変更はCSSで対応可)。

  1. 情報(i)
  2. 質問(?)
  3. アラート(!)
  4. メモ
  5. コメント
  6. OK
  7. NG
  8. GOOD
  9. BAD
  10. プロフィール

【基本】デフォルトスタイル

Cocoonデフォルト:通常のデザイン

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフィール

機能的にはデフォルトでも十分ですが、少しアイコンを小さく、余白を調整してスタイリッシュにしてみます!

【追加】カスタムスタイル一覧

どのスタイルも、Cocoonの標準色設定(アイコン色・背景色)を活かしながら、レイアウト・装飾を最適化しています。

スタイル 1:シンプル&ベーシック

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

四角い枠と適度なアイコンサイズで情報をすっきり整理。無駄を省き、目立たせたいアイコンとテキストをバランス良く配置できます。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフ

スタイル 2:外枠なし

  • 外枠がなく、柔らかいイメージ
  • アイコンサイズを小さくし、モバイルでもボックスの左側に表示

枠線をなくすことでふわっとした印象を演出。ちょっとした補足に最適。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフ

スタイル 3:背景色なし

  • 背景色なし
  • 外枠はあるが、背景色が透明でミニマルな印象
  • アイコンサイズを小さくし、モバイルでもボックスの左側に表示

シンプルながらもスタイリッシュな印象を与えます。情報をさりげなく伝えたいときにおすすめ。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフ

スタイル 4:付箋風(上枠のみ)

  • 上枠のみが強調された付箋風のデザイン

シンプルな付箋風ながらもアイコンをしっかり目立たせます。スタイル5とお好みで使い分けられます。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフ

スタイル 5:付箋風(左枠のみ)

  • 左枠のみが強調された付箋風のデザイン

よく見かけるシンプルな付箋風ながらも内容をしっかり目立たせます。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフ

スタイル 6:アイコン強調

  • 背景色あり(外枠なし)
  • アイコンがボックスの外側にはみ出して表示され、際立つデザイン

丸く際立つアイコンがアクセントとなり、文章の中で目を引きます。特に強調したいコメントや注意書きにおすすめ。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフ

スタイル 7:アイコン強調(背景色なし)

  • ボックス背景色なしのすっきりとしたデザイン
  • アイコンがボックスの左上位置に表示され、際立つデザイン

背景色なしでスッキリと洗練されたデザイン。スタイル6のアクセントを残しつつ、少し控えめで落ち着いた印象を持たせます。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフ

【応用】さらに汎用的に!タブ見出しでも作れる

スタイル 7については、タブ見出しボックスのカスタマイズでも同様のボックスが使えます。

見出し

タブ見出しボックス

見出し

カスタマイズしたタブ見出しボックス(スタイル6)

ポイント
  • 選べる記号種類が多い
  • ボーダー色、背景色が設定可能

有料テーマSWELLでも使われているボックスデザインで、より使い勝手が抜群です。

▶ Cocoonのタブ見出しをおしゃれにカスタマイズする方法は別記事で詳しく解説中。

【派生】スタイルに“角丸”を追加するアレンジも可能

同じレイアウトでも、ボックスの角を丸くするだけで印象が一変します。以下は「角丸アレンジ」を適用したパターンです。

スタイル 1(丸み)

スタイル1 のボックス角に丸みをつけたデザインです。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフ

スタイル 2(丸み)

スタイル2 のボックス角に丸みをつけたデザインです。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフ

スタイル 3(丸み)

スタイル3 のボックス角に丸みをつけたデザインです。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフ

スタイル 6(丸み)

スタイル5 のボックス角に丸みをつけたデザインです。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフィール

スタイル 7(丸み)

スタイル7 のボックス角に丸みをつけたデザインです。

情報(i)

質問(?)

アラート(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフィール

【技術的ポイント】こだわりのカスタマイズ仕様

当カスタマイズの大きなポイントです。

モバイル時の表示調整

デフォルトでは、スマホ表示時にアイコンがテキストの上に配置されてしまいますが、カスタマイズによりPCと同じく横並びに調整しています。

アイコンが上部に表示される
アイコンはテキストと横並び
アイコンボックス/モバイル表示

PCと同じ横並びだとすっきり!

メモアイコンの変更

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

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

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

Font Awesome 5の設定

カスタムアイコンを表示するには、以下の設定が必要です。

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

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

  • Step1
    ブロックメニューを選択

    ブロックエディタで「アイコンボックス」を選択します。

  • Step2
    お好みのスタイルを選ぶ

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

    選んだスタイルがすぐに反映されます。

  • Step3
    アイコンタイプ設定

    表示するアイコンを選択します。

  • Step4
    ボックスの内容を編集

    ボックス内にコンテンツを入力したら完成です。

スポンサーリンク

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

イメージ画像/ポイント

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

  • スキンによる影響
    • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによっては、CSSの重複等で意図しないスタイルになる場合があります。
  • 子テーマを利用
    • 必要なコードは必ず子テーマに記述してください。
  • バックアップの重要性
    • 編集前に必ずバックアップをおこなってください。
    • 特にPHPに記述ミスがあるとサイトが表示されなくなる可能性があるため、FTPソフト等で元に戻せるようにしておくと安心です。
  • PHPエラーが発生した場合の対処
エラー表示が出て保存できない場合
  • WAF設定
    サーバーのWAF(Web Application Firewall)がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。
  • ベーシック認証
    • サーバー側でアクセス制限(ベーシック認証)を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。
重大なエラーが発生した場合
  • 管理画面にも入れない場合
    • FTPソフトを使用し、バックアップデータ(編集前の子テーマfunctions.php)を上書きして復元します。

当記事ではコピペのみで完成しますが、バックアップ&復元方法を確認しておくことを強くおすすめします!

スポンサーリンク

実装手順|Cocoon「アイコン」のデザインをサイドバーで切り替えするカスタマイズ

実装手順は以下の2ステップ。

それぞれのコードを子テーマに貼り付けるだけでOKです。

PHPの設定

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

PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。

CSSの設定

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

CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。

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

サイト名
Turicco

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

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

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

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

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

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

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

販売価格
500円(税込)

Comment コメントはこちらへお願いします

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