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