Cocoonの「見出しボックス」をおしゃれにカスタマイズしたい方へ。
今回紹介するカスタマイズでは、Cocoon標準の「見出しボックス」をベースに、シンプル・影付き・テープ風など、記事の雰囲気に合わせてデザインを選べるようにしました。
「毎回CSSを書き換えるのは面倒…」という方でも使いやすいように、編集画面からワンクリックで切り替えできます。
「なんとなく素っ気ない」
「もっとサイト全体をおしゃれに整えたい」
そんな時に使いやすいよう、余白・色味・スマホ表示まで細かく調整しています。
- 見出しボックスに選べるデザインを追加
「シンプル」「影付き」：それぞれ角丸デザイン
「テープ風」：ストライプ柄
→ ワンクリックで使い分けできます。 - リストマーカーの色が自動で統一される
ボーダー色に合わせて、箇条書きの点も自然になじみます。 - コピペだけで導入可能
作業時間は5〜10分程度。コードを貼り付けるだけでそのまま使えます。
見出しボックスを主役にして記事全体の雰囲気を少し変えてみませんか。
完成コードは、記事後半で公開しています。
Cocoon見出しボックスをおしゃれにするカスタマイズ例
Cocoon標準の「見出しボックス」は便利ですが、デザインが単調になりやすく、記事全体の印象が似てしまいがちです。
このカスタマイズを入れておくと、編集画面からワンクリックでデザインを切り替えられるようになります。
- ブロックごとにデザインを切り替えできます
- Cocoon標準の色設定もそのまま使えます
まずは、どんなデザインになるのか見てみましょう。
| スタイル名 | 特徴 | おすすめ用途 |
|---|---|---|
| シンプル | 枠線のみで清潔感 | 情報整理・レビュー |
| 影付き | 立体感のあるデザイン | コラム・補足情報 |
| テープ風 | 装飾感が高く個性的 | お知らせ・Tips |
デフォルト（比較用）
Before
まずはCocoon標準のタイムラインです。
スタイル：Cocoonに元から用意されている、シンプルでクセのない基本デザインです。
改善ポイント
この記事のカスタマイズでは、見た目だけでなく使いやすさも意識して細かく調整しています。
細かい部分ですが、こうした調整で全体の完成度が変わってきます。
今回のポイントは、リストマーカーの色も自動で整えられるところ。見出しボックスだけでなく、サイト全体のリストマーカーをカスタマイズしたい場合は以下の記事も参考にしてください。
After
ここからは追加するデザインサンプルです。カスタマイズ後の変化を比較してみてください。
シンプル
- 枠線つきのベーシックなデザイン
- 見出しと内容が明確に区切られる
- シンプルでどんなテーマにも合わせやすい
シンプルスタイルの角に丸みをもたせたやさしい印象のタイプ
影付き
- ふわっと浮き上がるような、やわらかい雰囲気のデザイン
- コラムや補足情報を少し目立たせたい時にも使いやすい
- 影付きスタイルの角に丸みをもたせたタイプ
テープ風スタイル
- 「シンプルスタイル」をベースに、見出し部分が貼られたテープ風のデザイン
- 見出し部分を少し浮かせて、テープを貼ったような雰囲気に
- 「影付きスタイル」をベースに、見出し背景に控えめなストライプを追加したテープ風デザイン
- 見出し部分にマスキングテープを貼ったようなおしゃれで柔らかい印象
モバイルでのレイアウト崩れを防止
テープ風スタイルは見出しが幅を超えた場合「…」で省略表示されます。
- スマホなど狭い画面でもレイアウトが崩れません。
タイトル付ボックスでは、モバイルで表示が崩れているサイトをよく見かけます。
Cocoon見出しボックス｜カスタマイズの注意点と特徴
基本的にはコードをコピペするだけで導入でき、Cocoon標準環境で動作確認済みです。
- CSSを少し触ったことがある
- 子テーマ編集をしたことがある
くらいの経験があればそこまで難しくありません。コードにはコメントを付けて整理しているので、カスタマイズしやすい構成にしています。
- スマホ表示対応済み
- カスタム変数でサイズ調整しやすい
- スキンによってはCSSが干渉する場合あり
- 親テーマではなく子テーマ編集推奨
- PHP編集前はバックアップ推奨
- WAF設定（セキュリティ設定）によっては保存エラーが出る場合あり
もし保存できない場合は、サーバーのWAF設定を一時的にOFFにしてください。（※作業が終わったらONに戻します）
Cocoon見出しボックスのカスタマイズ実装手順（CSS・PHP）
ここから先では、この記事で紹介してきたデザインをそのまま使える「完成版コード」をまとめています。
- スマホで崩れにくい余白設計
- 長い見出しの省略表示
- マーカー色との統一感
見た目だけでなく、実際に使いやすいかまで含めて調整しています。
1から作ろうとすると意外と時間がかかる見出しデザインもコピペ中心で導入できます。ブログ全体の雰囲気を整えたい方はぜひ使ってみてください。
- ラベルPHPコードを貼り付け
目的：エディタに「デザイン選択機能」を追加
記述場所：子テーマの
functions.php（PHPはスタイル登録のみで既存記事には影響しません）
- ラベルCSSコードを貼り付け
目的：各デザインの見た目を反映
記述場所：子テーマの
style.css(スタイルシート) - ラベルエディタでデザインを選択
- 対象ブロックを追加
- サイドバーの「スタイル」を開く
- 追加したスタイルを選択
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「テーマのための関数 (functions.php)」を開く
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記
エラー防止：不要なスペース等が入らないよう、慎重に編集をおこなってください
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「スタイルシート (style.css)」を開く
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加
この見出しボックスのカスタマイズは、CSSの基本が理解できているとより自由に調整できます。初心者の方は先にこちらの記事も参考にしてみてください。
カスタマイズ全体の流れ
- 登録：codocへ会員登録（初回のみお願いします）
- 入力：有料エリアの内容をご自身で入力してください
- 確認：プレビューで表示確認して完了です
販売者情報は 「特定商取引法に基づく表記」をご確認ください。
Comment 記事の感想を書き込んでいただけると幸いです