こんにちは～こなゆです。
今日はオススメの見出しを紹介しよう…と思ったのですが、
初期設定の見出しを消す方法を先に紹介します！
見出しのCSSを入力したのに、前の見出しのデザインと被さって表示される？？？
なんで？？
ということをなくすためのCSSです！
私はもっと早く知りたかった(´Д⊂ヽ
それでは早速以下をご覧ください！
今回の具体的なイメージ
最終的に↓のようにしたい場合を考えます。
しかし、デフォの見出しの設定が↓
これに見出しのCSSを書き加えると、↓のように合わさってしまう
今回はこれを解決していくわけです！
見出しリセットのCSS
以下で紹介するコードを追加する見出しコードの上に書いてくださいね！
（これはCSSを記述するところで上に書かないと、そのコードが優先されないためです。
追加するコードの後ろに書いてしまうと、後ろに書いたリセットのコードが優先されて真っ白の見出しになってしまう）
さて、今回は消したい見出しをh3として書いていきます。
h3（大見出し）ではなくh4（中見出し）にしたい場合は、h3の部分を書き換えてくださいね！
h3（大見出し）ver.
/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}
h4（中見出し）ver.
/* 見出しのリセット */
.entry-content h4,
.entry-content h4::before,
.entry-content h4::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h4,
.entry-content h4::before,
.entry-content h4::after {
background: none;
border: none;
border-radius: 0;
}
h5（小見出し）ver.
/* 見出しのリセット */
.entry-content h5,
.entry-content h5::before,
.entry-content h5::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h5,
.entry-content h5::before,
.entry-content h5::after {
background: none;
border: none;
border-radius: 0;
}
これで無事にリセットされたはずです！
まとめ
このコードさえあれば、テーマショップでどんなデザインを選んでもリセットすることが出来ます。
これをもとに自分のしたいデザインにしてくださいね！
それではまた！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ブログ村に参加しています！ポチっとお願いします(*'▽')
