Cocoonで見出し変更が反映されない!?初心者の為のcss見出しカスタマイズ方法。

スポンサーリンク

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の見出しはだいたいこれで解決すると思いますが、もし他のテーマを使う方はまた違った工夫が必要になるいうことです。

 

ちなみに結果はこんな感じに!

 

 

ブログのヘッダーにも反映されちゃう

 

私が見出しを変えようとチャレンジした時、当初こんな感じになってました。

 

 

ひどい

これは見出し1h1)をいじったんですけど、記事内だけに反映させたいのにホームにも反映されちゃうんです。

 

「あ、そしたら見出し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のカスタマイズについて色々書いてますので、よければそちらもどうぞ!

ブログカスタマイズに関する記事はこちらから

 

スポンサーリンク
スポンサーリンク
ブログ運営
スポンサーリンク
/ フォローする /
ハナワトリクス