今回は、Cocoonテーマのブロック「ラベルボックス」。
ラベルボックス
機能としてはオーソドックスで使いやすいですが、線をシュッと細くして余白を整えればもっとオシャレになりそうな雰囲気です。そして見出しやアイコン位置を変えると汎用的に使えそう。
この記事では、ラベルボックスのデザインを複数準備しサイドバーで簡単に切り替えできるカスタマイズをご紹介します。タブ見出しボックスと合わせて普段使いができるシンプルなボックスになりますよ。
- サイドバーから簡単操作
クリック操作だけで６種類のデザインが選べます。 - 同一ページ内で複数のデザイン使用
異なるデザインを同じページ内で自由に組み合わせできます。 - 簡単な実装手順
コードを２か所に貼り付けるだけで完了、作業時間の目安は５分です。- 一度の設定で、サイト全体で繰り返し使えます。
- 不要になった場合、追加したコードを削除することでで元に戻ります。
- 一度の設定で、サイト全体で繰り返し使えます。
当サイトでも愛用中です！
- Cocoon タブブロック
- Cocoon ブログカード
- Cocoon 白抜きボックス
- Cocoon タブ見出しボックス
- Cocoon ラベルボックス
- Cocoon アイコンボックス
- Cocoon アコーディオン（トグル）
- Cocoon 新着記事・人気記事ブロック
About me
この記事を書いた人
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計390件（月間約20件）購入いただいています
実装イメージ｜Cocoonラベルボックス
当カスタマイズの目的は、以下の複数スタイルをサイドバーから簡単に選択することです。
見出し位置：ボックスの左上
見出し位置：ボックスの枠内左上
見出し位置：ボックスの左上
見出し位置：ボックスの枠内左上
「ラベルボックス」のスタイル
「ラベルボックス」のスタイルはCocoonデフォルトのほか、６種類追加しています。
以下、実際に表示するボックス実例を掲載するので参考にしてください。
デフォルト
Cocoonデフォルト：通常のデザイン
デザイン調整していきます！
- ラベルの位置
- 外枠：細く設定
- 角：四角と丸みがあるボックスの２種類を準備
- ボックス内の余白：広めに調整
- 文字色：ボックス内はCocoon設定で指定したテキスト色に統一
汎用性を重視してすっきりとシンプルなデザインにしました。
スタイル 1：ラベルアウト(角)
ボックス内容を入力する
- 見出し位置：枠に重ねるように左上に配置されるデザイン
- アイコン、ボーダー色、見出し色を設定できます
- 背景色は固定のため設定できません
- 角の丸みはなく四角のボックスです
ボックス内容を入力する
- 箇条書きリストを追加した例
- 箇条書きリストを追加した例
ボックス内容を入力する
スタイル 2：ラベルイン(角)
ボックス内容を入力する
- 見出し位置：枠内左上に配置されるデザイン
- アイコン、ボーダー色、見出し色、背景色を設定できます
- 角の丸みはなく四角のボックスです
メモボックスとして使う例
情報を表示する例
注意を促すアラートボックスとして使う例
- 箇条書きリストを追加した例
- 箇条書きリストを追加した例
スタイル 3：アイコンボックス(角)
- アイコンコンボックス風のデザイン
- サイドバーでアイコンを選択して使用します
- 見出しテキストは表示されません
- アイコンの種類、ボーダー色、背景色を設定できます
- 角の丸みはなく四角のボックスです
Cocoonアイコンボックスのカスタマイズも紹介していますが、こちらはアイコン・ボーダー色・背景色の組み合わせが自由なのでカスタムして使いやすいメリットがあります。
スタイル 4：ラベルアウト(丸)
ボックス内容を入力する
- スタイル1 の角に丸みをもたせたボックスです
ボックス内容を入力する
- 箇条書きリストを追加した例
- 箇条書きリストを追加した例
ボックス内容を入力する
スタイル 5：ラベルイン(丸)
ボックス内容を入力する
- スタイル2 の角に丸みをもたせたボックスです
メモボックスとして使う例
情報を表示する例
注意を促すアラートボックスとして使う例
- 箇条書きリストを追加した例
- 箇条書きリストを追加した例
スタイル 6：アイコンボックス(丸)
- スタイル3 の角に丸みをもたせたボックスです
ラベルボックスの位置や形、そして少し工夫するだけでもぐんと印象が変わりますよね！手動で追加CSSクラスを入力せずにクリック一つでデザインが選べます。
Cocoonラベルボックスの使い方
- Step1ブロックメニューを選択
ブロックエディタで「ラベルボックス」を選択します。
- Step2お好みのスタイルを選ぶ
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリック。
選んだスタイルがすぐに反映されます。
- Step3色・アイコン設定
お好みでアイコン設定、色設定をおこなってください。
カラーパレットの色をお好みで追加・変更することもできます。
- Step4ボックスの内容を編集
ボックス内にコンテンツを入力したら完成です。
Cocoonラベルボックス｜カスタマイズの注意点と特徴
カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。
- WAF設定
サーバーのWAF（Web Application Firewall）がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。 - ベーシック認証
- サーバー側でアクセス制限（ベーシック認証）を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。
実装手順｜Cocoonラベルボックスのデザインをサイドバーで切り替えするカスタマイズ
実装手順は以下の２ステップ。２ヶ所にコードを設定するだけなので作業時間は５分ほどです。
スタイル切り替えをエディタに追加
PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。
各スタイルを指定する
CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。
ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。
| 特定商取引法に基づく表記 | |
|---|---|
| サイト名 | Turicco |
| サイトURL | https://turicco.com/ |
| お問い合わせ | https://turicco.com/contact/ |
| 購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
| 納品方法 | 記事公開 |
| 販売価格 | 500円 |
| お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
| ※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
| 返金・キャンセルについて | codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへお願いします