ブログを始めた人の中で、ある日「読みづらいな」と思った経験はありませんか？
そんなブログ初心者の方に向けて、ｈタグを使って見出しを付けたブログの書き方をご紹介します。
ｈタグって何？
本文の中に見出しを入れるには、ｈタグが必要になります。
そもそもｈタグとは何かという方に、表記の仕方と見え方をご紹介します。
表記の仕方
<h1>大見出しにはh1</h1> <h2>中見出しにはh2</h2> <h3>小見出しにはh3</h3> <h4>さらに小見出し</h4> <h5>さらに小見出し</h5>
というように、数字が大きくなるほど小さい見出しになるので、それに合わせて見出しを作りｈタグでくくるだけです。
上の表記は一般のブラウザではこのように見えます。
ｈタグの基本は以上のような感じです。
使用する見出しは１から順番に使っていくようにしましょう。（h1の次にh4などにはしません）
１をメインの見出しとして一度の使用とし、それ以外を複数使うという方法にしましょう。
このようにすることで、見やすさとSEO対策を同時にすることができます。
ｈタグをカスタマイズする
ｈタグの使い方がわかったところで、次は見出しを派手にして目立つように変えてみましょう。
ブログのCSSを変更することでｈタグに装飾をすることができます。
例えば、CSSで1タグの表記が以下のようなスタイルの場合
h1 {
font-size: 24px;
border-left: 5px;
border-left-style: solid;
border-left-color: #FFD700;
background-color: #FFFACD;
}
h1タグで文章を打つと
こうなります
上のスタイルを元に、そのスタイルの数値やカラーコードを変えてみます
このように変えて
h1 {
font-size: 30px;
border-left: 10px;
border-left-style: solid;
border-left-color: #000000;
background-color: #cccccc;
}
h1タグで文章を打つと
こうなります
以上のように、スタイルシートに見出しのｈタグのスタイルを書き換えることで、自分のサイトに合った色や目立ちやすい見出しタグを作ることができます。
見出しデザインの参考になるサイト
CSSを変えればいいというところまでわかれば、あとは覚えなくても大丈夫。
コピペで作れる、見出しデザインの参考になるサイトがたくさんあります。
日刊ウェブログ式
TM Life
streamer
まとめ
このようにして、自分の好きなデザインの見出しを見つけてみてください。
内容がなくても、見出しがかっこいいだけでブログの見え方は180度変わります！
ブログカスタマイズの超入門として、ｈタグを使った見出しデザインの方法をご紹介しました。