はてなブログの見出しのデザインCSSをカスタマイズしていたら、なぜかh3の見出しだけ色がおかしくなる事案が発生しました。
今回その解消法をご説明します。
ただ、周りで同様の事象が起きていないか検索しても出てこなかったため、私だけかもしれません。
期待する見出し
下のキャプチャみたいなきれいな紺色を期待してました。
おかしくなった見出し
なぜか色が表示されません。（うっすらグレーっぽい？）
デザインCSSに追加したコード
h3 {
border-bottom: solid 3px #003366;
position: relative;
}
絶対に間違えていなはずだ。。。
修正したデザインCSSのコード
h3のタグに「.entry-content」を追加しました。
.entry-content h3 {
border-bottom: solid 3px #003366;
position: relative;
}
上記のコードを追加したところ、見事きれいな紺色のラインが表示されました。
原因
よくわかりません。(←おい！)
ただ、「entry-content」というのは「記事内の」という意味らしいです。
もしかしたら、カスタムCSSや、キャッシュのCSSが悪さしていたが、「entry-content」を定義したことで、記事内で最優先のスタイルとして適用してくれたのかもしれません。
ひとまず解消してよかったです。
コメント