Cocoon「見出しボックス」リストマーカー（点）の色を自動調整＆デザイン切り替えカスタマイズ

Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利に。

• 「リストの点がテーマカラーと合わない」
• 「記事の内容に合わせて、デザインを切り替えたい」

そんな方におすすめのカスタマイズです。

この記事では、リストマーカー（点）の色をボーダー色と自動で揃え、さらに デザインをワンクリックで切り替えられる カスタマイズ方法をご紹介します。

完成コードは、記事後半で有料公開中です。

見出しボックスを主役デザインにして、記事全体をアップデートしてみませんか？

Cocoonには、この記事のほかにも便利な装飾ボックスがあります。

• タブ見出しボックス — 見出し部分をタブ風デザインにして、情報を整理。
• ラベルボックス — シンプル＆アクセントに使いやすいラベルスタイル。
• アイコンボックス — アイコンで直感的に内容を伝えられる人気ボックス。

併用すれば、記事の印象をぐっと引き締められます。

Cocoon見出しボックスのカスタマイズ例

このカスタマイズは、Cocoonの「見出しボックス」に複数デザインを追加し、WordPressの編集画面（サイドバー）からワンクリックで切り替えできるようにします。

記事の装飾や情報整理に合わせて、用途別のデザインを選べます。

以下では、各スタイルの特徴と実際のサンプル表示を紹介します。

スタイル名	特徴	おすすめ用途
シンプル	枠線のみで清潔感	情報整理・レビュー
影付き	立体感のあるデザイン	コラム・補足情報
テープ風	装飾感が高く個性的	お知らせ・Tips

デフォルト（Cocoon標準）

カスタマイズで改善できるポイント

この記事のカスタマイズでは、次のような改善を行っています。

見出しボックス限定ではなく、全体のリストマーカーをカスタマイズしたい場合は以下の記事をご覧ください。

シンプルスタイル

影付きスタイル

テープ風スタイル（影付きベース）

• テープ風スタイルは見出しが幅を超えた場合
  →「…」で省略表示されます。

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

Cocoon見出しボックスの使い方

Cocoonテーマの「見出しボックス」は、ブロックエディタ上で直感的に使うことができます。以下の手順で、お好みのスタイルや色にカスタマイズしてみましょう。

Cocoon見出しボックス｜カスタマイズの注意点と特徴

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

Cocoon見出しボックスの実装手順｜完成コードのご案内（有料）

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

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

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