【はてなブログ】見出しの表示を変更しよう！！
はてなブログの見出しですが、デフォルトの表示が少し見づらく感じますので罫線やカスタマイズしていきたいと思います。
本記事で作成する見出しについて
本記事では中見出しに対して下記のような左と下に罫線を引いた見出しを設定していきます。
手順
①デザインメニューを開きます。
②工具マークの「カスタマイズ」アイコンをクリックします。
⓷「｛｝デザインCSS」欄にコードを貼りつけていきます。
どんなコードをデザインCSSに貼り付ければよいか？
下記のようなコードコピペしてください。左線（border-left）と下線（border-bottom）は黒色（#454545）で5pxと2pxでそれぞれ太さを変えています。色を変えたい方や太さを変更したい方はこの値を変更してみてください。また、text-shadowでテキストに少し影をつけていますが、好みの問題なのでなくても大丈夫です。なお、中見出しのため、h2かと思いますが、はてなブログでは「h4」とする必要があります。「h4」とする理由については後述します。
h4{
border-left: solid 5px #454545;
border-bottom: solid 2px #454545;
font-weight: bold;
margin: 1em 0 0.5em 0;
padding: 3px 10px;
text-shadow: 1px 1px 1px #fff;
}
はてなブログの見出しのタグについて！
ツールバーの大見出し、中見出し、小見出しをHTML編集モードでそれぞれのタグを見てみると大見出し、中見出し、小見出しがそれぞれ下記になっているのがわかります。
はてなブログの見出しは大見出し、中見出し、小見出しから順にh3、h4、h5 となっています。h1、h2ではないので注意してください！
もっとおしゃれな見出しにしたい
おしゃれな見出しのサンプル集を紹介しているサイトがありますのでサイト内のCSSコードを参考にカスタマイズしてみると面白いかもしれません。なお、はてなブログのデザインCSSに貼り付ける際はh3、h4、h5に書き換えてください！
