こんにちは、ぷくぷくです！
WordPressの無料テーマ「Cocoon」、本当に素晴らしいですよね。
私はわいひらさん（@MrYhira）の「Veil Nui Simplog」というスキンをベースに使わせていただいているのですが、
「このスキンの雰囲気は大好き！でも、見出しのデザインだけ、もう少し自分好みに変えたいな…」
「でも、CSSとかいう呪文みたいなコードは全然わからない…」
そんな風に思っていました。
でも、最新のAIに相談しながら試してみたら、CSS知識ゼロの私でも、自分好みの見出しデザインにカスタマイズすることができたんです！
この記事では、私のような「超」がつく初心者でも大丈夫なように、AI（今回はGoogleのGemini）と一緒にCocoonの見出しデザインをカスタマイズした全記録を、失敗談も交えながらお届けします。
同じスキンを使っている方や、カスタマイズで悩んでいるあなたの、はじめの一歩を後押しできれば嬉しいです！
今回のカスタマイズで使うAIについて
今回、私の無茶なお願いにたくさん応えてくれたのは、Googleが開発している「Gemini（ジェミニ）」というAIです。対話形式で質問に答えてくれる、すごい相棒です。
まずは基本！CSSはどこに書くの？
AIにコードを作ってもらっても、それをどこに貼り付ければいいか分からないと始まりませんよね。
Cocoonのカスタマイズは、WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」という場所で行います。
ここにAIが作ってくれたCSSコードをコピペするだけで、サイトのデザインがリアルタイムで変わっていくのが確認できます。とっても便利！
【第一の壁】AIのコードを貼っても何も変わらない！
早速、AIに「サイトの雰囲気に合う、かっこいい見出しのCSSを作って！」とお願いして、出てきたコードを「追加CSS」に貼り付けてみました。
…しかし、何も変わらない。
プレビュー画面はうんともすんとも言いません。
「やっぱり初心者には無理なのか…」と諦めかけたその時、AIからこんなアドバイスが。
AIのアドバイス：「!important をつけてみてください！」
どうやら、Cocoon本体やスキンが元々持っているデザイン設定が強力で、後から追加したCSSが負けてしまっていたようです。
!important は、「他のどの設定よりも、この設定を最優先して！」という、いわば魔法の呪文。
言われた通り、コードの各行の末尾に !important をつけてみると…
変わったー！
AIの言う通りでした。最初の壁は「!important」で突破です！
【第二の壁】サイドバーのデザインまで崩れちゃった…
見出しのデザインが変わって大喜びしていたのも束の間、新たな問題が発生。
なんと、記事の中の見出しだけじゃなく、サイドバーの「カテゴリー」や「最近の投稿」といった部分まで、同じデザインに変わってしまったのです。
これはマズい…。
またAIに泣きつきます。「記事の中の見出しだけを変えたいんです！」
AIのアドバイス：「適用範囲を限定するセレクタ .article を使いましょう！」
Cocoonでは、記事の本文エリアが .article というクラス名で囲まれているそうです。
そのため、h2 と指定するのではなく .article h2 と指定することで、「記事エリアの中にあるh2見出しだけ」に限定できるとのこと。なるほど！
言われた通りにCSSを修正すると、見事に記事内の見出しだけが変わり、サイドバーは元のデザインに戻りました。完璧です！
【コピペOK】AIが作ってくれた見出しデザインパターン集
AIに相談する過程で、たくさんの素敵なデザイン案が生まれました！
皆さんのサイトの雰囲気に合わせて使えるように、いくつかパターンを共有しますね。
以下のコードの中から気に入ったパターンのものを丸ごとコピーして、「追加CSS」に貼り付けてみてください。
▼ パターンA：シャープなグラデーション風
/* --- パターンA：シャープなグラデーション風 --- */
.article h2 {
color: #fff !important;
background: linear-gradient(to bottom, #6b83c1, #5f76b3) !important;
padding: 0.7em 1em !important;
border: none !important;
border-left: 5px solid #3b4c78 !important;
border-radius: 3px !important;
}
.article h3 {
color: #3b4c78 !important;
padding: 0 0 0.5em 0 !important;
border: none !important;
border-bottom: 2px solid #5f76b3 !important;
background: none !important;
}Code language: CSS (css)▼ パターンB：帯＋アクセントライン
/* --- パターンB：帯＋アクセントライン --- */
.article h2 {
position: relative !important;
color: #3b4c78 !important;
background: #f0f2f8 !important;
padding: 0.8em 1em !important;
border: none !important;
border-radius: 3px !important;
}
.article h2::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
height: 100% !important;
width: 8px !important;
background-color: #5f76b3 !important;
border-radius: 3px 0 0 3px !important;
}
.article h3 {
position: relative !important;
color: #3b4c78 !important;
padding: 0 0 0.5em 1.2em !important;
border: none !important;
border-bottom: 1px solid #cacedd !important;
background: none !important;
}
.article h3::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0.2em !important;
width: 5px !important;
height: 1.2em !important;
background-color: #5f76b3 !important;
}Code language: CSS (css)▼ パターンC：ミニマルなグラデーション下線
/* --- パターンC：ミニマルなグラデーション下線 --- */
.article h2 {
position: relative !important;
color: #3b4c78 !important;
padding: 0 0 0.6em 0 !important;
border: none !important;
background: none !important;
}
.article h2::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 4px !important;
background: linear-gradient(to right, #5f76b3, #b9c3e0) !important;
border-radius: 2px !important;
}
.article h3 {
position: relative !important;
color: #3b4c78 !important;
padding: 0.3em 0.5em !important;
border: 1px solid #cacedd !important;
background: none !important;
border-radius: 3px !important;
}Code language: CSS (css)そして私が最終的に決めたデザインはこちら！
いろいろなパターンを試した結果、私が最終的に「これだ！」と心に決めたのが、記事タイトルと見出しのデザインを入れ替えるというアイデアを元にした、このスタイルです。
このデザインにたどり着くまでに、AIに「タイトルの背景をなくして」「その色を文字色にして」「見出し2の角は尖らせて！」など、たくさんの微調整をお願いしました。
その結果が、こちらです！
どうでしょうか？
個人的には、ベーススキンの良さを活かしつつ、オリジナリティも出せた大満足の仕上がりになりました！
まとめ：AIがいれば、CSS初心者でもブログはもっと楽しくなる！
いかがでしたか？
「CSSは難しそう」と敬遠していましたが、Geminiという最高の相棒がいれば、まるで専属の家庭教師に教えてもらう感覚で、楽しくカスタマイズができました。
今回の挑戦で学んだ、AIにうまくお願いするコツは、
- 具体的に、丁寧にお願いする（「こうしたい」を明確に伝える）
- うまくいかなかったことを、正直に伝える（スクリーンショットを見せるのも有効！）
- 諦めずに、対話を続ける
ことだと感じました。
もしCocoonのカスタマイズに悩んでいるなら、ぜひAIを活用してみてください！！
