見出しタグ（Hタグ）を使って記事を見やすくする

ワードプレスで見出しを表示するときに使う見出しタグ（Hタグ）の使い方に関してです。

Hタグは主に記事中の見出しを指定するタグで、読者や検索エンジンから記事中の見出しを認識させやすくする効果があります。

HタグにCSSを設定し見た目を決めておいて、記事中でいつも使う癖をつけておくといいでしょう。

Hタグ（見出しタグ）とは

Hタグ（見出しタグ）とはつまり↑の部分。
その名の通り記事内で見出しを表示するために使うタグです。

ちなみにこの上の見出しはこのように編集画面では記述してあります。

<h3>Hタグ（見出しタグ）とは</h3>

これをh1～h6、までで指定することで、特に長い記事を書く際にそこに何が書いてあるのかわかりやすくなり、文章構成がはっきりするので、ユーザビリティの向上に繋がります。

また、Hタグは記事内の文章よりも重要視されるため、SEO効果も期待できます。

Hタグの正しい使い方

Hタグは主にh1～h6の6種類があり、番号が小さいほど重視されます。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

それぞれの見出しは上記のようにHタグで囲むことで表示させることができます。

ただし注意点として、h1タグはそのページの最もメインの文に指定するもので1ページに1つだけしか記述してはいけません。
また、h2タグはその次のサブタイトル的なものに指定されている事が多いです。

記事内ではh3～h6を使うのが最も一般的なので、h3～h6までを記事内で使うようにしましょう。

また、Hタグは小さい番号から上に表示させるのが正しい使い方となるので、以下のような使い方はあまりよろしくありません。

<h4>見出し</h4>
文章
　<h3>見出し</h3>
文章
　<h3>見出し</h3>
文章
<h4>見出し</h4>
文章
文章

見出しの中にもさらに見出しをつける場合は、以下のように数字の小さいHタグがより重要になるようにしましょう。

<h3>見出し</h3>
文章
文章
　<h4>見出し</h4>
文章
　<h4>見出し</h4>
文章
<h3>見出し</h3>
文章
文章

より効率的に記事を書くために

Hタグで囲めば見出しを表示させることはできますが、毎回手打ちで入力するのは少しめんどくさいです。

プラグインでこのコードを挿入するボタンを投稿画面に追加できるので、やっておくと記事作成のスピードがアップすると思います。

詳しくはこちらを参考に▼
◎投稿画面タグ追加プラグイン「AddQuicktag」

見出しタグの見た目のカスタマイズ

おそらくどんなテンプレートでも、見出しタグのCSSは設定されているため、Hタグで指定するとそのテーマで指定されたスタイルになると思います。

この見た目を変えるにはCSSでh1～h6に対しての記述を変えれば変更できます。

ちなみにこのページでの見出しタグ（h3）のCSSはこのようになってます。

h3 {
margin: 0;
border-left: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
background: url(https://29college.biz/wp-content/uploads/2013/11/mokume6.jpg);
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px #d2691e;
}

気に入った見出しタグなどあれば、要素の検証なども使いながら参考にするとよいでしょう。

また、見出しタグのデザインを作る無料WEBツールなどのあるので、使ってみるといいかもしれません。

「見出し　ジェネレーター」で検索

「見出しタグ　カスタマイズ」で検索

「見出しタグ 使い方」で検索

目次の自動表示プラグイン　Table of Contents Plus

設定したHタグを基準に、目次を自動表示で作れるワードプレスプラグインがあります。

「Table of Contents Plus」

こちらのプラグインを使うと、目次を自動で表示する事が出来て、さらに記事内で設定したHタグにジャンプする事も出来ます。
こちらの記事にも設定してあるので、大体の感じはわかるかと思います。

詳しい使い方はこちらを参考にしてください
↓
「Table of Contents Plus　使い方」で検索