Cocoonの「タブ見出しボックス」はシンプルで使いやすいですが、もっとおしゃれにしたい、デザインを自由に使い分けたいというニーズに応えるカスタマイズがあります。
この記事では、初心者でも5分でできる、デフォルト + 8種類のスタイリッシュなデザインをワンクリックで切り替える方法を紹介します。
- ワンクリックでスタイル切り替え
サイドバーから簡単に、デフォルト + 8つのデザインを選択できます。 - リストマーカー（点）の色を自動調整
ボーダー色と統一され、よりおしゃれな印象に。 - 簡単導入、作業時間わずか5分
PHPとCSSをコピペするだけで設定完了。サイト全体で繰り返し使えます。
このカスタマイズの完成コードは記事後半で有料公開中。
8種類のデザインを即導入でき、有料テーマのような操作性とデザイン性をCocoonで手に入れられるのが大きな魅力。
Cocoonには、この記事のほかにも便利な装飾ボックスがあります。
- 見出しボックス — 見出しとボーダーの色をそろえて統一感あるデザインに。
- ラベルボックス — シンプル＆アクセントに使いやすいラベルスタイル。
- アイコンボックス — アイコンで直感的に内容を伝えられる人気ボックス。
併用すれば、記事の印象をぐっと引き締められます。
すべて、当サイトで愛用中のカスタマイズです。
About meこの記事を書いた人
ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。
- ドメインパワー : 40
- 2023年より有料記事公開
累計510件（月間約20件）のご購入実績
（2025年10月現在） - カスタマイズを丁寧にサポート
Cocoonタブ見出しボックスのカスタマイズ例
このカスタマイズは、Cocoonの「タブ見出しボックス」にデフォルト 1 + カスタム8種類を追加し、WordPressの編集画面からワンクリックで切り替えできるようにするもの。記事ごとや同じページ内でデザインを使い分け、読者にわかりやすく魅力的なブログを作れます。
全スタイルはスマホでも見やすく調整済み。
- はみ出した見出しテキストは…（三点リーダー）で省略されます
- 見出しテキストは1行以内に収めるのがおすすめ
以下、各スタイルの特徴、使用例、実際の表示サンプルを掲載しますので導入の参考にしてください。
ひとつでも「これいいかも！」と思ったスタイルがあれば、ぜひ試してみてください。
デフォルト（Cocoon標準）
- スタイル：標準のシンプルなデザイン
- 特徴：余白が狭くやや重たい印象
改善ポイント
この記事のカスタマイズでは、次のような改善を行っています。
窮屈な印象をなくし、余白を設けて整ったデザインに。
設定したボーダー色とマーカー（点）の色が統一され、可愛い印象に。
- シンプルと影付き：折り返して表示
- テープ風：「…」で省略表示
リストマーカー（点）の色を自動調整できるのがポイント。
見出しボックス限定ではなく、全体のリストマーカーをカスタマイズしたい場合は以下の記事をご覧ください。
枠外タイプ
- スタイル：枠の外（左上）に配置された見出し
- 特徴：モダンで目立つ
使用例：注意書きや重要ポイント
- リスト
- リスト
枠内タイプ
- スタイル：枠内（左上）に配置された見出し
- 特徴：一体感のある落ち着いた印象
使用例：補足やお知らせ
- リスト
- リスト
枠上タイプ
- スタイル：枠に重ねた見出し
- 特徴：立体感あり
使用例：記事の内容説明
- リスト
- リスト
丸吹き出し
- スタイル：枠に重ねた丸い吹き出し
- 特徴：可愛らしいデザイン
使用例：おすすめ、補足内容
- リスト
- リスト
マスキングテープ風 – NEW!
- スタイル：マスキングテープ風の見出し
- 特徴：控えめな斜めストライプと柔らかい影でおしゃれ
使用例：アピールしたい情報
- リスト
- リスト
幅広タイプ
- スタイル：幅いっぱいに広がる見出し
- 特徴：存在感抜群
使用例：強調したい見出し
- リスト
- リスト
丸アイコン
使用例：シンプルな補足情報
左アイコン（帯付き）
使用例：メリットやデメリット
以上のカスタムデザインは、記事後半でPHP＋CSSの実装方法を有料公開しています。
Cocoonタブ見出しボックスの使い方
Cocoonのタブ見出しボックスは初心者でも直感的に操作できます。簡単に設定できるので、以下のステップで使い方をマスターしましょう。
- Step1ブロックを挿入する
ブロックエディタ内のブロック追加メニューから「タブ見出しボックス」を選択します。
- Step2スタイルを選ぶ
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。
選択したスタイルは、すぐにボックスに反映されます。
- Step3色・アイコン設定
お好みでアイコン設定、色設定を行ってください。
- 色（背景色・枠線・アイコン色など）
- アイコン（種類や表示有無）
カラーパレットのカスタマイズもできます。
「Cocoon設定」やPHPを使えば、使いやすい配色を自分好みに調整できます。 - Step4ボックスの内容を編集
ボックス内にコンテンツ（テキストや画像など）を入力して完成です。
Cocoonタブ見出しボックス｜カスタマイズの注意点と特徴
カスタマイズは基本的にコピー＆ペーストで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。
この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、慌てずにFTPソフトなどで復元できれば解決できます。
関連記事 バックアップ＆復元方法
WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。
Cocoonタブ見出しボックスの実装手順｜完成コードのご案内（有料）
ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。
PHPの設定
目的：「スタイル切り替え機能」を追加
記述場所：子テーマの functions.php
CSSの設定
目的：「各スタイルのデザイン」を定義
記述場所：子テーマのスタイルシート (style.css)
- WordPress管理画面で 「外観」→「テーマファイルエディター」 を開く
- 子テーマ（Cocoon Child） が選択されているか確認
- ファイル一覧から 「Cocoon Child: テーマのための関数 (functions.php)」 を開く
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記
- WordPress管理画面で 「外観」→「テーマファイルエディター」 を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から 「Cocoon Child: スタイルシート (style.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 記事の感想を書き込んでいただけると幸いです