はてなブログPROのスマートフォンで見出しを無効にする方法と記述場所

僕は、はてなブログのPROを使ってますが先日、大見出しのデザインを変更する際に色々悩んだ末ようやく解決したので同じように悩んでいる人の参考になればと思いシェアします。

元のデザイン

最初はこのような大見出しでした。

これを現在の吹き出し風のデザインにするためには次のようなCSSを使って変更します。

/* H3大見出し */
.entry-content h3 {
position: relative;
color: #0A0909;
padding: 8px 12px;
background-color: #DBDBDB;
border-radius: 6px;
}
.entry-content h3::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #DBDBDB;
content: '';
}


ところが、元のデザインとダブってしまい、このようになってしまいます。

見出しデザインを無効化

ダブらないためには元のデザインを無効にする必要があるので次のCSSで無効にしてから新しいデザインのCSSを記述します。

   /* h3見出しの無効化 */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}


中見出しを無効化したい時はh3のところをh4に、小見出しを無効化したい時はh5に書き換えれば良いです。

どこに指定するのか

見出しを無効にしてから、新しいデザインの指定をする一連のCSSをどこに記述すればよいでしょうか。


PCの場合はデザインCSSに記述すればOKですが、スマートフォンの記述場所が直ぐに分からなくて悩みました。


最初は記事下か記事上だと思ったのですが、無効にならずダブったままでした。


あれこれやってみて上手くいったのが ページャ下でした。

   /* h3見出しの無効化 */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}

/* H3大見出し */
.entry-content h3 {
position: relative;
color: #0A0909;
padding: 8px 12px;
background-color: #DBDBDB;
border-radius: 6px;
}
.entry-content h3::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #DBDBDB;
content: '';
}


僕の備忘録も兼ねて記事にしました。参考になれば幸いです。