Cocoonの「ラベルボックス」
情報をまとめるのに便利な機能ですが、余白が狭かったり、見出しの後ろに線が残ったりして、もう少し洗練させたいという声もよく聞きます。
この記事では、初心者でも5分でできる、「角型」「丸型」など3種類のスタイリッシュなラベルデザインをワンクリックで切り替えられるカスタマイズ方法を紹介します。
- ワンクリックでデザイン切り替え
WordPressの編集画面からデフォルト+3種類（角・丸）のデザインを簡単選択。 - 用途別に使い分け可能
注意書き・ポイントなどをデザインで分けて記事をより見やすく。 - 5分で簡単導入
PHPとCSSを2か所にコピペするだけ。
サイト全体で使えて元に戻すのも簡単です。
このカスタマイズの完成コードは、記事後半で有料公開中。
3種類（角・丸）のデザインを即導入でき、有料テーマのような操作性とデザイン性をCocoonで手に入れられるのが大きな魅力。このサイトでも愛用しているカスタマイズです。
About meこの記事を書いた人
ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。
- ドメインパワー : 40
- 2023年より有料記事公開
累計500件（月間約20件）のご購入実績
（2025年9月現在） - カスタマイズを丁寧にサポート
こんなデザインが可能に！Cocoonラベルボックスのカスタマイズ例
このカスタマイズは、Cocoonの「ラベルボックス」に3種類（角・丸）のデザインを追加し、WordPressの編集画面（サイドバー）からワンクリックで切り替えできるようににします。
記事の装飾や情報整理に合わせて、用途別のデザインを選べます。
以下では、各スタイルの特徴と実際のサンプル表示を紹介します。
ぜひ「これいいかも！」と思えるデザインを見つけてください。
デフォルト（Cocoon標準）
- スタイル：シンプルな標準デザイン
- 特徴
- 余白がやや狭く窮屈な印象
- ラベルの後ろに線が見える残場合がある（文字に影をつけているため）
- ラベルのテキストが枠幅を超えた場合、文字が折り返されてレイアウトが崩れてしまう
カスタマイズで改善できるポイント
この記事のカスタマイズでは、次のような改善を行っています。
- ボックス内の余白を最適化
→ 窮屈な印象をなくし、見やすく整ったデザインに。 - ラベルの後ろに線が残らないように調整
→ ラベル部分に白背景を設定し、Cocoon標準で見えていた下線を隠すようにしています。 - ラベルが幅を超えた場合に「…」で省略表示
→ スマホなど狭い画面でもタイトルが崩れずスッキリ。
さらに、ラベル位置（イン・アウト）や角丸など好みに応じて、3種類のデザインを簡単に切り替えできます。
ラベルアウト（枠の上に重ねて配置）
- スタイル：ラベルが枠の上に重ねて配置されたデザイン。
- 特徴：すっきりとした四角形で、情報を整理して見せたい場面に最適。
- 特徴：角を丸めて柔らかい印象に。
補足ポイント
- ラベル部分は白固定です（CSSでは変更可能）
- ボーダー色、文字色は設定から変更できます
サンプル
アイコンと組み合わせると、さらに視覚的に伝わりやすいラベルになります。
例：吹き出しアイコン＋「POINT」、チェックマークアイコン＋「Check」、など
ここにボックス内容を入力
ここにボックス内容を入力
ラベルイン（枠内に配置）
スタイル：ラベルが枠内に配置されたデザイン。
特徴：ラベルと内容が一体化し、落ち着いた印象に。
特徴：角を丸めた優しいデザイン。
サンプル
ここにボックス内容を入力
ここにボックス内容を入力
ここにボックス内容を入力
ここにボックス内容を入力
アイコンボックス（おすすめ）
補足ポイント
- ラベル部分のテキストは表示されません
- アイコンを設定して使うデザインです
- アイコンと組み合わせることで、情報の意味を直感的に伝えられます
サンプル
Cocoonアイコンボックス風のデザイン。
カスタマイズ方法をこちらの記事で紹介しています。
以上のカスタムデザインは、記事後半でPHP＋CSSの実装方法を有料公開しています。
Cocoonラベルボックスの使い方
Cocoonテーマの「ラベルボックス」は、ブロックエディタ上で直感的に使うことができます。以下の手順で、お好みのスタイルや色にカスタマイズしてみましょう。
- Step1ブロックメニューから「ラベルボックス」を選択
ブロックエディタ上で、＋ボタン → デザイン → ラベルボックスを選択して追加します。
- Step2お好みのスタイルを選択
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。
選んだスタイルがすぐに反映されます。
- Step3色・アイコン設定
- サイドバーからボーダー色・背景色・見出し色を自由に変更できます。
- 必要に応じてアイコンの種類も選択しましょう。
Cocoonのカラーパレットもカスタマイズできます。
- 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の完成版コード（コピペで導入可能）
- 3種類（角・丸）のデザインをサイドバーからワンクリック切り替え
作業時間はわずか約5分。最短で「完成形のラベルボックス」を導入したい方はぜひご活用ください。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
500円（税込）
Comment 記事の感想を書き込んでいただけると幸いです