初心者向け!見出し(hタグ)を使って見やすいブログデザインにしよう

ブログを始めた人の中で、ある日「読みづらいな」と思った経験はありませんか?
そんなブログ初心者の方に向けて、hタグを使って見出しを付けたブログの書き方をご紹介します。

hタグって何?

本文の中に見出しを入れるには、hタグが必要になります。
そもそもhタグとは何かという方に、表記の仕方と見え方をご紹介します。

表記の仕方

<h1>大見出しにはh1</h1>
<h2>中見出しにはh2</h2>
<h3>小見出しにはh3</h3>
<h4>さらに小見出し</h4>
<h5>さらに小見出し</h5>

というように、数字が大きくなるほど小さい見出しになるので、それに合わせて見出しを作りhタグでくくるだけです。
上の表記は一般のブラウザではこのように見えます。
hタグの見え方

hタグの基本は以上のような感じです。
使用する見出しは1から順番に使っていくようにしましょう。(h1の次にh4などにはしません)
1をメインの見出しとして一度の使用とし、それ以外を複数使うという方法にしましょう。
このようにすることで、見やすさとSEO対策を同時にすることができます。

hタグをカスタマイズする

hタグの使い方がわかったところで、次は見出しを派手にして目立つように変えてみましょう。
ブログのCSSを変更することでhタグに装飾をすることができます。

例えば、CSSで1タグの表記が以下のようなスタイルの場合

h1 {
  font-size: 24px;
  border-left: 5px;
  border-left-style: solid;
  border-left-color: #FFD700;
  background-color: #FFFACD;
}

h1タグで文章を打つと
h1タグ
こうなります

上のスタイルを元に、そのスタイルの数値やカラーコードを変えてみます

このように変えて

h1 {
  font-size: 30px;
  border-left: 10px;
  border-left-style: solid;
  border-left-color: #000000;
  background-color: #cccccc;
}

h1タグで文章を打つと
無題
こうなります

以上のように、スタイルシートに見出しのhタグのスタイルを書き換えることで、自分のサイトに合った色や目立ちやすい見出しタグを作ることができます。

見出しデザインの参考になるサイト

CSSを変えればいいというところまでわかれば、あとは覚えなくても大丈夫。
コピペで作れる、見出しデザインの参考になるサイトがたくさんあります。

日刊ウェブログ式

無題

TM Life

無題

streamer

無題

まとめ

このようにして、自分の好きなデザインの見出しを見つけてみてください。
内容がなくても、見出しがかっこいいだけでブログの見え方は180度変わります!
ブログカスタマイズの超入門として、hタグを使った見出しデザインの方法をご紹介しました。