はてなブログで見出しをカスタマイズする方法

こんにちは！りさこです！

今日は、見出しをカスタマイズしてみようと思います。

カスタマイズしてない状態

カスタマイズしてないと、文字の大きさが変わって、太文字になるだけで、全然目立ちません。

見出しをカスタマイズする方法

簡単なので、大見出し、中見出し、小見出し、一気にカスタマイズしてみます。

デザイン→カスタマイズ→カスタムCSSの空欄に

.entry-content h3{
    color: grey; 
    background: #FFC0CB;
    border-radius: 5px; 
    padding: 20px 20px;
}

.entry-content h4{
    color: grey; 
    padding: 10px 15px; 
    border-bottom: 3px solid #FFC0CB;
    }
    
    .entry-content h5{
    color: grey;
    padding: 10px 15px; 
    border-bottom: 3px dotted #FFC0CB;
    }

と書くと…

見出しが見やすくておしゃれになりましたー！！！！！

大見出しはh3、中見出しはh4、小見出しはh5で表示されているので、お好みでカスタマイズしてみてください。

今回参考にした記事はこちら。

www.yukihy.com

こちらの記事では、私がやってない見出しのカスタマイズのパターンも紹介されているので、ぜひ見てみてください！

まとめ

みなさんもお好みの見出しにカスタマイズできたでしょうか！？

本当に簡単にできて、しかも見やすさも一気にアップするので、ぜひカスタマイズしてみてください！

おわり