Bloggerを使っていると見出しのh1~h3がなんかちょっとおかしいと感じるときがあります。

例えば記事タイトルは普通h1かh2だと思いますが、Bloggerでは初期状態でh3です。

そこで私は記事タイトルをh3からh1に変えました。

しかしそうなるとブログタイトルのh1と被ってしまいます。

そのため記事タイトルにCSSでデザインを施すとブログタイトルまでそのデザインが適用されてしまいました。

その解決方法を紹介します。

CSSのnot()

例えばこんな感じでh1をCSSで修飾しているとします。

h1{
  border-bottom: solid 3px #ffd700;
  position: relative;
}

そしてBloggerではブログタイトルは

<h1 class='title' style='background: transparent; border-width: 0px'>
              <b:include name='title'/>
            </h1>

という風に書かれています。

h1:not(.title){
  border-bottom: solid 3px #ffd700;
  position: relative;
}

こんな感じに付け足せばできます。