Cocoon（コクーン）で見出しカスタマイズが正常に反映されない！
皆さんこんにちは。リトマです。
先日、テーマの見出し（h2とかh3とか）を変更している時に、
「え、もともと設定されてる見出しとゴチャゴチャに混ざる」
「え、なんか自分のブログヘッダー部分にも反映される（望んでないのに）」
っていう問題にぶち当たりました。
私自身、見出し変更するのが久しぶりで忘れていた部分が多く、「初心者には難しいぞコレ…」と感じました。
というわけで本日は、そんな私も愛用しているワードプレステーマ「Cocoon（コクーン）」の見出しの変更方法について見ていきたいと思います。
Cocoonの見出しを反映させる方法
先ほど書いたように、初心者がつまづくとこって、
もともとの見出しが消えない
ブログのヘッダーにも反映される
ってとこだと思います。順番に見ていきましょう。
Cocoonのもとの見出し設定が消えない？
まずはじめに、さっき言ったような「もともと設定されている見出しと被る」ってやつについて。
ちょっと分かりにくいかもですが、この「プラグインのインストール」って所。
.article h3 {
border-bottom: solid 3px #FF8080;
}
ってのを見出し３（h3）に足している（ピンクの下線）んですが、もともとの灰色の枠が消えずに残っています。
まずはこのような「もともとの設定を消す」方法について。
先ほどのコードをこんな感じに書き換えます。
.article h3 {
border: 0;
border-bottom: solid 3px #FF8080;
}
見ての通り、border: 0;ってのを足してます。これそのまま解釈すると、「ボーダー（枠線）を消してくれ」ってことで、もともとあった「灰色の枠線を消してね」という風になります。
つまり、もともとの見出しの設定を全部けしてくれ！っていう都合のいいコマンドではなく、あくまで「もともとの見出しは枠線でできてるから、その枠線を上書きする」って意味合いになります。
Cocoonの見出しはだいたいこれで解決すると思いますが、もし他のテーマを使う方はまた違った工夫が必要になるいうことです。
ちなみに結果はこんな感じに！
ブログのヘッダーにも反映されちゃう
私が見出しを変えようとチャレンジした時、当初こんな感じになってました。
ひどい…。
これは見出し1（h1）をいじったんですけど、記事内だけに反映させたいのにホームにも反映されちゃうんです。
「あ、そしたら見出し２を使えばいいんか！」とか思う人がいるかもしれませんが、この見出し２を変えると今度は他のページの望まぬ部分に反映しちゃうんですよネ。
ってことで、そんな問題を解決するとってもいい方法がこちら。
.article h2{
border: 0;
border-bottom: solid 3px #FF8080;
}
あ、これさっきのコードまるまんま同じやん。って思って人がいるかもしれません。
はいそうです、同じです。実はもうさっきのに答えが含まれていました（笑）
ポイントは「.article」って部分。これを入れることで、「Cocoonの記事内だけでの見出し２」っていう指定ができていることになります。
これを入れずに、
h2{
border: 0;
border-bottom: solid 3px #FF8080;
}
とかって書いているサイトが多いので、これにすかさず.articleを入れましょう。これで解決。
ここでも一応いっておきますが、この「.article」が「記事内のみ」を表すってのもCocoon特有になります。
他のテーマをご利用の際は、そのテーマ特有の表現があるので、そちらを探して見てください。
ちなみに、ホームのヘッダーの見出し１にだけ変更を加えたい場合も、h2{}とかの前に「.（ホームのヘッダーを表す単語）」を加えれば変更できます（ちょっとそれが何だったかは忘れましたスイマセン…）。
まとめ
いかがでしたでしょうか。
本日は、CSS初心者だった頃の私が「え、わかんない…」ってなったポイント２つについて解説しました。
他の記事でCocoonのカスタマイズについて色々書いてますので、よければそちらもどうぞ！
