Cocoonのタブ見出しボックスは、情報整理に便利です。
ただ複数記事を書いていると、「便利だけど少し単調に見える」と感じることがあります。
そこで、タブ見出しボックス用に実用的な複数スタイルを作成しました。
一度入れておくと、あとはエディタ側でスタイルを切り替えるだけなので、
「この記事は柔らかく」
「ここだけ少し強調したい」
そんな調整を、毎回CSSを書き直さずにできるようになります。
- Cocoonをもっとサイトっぽくしたい
- 有料テーマ風の整った雰囲気に寄せたい
- CSSコピペで手軽に変えたい
という方におすすめです。
- スタイルをワンクリックで切り替え
サイドバーからデフォルト + 8つのデザインを選べる - リストマーカーの色が自動で統一される
記事全体のデザインにまとまりが出る - 簡単導入、作業時間わずか5分
PHPとCSSのコピペだけで導入可能
まずは実際のスタイル例を見ていきましょう。
選べるデザイン一覧｜Cocoonタブ見出しボックスのカスタマイズ例
このカスタマイズでは、標準のタブ見出しに加えて8パターンを追加します。同じコンテンツでも、見た目が変わるだけで印象は変わります。
「どれを使うか迷う」というより、記事の雰囲気に合わせて選ぶ楽しさが出るカスタマイズです。
デフォルト（比較用）
Befor
まずは標準状態から見ておきましょう。
シンプルで扱いやすい反面、少しだけ余白が詰まって見えたり全体がやや重く感じることがあります。
このカスタマイズでの改善ポイント
このカスタマイズでは次のように調整しています。
After
特にリストマーカーの色が自動で揃うことで、細かい部分ですが全体の統一感がぐっと変わります。
見出しボックス以外も含めて調整したい方は、以下の記事も参考にしてください。
style1：枠外タイプ
枠の外側にラベルが出るタイプで少しだけ動きのあるデザインです。目立たせたいポイントや注意書きに向いていて、記事の中で自然に視線を集めてくれます。
使用例：注意書き・重要ポイント・警告表示
- リスト
- リスト
style2：枠内タイプ
枠の中に自然に収まるため、補足説明やちょっとした情報整理に向いています。派手さはありませんがそのぶん一番クセがなく安定して使えます。
使用例：補足説明・お知らせ・注意点
- リスト
- リスト
style3：枠上タイプ（重ね表示）
見出しが枠に少し重なることで、軽い立体感が出るタイプです。章の冒頭や説明の切り替えに使うと、自然に「ここから話が変わる」という流れを作れます。
使用例：記事内容の説明・章の導入
- リスト
- リスト
style4：丸吹き出しタイプ
少し柔らかく、親しみやすい雰囲気になります。おすすめやワンポイント解説など、読者に軽く伝えたい内容と相性が良いスタイルです。
使用例：おすすめ・補足・ワンポイント解説
- リスト
- リスト
style5：マスキングテープ風 – NEW!
貼り付けたようなラフな質感が特徴です。少し遊び心があり、ピックアップ情報やキャンペーンなどを軽く強調したいときに使いやすいデザインです。
使用例：キャンペーン・ピックアップ・注目情報
- リスト
- リスト
style6：幅広タイプ
横いっぱいに広がるため存在感があります。注意点や重要な情報など、「ここは見逃してほしくない」という部分に向いています。
使用例：強調したい注意点・重要な見出し
- リスト
- リスト
style7：丸アイコン
使用例：簡単な補足・短いポイント説明
style8：左アイコン（帯付き）
使用例：メリット・デメリットの整理
タブ見出しボックスだけでも十分便利ですが、Cocoonには他にも多くの装飾があります。うまく組み合わせると記事全体の読みやすさが一段上がります。
Cocoonの装飾ブロックを一覧で確認したい方は、こちらの記事も参考にしてください。
Cocoonタブ見出しボックス｜カスタマイズの注意点と特徴
基本的にはコードをコピペするだけで導入でき、Cocoon標準環境で動作確認済みです。
- CSSを少し触ったことがある
- 子テーマ編集をしたことがある
くらいの経験があればそこまで難しくありません。コードにはコメントを付けて整理しているので、カスタマイズしやすい構成にしています。
- スマホ表示対応済み
- カスタム変数でサイズ調整しやすい
- スキンによってはCSSが干渉する場合あり
- 親テーマではなく子テーマ編集推奨
- PHP編集前はバックアップ推奨
- WAF設定（セキュリティ設定）によっては保存エラーが出る場合あり
もし保存できない場合は、サーバーのWAF設定を一時的にOFFにしてください。（※作業が終わったらONに戻します）
Cocoonタブ見出しボックスの実装手順｜完成コード
ここから先は、実際にそのまま使える完成コードです。
すべてコピペ導入できる形に整理しており、
- スタイル登録用PHP
- 実際のデザインCSS
- スマホ調整
- 長文ラベル対策
- リストマーカー色統一
までまとめて入れています。
「見た目だけ似せた簡易版」ではなく、実運用で使いやすいよう細かい崩れ対策まで含めて調整しています。
- ラベルPHPコードを貼り付け
目的：エディタに「デザイン選択機能」を追加
記述場所：子テーマの
functions.php（PHPはスタイル登録のみで既存記事には影響しません）
- ラベルCSSコードを貼り付け
目的：各デザインの見た目を反映
記述場所：子テーマの
style.css(スタイルシート) - ラベルエディタでデザインを選択
- 対象ブロックを追加
- サイドバーの「スタイル」を開く
- 追加したスタイルを選択
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「テーマのための関数 (functions.php)」を開く
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記
エラー防止：不要なスペース等が入らないよう、慎重に編集をおこなってください
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「スタイルシート (style.css)」を開く
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加
販売者情報は 「特定商取引法に基づく表記」をご確認ください。
Comment 記事の感想を書き込んでいただけると幸いです