yoshiislandblog.net
元営業の駆け出しアラサーSEが、休日にMACと戯れた際の殴り書きメモ。日々勉強。日々進歩。

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

2021-01-12

WordPress Blog(QooQ)に使っているCSSたち(1)〜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">ヘッダー1</p></h1>


表示例は以下の通り

ヘッダー1

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


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

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

このままだと、「h1」で指定した装飾がブログのタイトルにも適用されてしまうので、
「header-title」を「background: initial」と、「header-title:after」(下線)を「height: 0」と、装飾無効にしておく

(Bloggerでは、装飾無効にしなくても、ブログタイトルには影響しなかったので、なぜWordpressだけこうなってしまうのかは謎)

以上。


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