デフォルトの見出しをリセットする方法【Cocoon/モダンブラック】

     
サイトを見やすくする重要なアイテムの1つ 【 見出し 】 。
見出しを変えるだけで、だいぶサイトの印象が変わりますよね。
見出しをカスタマイズするにはまず、デフォルトの見出しをリセットする必要があります。
ここでは none(管理人) が実際に使っている 【Cocoon/モダンブラック】の
デフォルトの見出しをリセットする方法をご紹介します。
     

 

 

 

 

 

1. CSSコードをコピーしましょう。

     
 デフォルトの見出しをリセットする CSSコードです。
(右上にあるマークをクリックすると簡単にコピーできます。)
 見出し線の一部が残るなどして、なかなかオールクリアにならないデフォルトの見出しも
 このCSSコードできれいにリセットできますよ。
     
.article h2::before {
border-top: none;
}
.article h2::after {
border-bottom: none;
}
.article h2{
border: none;
}
.article h3::before {
border-top: none;
}
.article h3::after {
border-bottom: none;
}
.article h3{
border: none;
}
.article h4::before {
border-top: none;
}
.article h4::after {
border-bottom: none;
}
.article h4{
border: none;
}
.article h5::before {
border-top: none;
}
.article h5::after {
border-bottom: none;
}
.article h5{
border: none;
}
.article h6::before {
border-top: none;
}
.article h6::after {
border-bottom: none;
}
.article h6{
border: none;
}

 

 

2. コピーしたCSSコードを Stylesheet に貼り付けましょう。

 

 

Stylesheet (style.css) にコピペする時は必ず CocoonChild になっていることを確認してください。

 

 

 

 

3. 見出しをリセットできたか確認しましょう。

     
確認用に投稿記事(下書き)を作っておくと便利ですよ。
無事にリセットされれば、記事(下書き)内の見出し線がキレイに消えます。
     

 

 

 

 

4. 見出しをカスタマイズしましょう。

     
コピペOKの すてきな見出しを紹介しているサイトが沢山あるので、
いろいろと探してみてくださいね。
     

 

見出しのカスタマイズをするのにおススめのサルワカさんのサイトです。
シンプル系からオシャレなものまでたくさんのデザインがあります。
CSSコードも丁寧に作られているので、文字の色や線の色等のカスタマイズがとてもしやすいです。
     

 

 

 

 

 あとがき 
     
【Cocoon/モダンブラック】のデフォルトの見出しのリセットがなかなかできずに苦労しました。
見出し線の一部がどうしても消えずに残ってしまうんですよね…。
そんななか、いろいろなサイトで勉強させてもらいながら
全ての見出し線が消えるCSSコードを作ってみました。