Cocoonのラベルボックスは便利ですが、
- ラベルの後ろに線が見えて少し野暮ったい
- 長いラベルだとスマホで崩れやすい
- デザインのバリエーションが少なく使い分けしづらい
と感じることもあります。
この記事では、CocoonラベルボックスをCSSでおしゃれにカスタマイズする方法を、初心者でもコピペで導入できる完成コード付きで解説します。
特に、Cocoon標準のラベルボックスをもう少し見やすくしたい方や、記事全体の統一感を高めたい方にはおすすめのカスタマイズです。
まずこの記事で作れるデザインサンプルを紹介、完成コードは記事後半で公開しています。
Cocoonラベルボックスのカスタマイズ例（CSSデザイン一覧）
このカスタマイズでは、Cocoon標準のラベルボックスをベースに用途別に使い分けできる複数のデザインスタイルを追加しています。
- 追加後はサイドバーの「スタイル」から選択するだけ
- 色やアイコンも変更できます
参考 カラーパレットの色を変更する方法
デザイン比較
| デザイン | 向いている用途 | 特徴 |
|---|---|---|
| 枠の上に重ねて配置（ラベルアウト） | 見出し・ポイント | 強調しやすく目立つ |
| 枠内に配置（ラベルイン） | 補足・注意 | 文章になじみやすい |
| アイコンボックス風 | 情報整理・まとめ | 視認性が高く読みやすい |
迷ったら枠の上に重ねて配置を基本に使うと読みやすくなります。
以下では、各デザインの特徴と使用例を紹介します。
デフォルト（比較表）
まずはCocoon標準のラベルボックスです。
- ラベル後ろにうっすら線が見える
- 余白が窮屈
- スマホで崩れやすい
シンプルな標準デザイン
カスタマイズ後（調整ポイント）
枠の上に重ねて配置（ラベルアウト）
- 見出しやポイントの強調に向く
- スッキリした印象
- 角を丸めたやわらかい印象
- ブログ全体を優しい雰囲気にしたい場合におすすめ
▶ 補足ポイント
- ラベル・ボックス内は白背景固定（CSSで変更可能）
- ボーダー色、文字色は設定から変更できます
使用例（アイコン併用）
アイコンと組み合わせると、内容が直感的に伝わります。
例：吹き出しアイコン＋「POINT」、チェックマークアイコン＋「Check」、など
ここにボックス内容を入力
ここにボックス内容を入力
枠内に配置（ラベルイン）
- ラベルと内容が一体化
- 落ち着いた、情報重視の印象
角丸で柔らかく親しみやすいデザイン
使用例（アイコン併用）
補足説明・注意書き・リンク案内に使いやすいスタイルです。
メモボックス風
注意書き
チェックボックス風
リンクなど
アイコンボックス風デザイン（おすすめ）
この中では、個人的に一番使っているのがアイコンボックス風です。
Cocoon標準のアイコンボックスと雰囲気を合わせやすく、記事全体に統一感が出しやすいので、最近はこちらを使うことが増えました。
補足ポイント
- アイコンを設定して使うデザインです
- ラベル部分のテキストは表示されません
- アイコンと組み合わせることで、情報の意味を直感的に伝えられます
使用例
Cocoonアイコンボックス風のデザイン。
カスタマイズ方法をこちらの記事で紹介しています。
Cocoonには、この記事のほかにも便利な装飾ボックスがあります。ラベルボックスと組み合わせると、記事のデザインはさらに整います。
Cocoonの装飾ブロックを一覧で確認したい方は、こちらの記事も参考にしてください。
併用すれば、記事の印象をぐっと引き締められます。
Cocoonラベルボックス｜カスタマイズの注意点
基本的にはコードをコピペするだけで導入でき、Cocoon標準環境で動作確認済みです。
- CSSを少し触ったことがある
- 子テーマ編集をしたことがある
くらいの経験があればそこまで難しくありません。コードにはコメントを付けて整理しているので、カスタマイズしやすい構成にしています。
- スマホ表示対応済み
- カスタム変数でサイズ調整しやすい
- スキンによってはCSSが干渉する場合あり
- 親テーマではなく子テーマ編集推奨
- PHP編集前はバックアップ推奨
- WAF設定（セキュリティ設定）によっては保存エラーが出る場合あり
もし保存できない場合は、サーバーのWAF設定を一時的にOFFにしてください。（※作業が終わったらONに戻します）
Cocoonラベルボックスの実装手順（完成コード）
一からCSSを書くと、余白調整やスマホ対応まで含めて意外と時間がかかります。今回のコードは実際に運用しながら調整した完成版なので、そのまま導入できます。
- ラベルPHPコードを貼り付け
目的：エディタに「デザイン選択機能」を追加
記述場所：子テーマの
functions.php（PHPはスタイル登録のみで既存記事には影響しません）
- ラベルCSSコードを貼り付け
目的：各デザインの見た目を反映
記述場所：子テーマの
style.css(スタイルシート) - ラベルエディタでデザインを選択
- 対象ブロックを追加
- サイドバーの「スタイル」を開く
- 追加したスタイルを選択
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「テーマのための関数 (functions.php)」を開く
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記
エラー防止：不要なスペース等が入らないよう、慎重に編集をおこなってください
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「スタイルシート (style.css)」を開く
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加
カスタマイズ全体の流れ
- 登録：codocへ会員登録（初回のみお願いします）
- 入力：有料エリアの内容をご自身で入力してください
- 確認：プレビューで表示確認して完了です
販売者情報は 「特定商取引法に基づく表記」をご確認ください。
Comment 記事の感想を書き込んでいただけると幸いです