Cocoonラベルボックスのデザインを切り替え可能に！クリックで選べる6種類のスタイルを実装する方法

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

Cocoonテーマに備わっているラベルボックスはシンプルで使いやすい反面、見た目に物足りなさを感じる方も多いのではないでしょうか。

この記事では、クリックで切り替えできる6種類のデザインを紹介します。「おしゃれ×実用性」を重視する方はぜひ試してみてください！

• Cocoon タブブロック
• Cocoon ブログカード
• Cocoon 白抜きボックス
• Cocoon タブ見出しボックス
• Cocoon ラベルボックス
• Cocoon アイコンボックス
• Cocoon アコーディオン（トグル）
• Cocoonボックスメニュー（ブロック）
• Cocoon 新着記事・人気記事ブロック

実装イメージ｜Cocoonラベルボックス

このカスタマイズの目的は、複数のラベルボックススタイルをサイドバーから簡単に切り替えられるようにすることです。以下のような6つのデザインを用意しています。

「ラベルボックス」各スタイルの実例

「ラベルボックス」のスタイルはCocoonデフォルトのほか、６種類追加しています。

以下、実際に表示するボックス実例を掲載するので参考にしてください。

デフォルト（Cocoon標準）

シンプルで汎用性の高いデザインに仕上げています。

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

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

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

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

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

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

Cocoonアイコンボックスのカスタマイズも紹介していますが、こちらはアイコン・ボーダー色・背景色の組み合わせが自由なのでカスタムして使いやすいメリットがあります。

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

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

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

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

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

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

ラベルの位置や角の形状を少し変えるだけでも、ボックスの印象は大きく変わります。今回のカスタマイズでは、追加CSSクラスの手入力なしで、クリック操作だけで切り替えできるのが大きなポイントです。

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

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

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

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

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

▶ エラー表示が出て保存できない場合

• WAF設定
  サーバーのWAF（Web Application Firewall）がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。
• ベーシック認証
  • サーバー側でアクセス制限（ベーシック認証）を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。

▶ 重大なエラーが発生し管理画面にも入れない場合

• FTPソフトを使用し、バックアップデータ（編集前の子テーマfunctions.php）を上書きして復元します。

実装手順｜Cocoonラベルボックスのデザインをサイドバーで切り替えするカスタマイズ

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

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

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