ノート風スタイルのCSSを一部修正しました。
Cocoonの「段落ブロック」は手軽に装飾できて便利ですが、リストや画像など複数のブロックを中に入れられないのが少し不便。
装飾はそのまま活かしながら、
リストも画像も自由に入れたいな。
それを実現するのが、白抜きボックスの拡張カスタマイズです。
このカスタマイズを導入すると、
当サイトでも実装済みのため、表示崩れや運用面も安心。
「どのCSSを使えばいい？」と探し回る時間をなくし、記事装飾を迷わず選べる状態に変えます。
記事後半では、完成コードと導入手順を公開しています。
選べるデザイン一覧｜Cocoon白抜きボックスのカスタマイズ例
白抜きボックスは「主張しすぎないのに、情報を整理できる」のが魅力。このボックスをもっと使いやすく、見た目も楽しくできるカスタマイズ例をまとめました。
エディタからワンクリックで切り替え可能、色設定（ボーダー色・背景色）は自由です。
当ブログ運用済みの17種類を、用途別にご紹介します。
標準機能だけではここまで選べません。
本文になじむ｜基本枠デザイン
まずはここから。
主張しすぎず、どんな記事にも使いやすいスタイルです。
デフォルト
特徴： シンプルな外枠
用途： 通常本文・説明コンテンツ・ベース枠
二重線
特徴： きれいめ・ややフォーマル
用途： まとめ枠・要点整理
実線（細線）
特徴： クリーンで万能
用途： 解説・手順・汎用枠
実線（細線・角丸）
特徴： やさしい印象
用途： 初心者向け解説・補足説明
破線（細線）
特徴： 少し軽やか
用途： コラム・豆知識
破線（細線・角丸）
特徴： 柔らかい雰囲気
用途： 会話調コンテンツ・補足メモ
影付き
特徴： 枠なしで自然に強調
用途： 本文サポート・補足情報
重要ポイントを目立たせる｜強調・注意向け
読者の視線を止めたいときに使うスタイルです。
実線（太線）
特徴： 存在感あり
用途： 結論・重要ポイント
実線（太線・角丸）
特徴： 強調＋やわらかさ
用途： 重要まとめ・注目情報
付箋風（上ライン）
特徴： ワンポイント強調
用途： 覚えておきたい内容
付箋風（左ライン）
特徴： 注意喚起向き
用途： 重要補足・読み飛ばし防止
記事の雰囲気をつくる｜世界観・装飾系
デザイン性を高めたいときに活躍します。
ストライプ柄
特徴： 視覚的アクセント
用途： 話題転換・セクション区切り
方眼柄
特徴： モダン・整理感
用途： 比較・一覧情報
紙風デザイン
特徴： 立体感・演出向き
用途： 体験談・実例紹介
ノート風デザイン
特徴： 可愛い印象
用途： 雑記・語り口記事
ステッチ（ブラウン）
特徴： おしゃれ感
用途： デザイン重視記事
ステッチ（ホワイト）
特徴： やさしく可愛い
用途： 女性向け・ライフスタイル系
各スタイルの具体的なCSSはこちらのボックスデザイン記事で確認できます。
Cocoon白抜きボックスの基本操作（はじめての方向け）
この記事ではカスタマイズ方法を中心に解説していますが、はじめて使う方でも迷わないように基本操作を簡単にまとめておきます。
- Step1白抜きボックスを挿入する
ブロックメニューから「白抜きボックス」を選択。
- Step2お好みのスタイルを選ぶ
サイドバーの「ブロック」タブ→「スタイル」からデザインをクリックで即反映。
- Step3色・アイコンを設定する
ボーダー色や背景色をカスタマイズ。カラーパレットも自由に変更可能です。
- ボーダー色
- 背景色
→カラーパレットを自分好みに変更する方法はこちら。
- Step4ボックスの内容を編集
ボックス内にテキストや画像など、自由にコンテンツを入れれば完成です！
Cocoonカスタマイズ時の注意点と特徴まとめ
このカスタマイズは基本的にコピペで安全に導入でき、Cocoon標準環境で動作確認済みです。ただし、利用しているスキンやサーバー設定によっては挙動が変わる場合があります。作業前に以下のポイントを押さえておくと安心して進められます。
この記事のカスタマイズはスキン「なし」で検証しています。スキン独自のCSSが優先される場合、表示が崩れることがありますが、優先度調整（CSSの追加）でほぼ解決できます。（スキンと併用できるかはお問い合わせください）
CSS・PHP は必ず子テーマへ記述してください。親テーマへ書くとアップデート時に上書きされ、カスタマイズが消えてしまう可能性があります。
特にPHPを編集する場合、記述ミスで大きなエラーが起こることがあります。バックアップがあればすぐに復元できるので作業前にひとつ取っておくと安心です。
関連記事：バックアップ＆復元方法
WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。その場合は作業中だけWAFを一時的に OFFにし、完了後に ON に戻してください。
Cocoon白抜きボックスの実装手順｜完成コードのご案内
導入コード（特にCSS）は自分で調べて作ることもできます。
ただしその場合、デザインの統一や優先度調整など細かな調整が必要になります。
有料パートでは、実運用済み・調整済みの完成版コードをそのまま公開。
「CSSを探して微調整する時間」をなくし、すぐに完成形から使い始められます。
1回でも装飾探しに30分以上かけたことがあるなら、このコードはその時間をすぐに回収できます。
「装飾の自由度と、作業効率」その両方を手に入れたい方へ。
記事を書くたびに「今回はどのデザインにしよう？」と迷わず選べる環境が整います。
PHPの設定
目的：「スタイル切り替え機能」を追加
記述場所：子テーマの functions.php
（PHPはスタイル登録のみで既存記事には影響しません）
CSSの設定
目的：「各スタイルのデザイン」を定義
記述場所：子テーマのスタイルシート (style.css)
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「テーマのための関数 (functions.php)」を開く
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記
エラー防止：不要なスペース等が入らないよう、慎重に編集をおこなってください
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「スタイルシート (style.css)」を開く
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加
functions.phpに PHP コードを貼り付けstyle.cssに CSS を貼り付け- サイドバーで希望のスタイルを選択
- プレビューで表示を確認 → 完成！
以下は有料コンテンツのご案内および特定商取引法に基づく表記です。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード ・デビットカード ・プリペイド型クレジットカード ・Apple Pay ・Google Pay ・コンビニ決済
※決済はStripeを利用（SSL暗号化）。運営者はカード情報を保持しません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
500円（税込）
Comment 記事の感想を書き込んでいただけると幸いです