ワンクリックで差がつく！Cocoonラベルボックスをおしゃれにカスタマイズする方法

Cocoonの「ラベルボックス」は補足情報やポイントをシンプルに伝えるのに便利な機能ですが、余白が狭く窮屈だったり、見出しの後ろに薄い線が見えたりと、デザインに物足りなさを感じることも。

この記事では、初心者でも5分でできる、3種類（角・丸）のスタイリッシュなデザインをワンクリックで切り替えるカスタマイズを紹介します。

このカスタマイズの完成コードは、記事後半で有料公開中。

3種類（角・丸）のデザインを即導入でき、有料テーマのような操作性とデザイン性をCocoonで手に入れられるのが大きな魅力。このサイトでも愛用しているカスタマイズです。

こんなデザインが可能に！Cocoonラベルボックスのカスタマイズ例

このカスタマイズは、Cocoonの「ラベルボックス」に3種類（角・丸）のデザインを追加し、WordPressの編集画面（サイドバー）からワンクリックで切り替え可能にします。記事の装飾や情報整理に合わせて、用途別のデザインを選べます。

以下、各スタイルの特徴、使用例、実際の表示サンプルを掲載しますので導入の参考にしてください。

デフォルト（Cocoon標準）

ラベルアウト

使用例：ポイント、確認事項

ラベルイン

使用例：メモ、お知らせ

アイコンボックス

使用例：シンプルな補足

Cocoonアイコンボックス風のデザイン。

こちらはアイコン・ボーダー色・背景色の組み合わせが自由自在！汎用性が高いメリットがあります。

以上のカスタムデザインは、記事後半でPHP＋CSSの実装方法を有料公開しています。

Cocoonラベルボックスの使い方

Cocoonテーマの「ラベルボックス」は、ブロックエディタ上で直感的に使うことができます。以下の手順で、お好みのスタイルや色にカスタマイズしてみましょう。

Cocoonラベルボックス｜カスタマイズの注意点と特徴

カスタマイズは基本的にコードを貼り付けるだけで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。

• スキンによる影響
  この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
• 子テーマを利用
  コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
• バックアップの推奨
  念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
  • 関連記事 バックアップ＆復元方法
• サーバー設定の影響
  WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。

Cocoonラベルボックスの実装手順｜完成コードのご案内（有料）

ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。

• PHP＋CSSの完成版コード（コピペで導入可能）
• 3種類（角・丸）のデザインをサイドバーからワンクリック切り替え

作業時間はわずか約5分。最短で「完成形のラベルボックス」を導入したい方はぜひご活用ください。