CSSで記事投稿のみの見出し変更×h2,h3カスタマイズ

2023-01-11

投稿記事の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の幅はとても奥深いので別の記事にて紹介します。

本記事も最後までお読みいただきありがとうございました。