投稿記事のh2,やh3などの見出し要素をカスタマイズしようとしたところ、インデックスのページにも反映されてしまい、困っていませんか?
解決いたします!
解決法
カスタムCSSやテーマエディターに
.article h2{
background-color:red;
}
.article h3{
border:3px solid black;
}
などのように、
.article h2{}
と書いてください。
これで解決するはずです。
よく起こる問題
h2{
border-bottom:2px solid orange;
}
と、書いた場合、

上記のようにインデックスページ(HOME)のh2にも反映されてしまいます。
記事のh2にのみ反映させたい場合は、.article h2{}と書きましょう。
デベロッパーツール×解決法の探し方
Cocoonの設計者がCocoonを作る際に、記事のh2に「Classはarticle h2」という風に付与していますので、探すのは少し困難ですが
デベロッパーツールを使って探しましょう。
※デベロッパーツールはF12キーを押すことで見ることができます。

デベロッパーツール×使い方
F12を押すと上記のような画面になります。
これはWEBサイトをHTML画面で見れるようなものです。
HTML部分にカーソルをあわせると、今カーソルを合わせている部分が光ります。
上記の画像では、「position:sticky」と書いてある部分です。
クリックして親要素をクリックしていって、お目当ての要素に辿り着いたら、
お目当ての要素をクリックしましょう。
すると一番右の欄に付与されているCSSが見れますので、それで発見です。
見出しカスタマイズ例
{
/*線の種類(実線) 太さ 色*/
border-bottom: solid 3px red;
padding: 2em;/*文字周りの余白*/
}
見出しカスタマイズ例
{
color: green;/*文字色*/
border: solid 3px green;/*線色*/
padding: 2em;/*文字周りの余白*/
border-radius: 10px;/*角丸*/
}
見出しカスタマイズ例
{
padding: 2em;/*文字周りの余白*/
color: blue;/*文字色*/
background: lightblue;/*背景色*/
border-left: solid 5px black;/*左線(実線 太さ 色)*/
}
見出しカスタマイズ例
{
color: white;/*文字色*/
padding: 2em;/*文字周りの余白*/
line-height: 15px;/*行高*/
background: orange;/*背景色*/
border-radius: 15px 8px 5px 25px;/8px 30px 5px 15px/*左側の角を丸く*/
}
見出しカスタマイズ例
{
padding: 2em;/*文字周りの余白*/
color: white;
text-shadow: 0 0 5px black;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
見出しカスタマイズ例
{
position: relative;
color: red;
line-height: 1.4;
-webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}
見出しカスタマイズ例
と、疑似要素を使わない簡単なCSSの見本をいくつか紹介しました。
他にも疑似要素を使ったり、アイコンをつかったり、CSSの幅はとても奥深いので別の記事にて紹介します。
本記事も最後までお読みいただきありがとうございました。