Cocoonのラベルボックスはシンプルだけど、「余白が狭い」「ラベル後ろ線が気になる」「もっとおしゃれにしたい」と感じることも。
記事の見た目は読者の滞在時間や理解度に大きく影響するため、ラベルボックスを整えるだけでも読みやすさは大きく改善されます！
この記事では、CocoonラベルボックスをCSSでおしゃれにカスタマイズする方法を、初心者でもコピペで導入できる完成コード付きで解説します。
PHPとCSSをコピペするだけで、以下のようなスタイルを簡単に追加できます。
- 枠の上に重ねて配置（ラベルアウト）
- 枠内に配置（ラベルイン）
- アイコンボックス風
5分で導入でき、記事の見栄えと読みやすさが一気に向上します。
まずこの記事で作れるデザインサンプルを紹介、完成コードは記事後半で公開しています。
Cocoonラベルボックスのカスタマイズ例（CSSデザイン一覧）
このカスタマイズでは、Cocoon標準のラベルボックスをベースに、用途別に使い分けできる複数のデザインスタイルを追加しています。
ラベルボックスは用途に応じて使い分けるのがおすすめです。
まずは、3種類のラベルデザインの違いを一覧で確認してみましょう。
デザイン比較
| デザイン | 向いている用途 | 特徴 |
|---|---|---|
| 枠の上に重ねて配置（ラベルアウト） | 見出し・ポイント | 強調しやすく目立つ |
| 枠内に配置（ラベルイン） | 補足・注意 | 文章になじみやすい |
| アイコンボックス風 | 情報整理・まとめ | 視認性が高く読みやすい |
迷ったら枠の上に重ねて配置を基本に使うと読みやすくなります。
以下では、各デザインの特徴と使用例を紹介します。
デフォルト（Cocoon標準）
スタイル：シンプルな標準デザイン
特徴
- ボックス内の余白がやや狭く、窮屈に見える
- ラベル背後に線が残る場合がある（文字に沿って影が付いているため）
- ラベル文字が長いと折り返される（特にスマホでレイアウトが崩れやすい）
カスタマイズで改善できるポイント
この記事のカスタマイズでは、以下を調整しています。
以下から実際のカスタムスタイルを確認できます。
枠の上に重ねて配置（ラベルアウト）
スタイル：ラベルをボックスの上に配置して強調するデザイン
特徴
- スッキリした直線的デザイン
- 情報を整理して見せたい場面に最適
特徴
- 角を丸めたやわらかい印象
- ブログ全体を優しい雰囲気にしたい場合におすすめ
▶ 補足ポイント
- ラベル・ボックス内は白背景固定（CSSで変更可能）
- ボーダー色、文字色は設定から変更できます
使用例（アイコン併用）
アイコンと組み合わせると、内容が直感的に伝わります。
例：吹き出しアイコン＋「POINT」、チェックマークアイコン＋「Check」、など
ここにボックス内容を入力
ここにボックス内容を入力
枠内に配置（ラベルイン）
スタイル：ラベルをボックス内に配置して落ち着いた印象にするデザイン
特徴
- ラベルと内容が一体化
- 落ち着いた、情報重視の印象
特徴：角丸で柔らかく親しみやすいデザイン
使用例（アイコン併用）
補足説明・注意書き・リンク案内に使いやすいスタイルです。
四角・ボーダーあり
角丸・ボーダーあり
四角・ボーダーなし
角丸・ボーダーなし
アイコンボックス風デザイン（おすすめ）
補足ポイント
- ラベル部分のテキストは表示されません
- アイコンを設定して使うデザインです
- アイコンと組み合わせることで、情報の意味を直感的に伝えられます
使用例
Cocoonアイコンボックス風のデザイン。
カスタマイズ方法をこちらの記事で紹介しています。
Cocoonには、この記事のほかにも便利な装飾ボックスがあります。ラベルボックスと組み合わせると、記事のデザインはさらに整います。
Cocoonの装飾ブロックを一覧で確認したい方は、こちらの記事も参考にしてください。
併用すれば、記事の印象をぐっと引き締められます。
Cocoonラベルボックスの使い方（基本操作）
この記事ではカスタマイズ方法を中心に解説していますが、はじめて使う方でも迷わないように基本操作を簡単にまとめておきます。
- Step1ブロックを追加
編集画面で＋ → ラベルボックスを検索して選択。
- Step2お好みのスタイルを選択
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。
選んだスタイルがすぐに反映されます。
- Step3色・アイコン設定
- サイドバーからボーダー色・背景色・見出し色を自由に変更できます
- 必要に応じてアイコンの種類も選択しましょう
Cocoonのカラーパレットもカスタマイズできます。
- Step4ボックスの内容を編集
ボックス内にコンテンツを入力したら完成です。
Cocoonラベルボックス｜カスタマイズの注意点
このカスタマイズは基本的にコピペで安全に導入でき、Cocoon標準環境で動作確認済みです。ただし、利用しているスキンやサーバー設定によっては挙動が変わる場合があります。作業前に以下のポイントを押さえておくと安心して進められます。
この記事のカスタマイズはスキン「なし」で検証しています。スキン独自のCSSが優先される場合、表示が崩れることがありますが、優先度調整（CSSの追加）でほぼ解決できます。（スキンと併用できるかはお問い合わせください）
CSS・PHP は必ず子テーマへ記述してください。親テーマへ書くとアップデート時に上書きされ、カスタマイズが消えてしまう可能性があります。
特にPHPを編集する場合、記述ミスで大きなエラーが起こることがあります。バックアップがあればすぐに復元できるので作業前にひとつ取っておくと安心です。
関連記事：バックアップ＆復元方法
WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。その場合は作業中だけWAFを一時的に OFFにし、完了後に ON に戻してください。
Cocoonラベルボックスの実装手順（完成コード）
ここからは、実際に使っている完成コードを公開します。
導入するとラベルボックスをワンクリックで切り替えられるようになり、記事の統一感と読みやすさが大きく向上します。
すぐに導入したい方は、以下からコードをコピーしてご利用ください。
PHPの設定
目的：「スタイル切り替え機能」を追加
記述場所：子テーマの functions.php
（PHPはスタイル登録のみで既存記事には影響しません）
CSSの設定
目的：「各スタイルのデザイン」を定義
記述場所：子テーマのスタイルシート (style.css)
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「テーマのための関数 (functions.php)」を開く
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記
エラー防止：不要なスペース等が入らないよう、慎重に編集をおこなってください
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「スタイルシート (style.css)」を開く
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加
functions.phpに PHP コードを貼り付けstyle.cssに CSS を貼り付け- サイドバーで希望のスタイルを選択
- プレビューで表示を確認 → 完成！
以下は有料コンテンツのご案内および特定商取引法に基づく表記です。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード ・デビットカード ・プリペイド型クレジットカード ・Apple Pay ・Google Pay ・コンビニ決済
※決済はStripeを利用（SSL暗号化）。運営者はカード情報を保持しません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
500円（税込）
Comment 記事の感想を書き込んでいただけると幸いです