ブログを始めると、
「無料テーマのままでは少し物足りない」
「自分だけの個性を出したい」
と思うことがあります。
私もCocoonを使い始めてから、少しずつサイトを自分好みにカスタマイズするようになりました。
CSSの知識はほとんどありませんでしたが、Chromeの検証ツールでセレクタを確認しながらChatGPTと相談することで、
・H2見出しを高級感のあるゴールドデザインへ変更
・メインメニューを落ち着いたブルーへ変更
・文字色をシルバー調へ変更
といったカスタマイズができました。
特にこだわったのはH2見出しです。
ただ金色にしたのではなく、金属が光を反射しているような質感を表現したくて何度も色味やグラデーションを調整しました。
この記事では、実際に私が行ったCocoonカスタマイズの内容と、Chrome検証ツールとChatGPTを使った初心者向けの方法を紹介します。
今回カスタマイズした内容
今回変更したのは次の内容です。
- H2見出しを光沢感のあるゴールドデザインに変更
- H3見出しのデザイン調整
- メインメニュー背景色を落ち着いたブルーへ変更
- メニュー文字色をシルバー調へ変更
- サイト全体の統一感を調整
大掛かりな変更ではありませんが、サイト全体の印象は大きく変わりました。
【2026年版】Cocoonカスタマイズ完全ガイド｜初心者でも簡単にできる設定方法
Cocoonカスタマイズのやり方を初心者向けにわかりやすく解説。サイトカラー変更、ヘッダーロゴ設定、吹き出し活用、ボタン設置、CSSカスタマイズまで画像付きで紹介。WordPressブログをおしゃれで見やすくしたい方におすすめの完全ガイドです。
affiliateyarikata.biz
2026.06.05
Chrome検証ツールが便利だった理由
CSS初心者の私が一番助かったのがChromeの検証ツールです。
変更したい場所で右クリックして「検証」を押すだけで、どのCSSセレクタを変更すればよいか確認できます。
CSSの知識がなくても変更したい場所を特定できるので非常に便利でした。
H2見出しを本物の金属のようなゴールドに変更した
今回もっとも時間をかけたのがH2見出しのデザインです。
最初は単純な黄色や金色を試しましたが、どうしても平面的で安っぽく見えてしまいました。
そこで色味だけではなく、
- 光が当たる部分
- 影になる部分
- 金属特有の輝き
を意識しながら何度も調整しました。
私が目指したのは「金色の文字」ではなく、「本物の金属ゴールドが光っているように見える見出し」です。
現在のサイトでは、一般的な黄色ではなく、光沢感のあるゴールドとして見えるよう工夫しています。
