見出しを分かりやすく変更してみました

今回ははてなブログでの見出しの変更について紹介します。他ブログでもやりかたはほぼ同じなので参考にして下さい。

見出しを適度に付けるとブログの閲覧者様にも分かりやすくなり、Googleなどにも認知されやすくなります。

では、紹介します。

見出しの変更の仕方

はてなブログでは、

「ブログの管理画面」→「デザイン」→「カスタマイズ（真ん中のラチェットマーク）」→「デザインCSS」

をクリックして編集して下さい。下記のコードをデザインCSSの最下部に追加するだけで大丈夫です。

はてなブログ以外の方は、ともかくCSSにコードを追加してください。

見出し3を変更

以下のコードをデザインCSSに追加して下さい。それだけで十分です。

h3{
font-size: 110%;
margin:7px 0px;
padding:0 0 2px 2px;
border-left:11px solid #000000;
border-bottom:1px solid #000000;
}

※すでにh3について定義されています。というような警告文が出るかもしれませんが、無視して保存して下さい。

※「margin」や「padding」などの値を調整すれば、隙間を調整することができます。

※「boader left」の値を調整することで、左端の線の太さを調整できます。

※「boader bottom」の値を調整することで、下線の値の太さを調整できます。

見出し4を変更

以下のコードを先ほど追加したh3の部分の下に追加して下さい。

h4{
font-size: 90%;
margin:7px 0px;
padding:0 0 2px 6px;
border-left:6px solid #000000;
}

まとめ

見出し3と見出し4をこれで変更できたと思います。

これにより、見た目が視覚的に分かりやすくなったと思います。