Cocoonの白抜きボックスをカスタマイズ｜複数スタイルと簡単切り替え方法を解説

Cocoonテーマの「白抜きボックス」、使っていますか？

箇条書きリストなどのブロックが挿入できる
ボーダー色や背景色を自由に変更できる

シンプルなデザインながら使い勝手の良さが抜群！視認性が高い万能ボックスですが…

「もっとデザインにバリエーションが欲しい」
「ページ内で複数のスタイルを使い分けたい」

という声も少なくありません。

そこでこの記事では、Cocoonユーザーに人気の「白抜きボックス」に13種類のデザインを追加。さらにサイドバーで簡単に切り替えられる方法をご紹介します。

この記事を読むと…

Cocoonでも、有料テーマのような操作性を手軽に実現できます
デザインの幅が広がり、読者の視認性・読みやすさがアップ
実装手順は記事後半で有料公開しています。「コピペでサクッと導入したい方」はぜひ最後までご覧ください。具体的な実装手順を見る

カスタマイズ内容

サイドバーでのワンクリックデザイン切り替え
- ワンクリックで切り替えられる白抜きボックス13デザインを実装
同じページ内で複数のスタイルを併用可能
- 異なるデザインを同じページ内で自由に組み合わせできます。
簡単な実装手順
- コードを２か所に貼り付けるだけで完了、作業時間は５分程度です。
- 一度設定すれば、サイト全体で何度でも使い回し可能。
- 不要になったら追加したコードを削除するだけで元通りになります。

デザイン着せ替えシリーズ

普段、よく使うブロックがありましたらお試しくださいね。

INDEX

Cocoon「白抜きボックス」の実装イメージ【完成図】
1. 全13種類！白抜きボックスのスタイル一覧
2. 白抜きボックスの使用例｜ブログでの活用パターン
白抜きボックスの使い方｜基本操作と編集の流れ
Cocoonカスタマイズ時の注意点と特徴まとめ
【実装手順】白抜きボックスのデザインをサイドバーで切り替える方法
まとめ｜白抜きボックスをもっと自由に使いこなす

Cocoon「白抜きボックス」の実装イメージ【完成図】

この記事で紹介するカスタマイズの目的は、13種類の白抜きボックスデザインを、サイドバーからワンクリックで簡単に切り替えられるようにすることです。

白抜きボックスはもともと「外枠だけのシンプルなスタイル」なので、カスタマイズの自由度が高いのが特徴です。

実際の表示イメージを確認しながら、自分好みのデザインを選んでください！

以下、実際の白抜きボックス表示例を掲載します。

全13種類！白抜きボックスのスタイル一覧

Cocoonの「白抜きボックス」に、13種類の追加スタイルを用意しました。デフォルトスタイルに加えて、よりおしゃれで多彩なデザインが選べます。

「見た目を変えたい」「もっと自分らしいボックスを使いたい」という方は、下記の記事でスタイルのカスタマイズ方法（CSS変更）も紹介しています。

＼各スタイルのCSSはこちらの記事で紹介中／

【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集

ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！

色のカスタマイズについて

背景色／ボーダー色／文字色は、エディタのサイドバーから自由に変更できます。
CSSを少し編集することで、自分好みにアレンジできます。

デフォルト

通常のシンプルな白抜きボックス。

スタイル 1：二重線

二重線

特徴：ダブルボーダーがスタイリッシュ
ボーダー：太さ4px、スタイル：ダブル

スタイル 2：実線1（細）

実線 1

特徴：シンプルでクリーンな印象のボーダー。一般的な用途に適しています
ボーダー：太さ1px、スタイル：実線

スタイル 3：実線2（太）

実線 2

特徴：シンプルさを保ちつつ、少し太めのボーダーで存在感を出します
ボーダー：太さ5px、スタイル：実線

スタイル 4：破線1（細）

破線 1

特徴：破線のボーダーが遊び心を加え、目を引くデザイン
ボーダー：太さ1px、スタイル：破線

スタイル 5：破線2（太）

破線 2

特徴：太めの破線のボーダーでしっかりした印象を与えます
ボーダー：太さ2px、スタイル：破線

スタイル 6：ドット1（細）

ドット 1

特徴：点線＋角の丸みがやさしい印象を与えます
ボーダー：太さ2px、スタイル：ドット

スタイル 7：ドット2（太）

ドット 2

特徴：点線のボーダーがより太く、視覚的なアクセントが強いデザインです
ボーダー：太さ4px、スタイル: ドット

スタイル 8：付箋風1（上）

付箋風 1

特徴：上部にのみボーダーを持つことで付箋風のデザインに
ボーダー：太さ5px、スタイル：実線

見出し

ボーダー色・背景色を設定してご利用ください

スタイル 9：付箋風2（左）

付箋風 2

特徴：左にのみボーダーを持つことで付箋風のデザインに
ボーダー：太さ5px、スタイル：実線

見出し

ボーダー色・背景色を設定してご利用ください

スタイル 10：ストライプ背景

ストライプ

特徴：ストライプ模様の背景が特徴的で、視覚的なインパクトがあります
ボーダー：なし
背景：繰り返し線形グラデーション

見出し

色固定のため、設定は利用できません

スタイル 11：方眼背景

方眼

特徴：格子状のパターンを持つ背景で、視覚的なアクセントが強いデザインです
ボーダー：なし
背景：線形グラデーション（薄グレー）

見出し

色設定は利用できますが、方眼模様は薄いグレーのため背景は白がおすすめ

スタイル 12：めくれた紙風

めくれた紙風

特徴：右上に影付きの装飾で立体感を演出、めくれた紙風のアクセントを追加します
ボーダー：なし
装飾：右上にボーダー効果

見出し

薄い背景色との組み合わせが◎

スタイル 13：白ステッチ

白ステッチ

特徴：白のステッチ風のアクセントを追加し、柔らかくかわいい印象になります
ボーダー：なし
背景：破線のボーダー

見出し

背景色をうっすら入れると映えます

白抜きボックスの使用例｜ブログでの活用パターン

お気に入り

私のお気に入りはスタイル12「めくれた紙風」。シンプルで可愛い雰囲気が気に入っています♡

スタイル4の破線デザイン
ブログの注意書きなどにもピッタリ！

角丸＋点線のドット系は、柔らかい印象にしたいときに重宝しています。

スタイル10のストライプはシンプルで可愛さがあり◎。ベースが「白抜きボックス」なので、リストを追加できるのも嬉しいポイント！

箇条書き
このように
入れ放題

スタイル10の方眼もオシャレなアクセントになりますね。これはまるで有料テーマのSWELL。

箇条書き
このように
入れ放題

「付箋風ボックス（色固定）」を使っている方は、このカスタマイズに置き換えると、同様のデザインで色の自由度がアップして便利です！

実質、色固定のCocoon「付箋風ボックス」は不要になります。

目次に戻る

白抜きボックスの使い方｜基本操作と編集の流れ

Cocoonのブロックエディタでは、「白抜きボックス」を使って見やすくスタイリッシュなデザインを簡単に作成できます。以下の手順で操作・編集してみましょう。

Step1
白抜きボックスを挿入する

まずはブロックメニューから「白抜きボックス」を選択して、ページ内に挿入します。
Step2
お好みのスタイルを選ぶ

サイドバーの「ブロック」タブ内にある「スタイル」から、好きなデザインをクリックするだけで即反映されます。
Step3
色・アイコンを設定する
必要に応じて色やアイコンをカスタマイズしましょう。
- ボーダー色
- 背景色
カラーパレットの色も、自由に追加・変更できます。

→カラーパレットを自分好みに変更する方法はこちら。

429 Too Many Requests
turicco.com
Step4
ボックスの内容を編集

ボックス内にテキストや画像など、自由にコンテンツを入れれば完成です！

目次に戻る

Cocoonカスタマイズ時の注意点と特徴まとめ

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

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

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

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