Cocoonラベルボックスをシンプル&おしゃれに！選べる6つのスタイルを実装するカスタマイズ

ブログにちょっとした補足を加えたいときに便利な「ラベルボックス」。

Cocoonテーマに標準搭載されている「ラベルボックス」は、シンプルで扱いやすい反面、見た目や使い勝手に少し物足りなさを感じることも。

• 余白が狭くて窮屈な印象
• 見出しの後ろにうっすら線が見えることがある
  • →テキストに太めに白く縁取りしているため

今回は、ワンクリックで複数のラベルボックスデザインを切り替えるカスタマイズをご紹介。

この記事を読むと…

ラベルボックスの見た目をガラッと変えて、ブログの印象をより魅力的に演出できるようになります。さらに、情報をシンプルに伝えやすくなり、ブログ全体のクオリティアップ。

• 「おしゃれ × 実用性」を重視する方
• 「ラベルボックスをもっと自分好みに使いたい」という方にぴったりの内容です。

実装イメージ｜クリックで切り替えできるCocoonラベルボックス

このカスタマイズの目的は、Cocoonテーマで使える複数のラベルボックススタイルを、クリック操作だけで簡単に切り替えられるようにすることです。

記事の装飾や情報整理に合わせて、最適なデザインを選んで適用できます。

デザイン一覧

スタイル名	特徴	ラベル配置	角の形状
ラベルアウト（角）	枠外にラベルを重ねる	ボックス左上（外側）	四角
ラベルイン（角）	ラベルを枠内に	ボックス左上（内側）	四角
アイコンボックス（角）	見出しなし・アイコンのみ表示	–	四角
ラベルアウト（丸）	アウト＋角丸スタイル	ボックス左上（外側）	丸
ラベルイン（丸）	イン＋角丸スタイル	ボックス左上（内側）	丸
アイコンボックス（丸）	アイコンのみ＋角丸	–	丸

デフォルト（Cocoon標準）

追加するスタイル

具体的な特徴と使用例

スタイル 1：ラベルアウト(角)

• 見出し位置：枠に重ねるように左上に配置されるデザイン
• アイコン、ボーダー色、見出し色を設定できます
• 背景色は固定のため設定できません
• 角の丸みはなくすっきりとした四角のボックスです

スタイル 2：ラベルイン(角)

• 見出し位置：枠内左上に配置されるデザイン
• アイコン、ボーダー色、見出し色、背景色を設定できます
• 角の丸みはなく四角のボックスです

スタイル 3：アイコンボックス(角)

• アイコンコンボックス風のデザイン
• サイドバーでアイコンを選択して使用します
• 見出しテキストは表示されません
• アイコンの種類、ボーダー色、背景色を設定できます
• 角の丸みはなく四角のボックスです

Cocoonアイコンボックスのカスタマイズも紹介していますが、こちらは同様のボックスデザインでアイコン・ボーダー色・背景色の組み合わせが自由自在！

カスタムして使いやすいメリットがあります。

スタイル 4：ラベルアウト(丸)

• スタイル1 の角に丸みをもたせたボックスです
• デフォルトスタイルと似ていますが、余白を広めにとって見やすくしています

スタイル 5：ラベルイン(丸)

• スタイル2 の角に丸みをもたせたボックスです

スタイル 6：アイコンボックス(丸)

• スタイル3 の角に丸みをもたせたボックスです

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

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

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

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

• スキンによる影響
  • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによっては、CSSの重複等で意図しないスタイルになる場合があります。
• 子テーマを利用
  • 必要なコードは必ず子テーマに記述してください。
• バックアップの重要性
  • 編集前に必ずバックアップをおこなってください。
  • バックアップ＆復元方法
  • 特にPHPに記述ミスがあるとサイトが表示されなくなる可能性があるため、FTPソフト等で元に戻せるようにしておくと安心です。
• PHPエラーが発生した場合の対処

実装手順｜Cocoonラベルボックスをクリックで切り替えできるようにする方法

実装手順は以下の２ステップ。

それぞれのコードを子テーマに貼り付けるだけでOKです。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。