WordPress Blog（QooQ）に使っているCSSたち（４）〜ブログ見出し（header-title、h1）〜

「WordPress Blog（QooQ）に使っているCSSたち（１）〜CSS追加方法と全体像〜」の続き

ブログ見出し（header-title、h1）

Bloggerで指定した時とほぼ同じことをやる

参考：BloggerのヘッダーとブログタイトルのCSSをカスタマイズする

CSSは以下の通り

/*ブログタイトルにh1の装飾が反映されてしまうのでリセット*/
#header-title {
      background: initial;
}
#header-title:after {
      height: 0;
}



/*ブログ見出し*/
#single-header-title {
      position: relative;
      padding: 0.6em;
      color: #FFFFFF;
      background: #009688;
      border-radius: 0.5em;/*角丸*/
}

#single-header-title a {
      color: #FFFFFF;
}
#single-header-title:after {
      position: absolute;
      content: '';
      top: 100%;
      left: 30px;
      border: 15px solid transparent;
      border-top: 15px solid #009688;
      width: 0;
      height: 0;
}



/*h1*/
h1 {
      font-size: 20px;
      position: relative;
}
h1:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 7px;
      background: -webkit-repeating-linear-gradient(-45deg, #B2DFDB, #B2DFDB 2px, #fff 2px, #fff 4px);
      background: repeating-linear-gradient(-45deg, #B2DFDB, #B2DFDB 2px, #fff 2px, #fff 4px);
}*/
      font-weight: 900;
      position: absolute;
      font-size: 1em;
      left: 0.25em;
      top: 0.5em;
      color: #B2DFDB;
}

HTML例は以下の通り

<h1><p id="header1">ヘッダー１</p></h1>

表示例は以下の通り

ヘッダー１

ブログタイトルは自動的に装飾が反映される

ブログ個別記事のタイトルは「single-header-title」で指定することができる

「header-title」はブログ自体ののタイトル

このままだと、「h1」で指定した装飾がブログのタイトルにも適用されてしまうので、
「header-title」を「background: initial」と、「header-title:after」（下線）を「height: 0」と、装飾無効にしておく
（Bloggerでは、装飾無効にしなくても、ブログタイトルには影響しなかったので、なぜWordpressだけこうなってしまうのかは謎）

以上。

参考：CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選