サイト型トップページの作り方を公開しています!Check

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

アイキャッチ|ラベルボックス Cocoon
Cocoon
記事内に広告が含まれています

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

ラベル

標準のラベルボックス

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

そこで今回は、クリックで6種類のラベルボックスデザインを切り替えられるカスタマイズをご紹介します。

  • おしゃれ × 実用性」を重視する方
  • ラベルボックスをもっと自分好みに使いたい!」という方にぴったりです。
この記事でできること
  • サイドバーから選んでポチッと切り替え
    6種類のデザインをクリックだけで切り替え可能
  • 同じページ内で複数のスタイルを使い分け可能
    異なるデザインを同じページ内で自由に組み合わせできます。
  • 簡単な実装手順
    設定はたった2か所にコードを貼るだけ(作業時間の目安:5分)
    • 一度の設定で、サイト全体で繰り返し使えます。
      • 不要になった場合、追加したコードを削除することで元に戻ります。

当サイトでも実際に導入しており、デザインの幅がぐっと広がったと感じています。

スポンサーリンク

この記事を書いた人

はるみです
吹き出し/女性
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー45(2025年5月現在)
  • 2023年~有料記事公開
    • →累計420件(月間約20件)購入いただいています

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

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

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

デザイン一覧

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

デフォルト(Cocoon標準)

見出し

通常のCocoonテーマに搭載されている標準デザインです。

追加するスタイル

ラベルアウト(角)

見出し位置:ボックスの左上

ラベルイン(角)

見出し位置:ボックスの枠内左上

見出し

アイコンボックス(角)

ラベルアウト(丸)

見出し位置:ボックスの左上

ラベルイン(丸)

見出し位置:ボックスの枠内左上

見出し

アイコンボックス(丸)

具体的な特徴と使用例

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

見出し

ボックス内容を入力する

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

要点をまとめるポイントボックスとして使う例

Check

確認ポイントとして使う例

MEMO

メモボックスとして使う例

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

見出し

ボックス内容を入力する

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

「MEMO」→ 黄色系、補足説明に

お知らせ

「お知らせ」→青系、コメントなど

注意

「注意」→ 赤系、アラート表示に最適

この記事の内容
  • 箇条書きリストを追加した例
  • 箇条書きリストを追加した例

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

見出し

ボックス内容を入力する

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

ボックス内容を入力する

Check
  • 箇条書きリストを追加した例
  • 箇条書きリストを追加した例
Check

ボックス内容を入力する

  • 箇条書きリストを追加した例
  • 箇条書きリストを追加した例

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

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

見出し

ボックス内容を入力する

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

ボックス内容を入力する

Check
  • 箇条書きリストを追加した例
  • 箇条書きリストを追加した例
ラベルボックスとは

ボックス内容を入力する

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

見出し

ボックス内容を入力する

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

枠線と背景色を合わせると柔らかいイメージに

お知らせ

角を丸くするだけで印象が変わります

注意
  • 箇条書きリストを追加した例
  • 箇条書きリストを追加した例
この記事の内容
  • 箇条書きリストを追加した例
  • 箇条書きリストを追加した例

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

見出し

ボックス内容を入力する

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

ボックス内容を入力する

Check
  • ボックス内容を入力する
  • ボックス内容を入力する
Check

ボックス内容を入力する

  • ボックス内容を入力する
  • ボックス内容を入力する
スポンサーリンク

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

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

スポンサーリンク

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

イメージ画像/ポイント

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

  • スキンによる影響
    • 当カスタマイズはスキン「なし」で検証しています。お使いのスキンによっては、CSSの重複等で意図しないスタイルになる場合があります。
  • 子テーマを利用
    • 必要なコードは必ず子テーマに記述してください。
  • バックアップの重要性
    • 編集前に必ずバックアップをおこなってください。
    • 特にPHPに記述ミスがあるとサイトが表示されなくなる可能性があるため、FTPソフト等で元に戻せるようにしておくと安心です。
  • PHPエラーが発生した場合の対処
エラー表示が出て保存できない場合
  • WAF設定
    サーバーのWAF(Web Application Firewall)がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。
  • ベーシック認証
    • サーバー側でアクセス制限(ベーシック認証)を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。
重大なエラーが発生した場合
  • 管理画面にも入れない場合
    • FTPソフトを使用し、バックアップデータ(編集前の子テーマfunctions.php)を上書きして復元します。

当記事ではコピペのみで完成しますが、バックアップ&復元方法を確認しておくことを強くおすすめします!

スポンサーリンク

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

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

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

PHPの設定

「スタイル切り替え機能」を追加

PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。

CSSの設定

「各スタイルのデザイン」を定義

CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。

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

特定商取引法に基づく表記

サイト名
Turicco

サイトURL
https://turicco.com/

運営者情報
運営責任者:はるみ
お問い合わせ先:https://turicco.com/contact/

購入方法
コンテンツ販売サービス「codoc(コードク)」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。

納品方法
購入完了後、対象の記事が閲覧可能になります。

お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済

※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。

返金・キャンセルについて
codoc株式会社の利用規約第10条(返金)に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。

販売価格
500円(税込)

Comment コメントはこちらへお願いします

タイトルとURLをコピーしました