Cocoonで記事を装飾する方法として「段落ブロック」がありますが、「リストやボタンも入れたい…」と思ったとき、中にブロックを組み込む用途には向いていません。
装飾はそのまま活かしながら、ブロックも自由に入れたいな〜。
そこで今回は、Cocoonの白抜きボックスを活用した「デザイン拡張カスタマイズ」をまとめました。
このカスタマイズを入れておくとこんなことができるようになります。
後半では、実際に当ブログで使っている完成コードもそのまま公開しています。
コピペベースで導入できるので、
- HTMLやCSSが苦手な方
- デザイン調整を時短したい方
- Cocoonをもっと使いやすくしたい方
にもおすすめです。
Cocoon白抜きボックスのデザイン一覧
白抜きボックスは「シンプルで使いやすい」のが魅力。
ただ、標準デザインだけだと少し物足りなく感じることもあるので、用途ごとに使い分けしやすいように実際に使っているデザインを整理していった形です。
例えば、
- 通常解説 → 細線
- 注意ポイント → 太線
- 補足 → 付箋風
- 体験談 → 紙風
のように使い分けるだけでも記事全体が読みやすくなります。
編集画面からワンクリックで切り替えできるので、「今回はどれを使おうかな」くらいの感覚で選べます。
色設定も自由なので、サイト全体の雰囲気に合わせやすいのも便利です。
カラーパレットの色を変更する方法も参考にしてください。
では、デザインを用途別にご紹介します。
標準機能だけではここまで選べません。
本文になじむ｜基本枠デザイン
普段使いしやすい基本系です。
特に「実線（細線）」はどんな記事にも合わせやすく、迷ったらこれでOK。
デフォルト（比較用）
特徴： シンプルな外枠
用途： 通常本文・説明コンテンツ・ベース枠
二重線
特徴： きれいめ・ややフォーマル
用途： まとめ枠・要点整理
実線（細線）
特徴： クリーンで万能
用途： 解説・手順・汎用枠
実線（細線・角丸）
特徴： やさしい印象
用途： 初心者向け解説・補足説明
破線（細線）
特徴： 少し軽やか
用途： コラム・豆知識
破線（細線・角丸）
特徴： 柔らかい雰囲気
用途： 会話調コンテンツ・補足メモ
影付き
特徴： 枠なしで自然に強調
用途： 本文サポート・補足情報
重要ポイントを目立たせる｜強調・注意向け
ここは「読者の視線を止めたい時」に便利です。
派手すぎないので、Cocoonのシンプルさとも相性がいいです。
実線（太線）
特徴： 存在感あり
用途： 結論・重要ポイント
実線（太線・角丸）
特徴： 強調＋やわらかさ
用途： 重要まとめ・注目情報
付箋風（上ライン）
特徴： ワンポイント強調
用途： 覚えておきたい内容
付箋風（左ライン）
特徴： 注意喚起向き
用途： 重要補足・読み飛ばし防止
記事の雰囲気をつくる｜世界観・装飾系
このあたりは、記事全体の雰囲気づくりに便利です。
特に、紙風、ノート風、ステッチ系は、少し読みもの感が出るので体験談やレビュー系記事と相性が良いです。
ストライプ柄
特徴： 視覚的アクセント
用途： 話題転換・セクション区切り
方眼柄
特徴： モダン・整理感
用途： 比較・一覧情報
紙風デザイン
特徴： 立体感・演出向き
用途： 体験談・実例紹介
ノート風デザイン
特徴： 可愛い印象
用途： 雑記・語り口記事
ステッチ（ブラウン）
特徴： おしゃれ感
用途： デザイン重視記事
ステッチ（ホワイト）
特徴： やさしく可愛い
用途： 女性向け・ライフスタイル系
自分でデザインしたい方向けに、各スタイルの具体的なCSSはこちらの記事で確認できます。
Cocoonには白抜きボックス以外にも便利な装飾がたくさんあります。装飾ブロックガイドもあわせてご覧ください。
Cocoonカスタマイズ時の注意点
基本的にはコードをコピペするだけで導入でき、Cocoon標準環境で動作確認済みです。
- CSSを少し触ったことがある
- 子テーマ編集をしたことがある
くらいの経験があればそこまで難しくありません。コードにはコメントを付けて整理しているので、カスタマイズしやすい構成にしています。
- スマホ表示対応済み
- カスタム変数でサイズ調整しやすい
- スキンによってはCSSが干渉する場合あり
- 親テーマではなく子テーマ編集推奨
- PHP編集前はバックアップ推奨
- WAF設定（セキュリティ設定）によっては保存エラーが出る場合あり
もし保存できない場合は、サーバーのWAF設定を一時的にOFFにしてください。（※作業が終わったらONに戻します）
Cocoon白抜きボックスの実装手順（完成コード）
ボックスの装飾自体は難しくありません。
ただ実際は、
- スマホで崩れる
- CSSが干渉する
- 微調整が終わらない
…みたいなことも多く、気づけばかなり時間を使いがちです。
そこで今回は、実際に当ブログで使っている完成版コードをそのまま使える形でまとめました。
コピペだけで使えるよう、スマホ表示や余白バランスも含めて調整済みです。
- ラベルPHPコードを貼り付け
目的：エディタに「デザイン選択機能」を追加
記述場所：子テーマの
functions.php（PHPはスタイル登録のみで既存記事には影響しません）
- ラベルCSSコードを貼り付け
目的：各デザインの見た目を反映
記述場所：子テーマの
style.css(スタイルシート) - ラベルエディタでデザインを選択
- 対象ブロックを追加
- サイドバーの「スタイル」を開く
- 追加したスタイルを選択
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「テーマのための関数 (functions.php)」を開く
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記
エラー防止：不要なスペース等が入らないよう、慎重に編集をおこなってください
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「スタイルシート (style.css)」を開く
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加
カスタマイズ全体の流れ
- 登録：codocへ会員登録（初回のみお願いします）
- 入力：有料エリアの内容をご自身で入力してください
- 確認：プレビューで表示確認して完了です
販売者情報は 「特定商取引法に基づく表記」をご確認ください。
Comment 記事の感想を書き込んでいただけると幸いです