ブログを読んでいて、「読みづらいな～」と感じるいちばんの原因。それは、目次がないことです。この記事では、はてなブログを始めたばかりの人のために、目次の入れ方を解説します。
ステップとしては、まず基本的な目次の入れ方（初級編）を説明します。次に、それを踏まえてPVアップにつながる目次の入れ方（中級編）をお伝えします。
- 【見習い編】目次は、入れ子構造でつくる！
- 【初級編】目次の作り方①・・・［編集見たまま］モードで本文を書く
- 【初級編】目次の作り方②・・・目次にしたい文章を選択し、「大見出し」「中見出し」に変換する
- 【初級編】目次の作り方③・・・目次アイコンをクリックする
- 【検索エンジンに正しい情報を！】h2タグ、h3タグを順番に入れよう！
- 【中級編】目次の入れ方①・・・［編集見たまま］モードで本文を書く
- 【中級編】目次の入れ方②・・・目次にしたい文章を選択し、「大見出し」・「中見出し」に変換する
- 【中級編】のおさらい
- 【らくちん】目次の入れ方・・・chrome拡張機能『Chrome Add-on for Hatena』でh2タグを挿入
- まとめ
【見習い編】目次は、入れ子構造でつくる！
本に目次があるように、ブログにも目次があると便利です。ブログを訪問した読者さんが、どこを読めば求める情報が得られるか、すぐにわかるからです。
目次は、「大見出し」「中見出し」「小見出し」を下図のように入れ子構造に配置することによって、作られます。
大見出し
中見出し
小見出し
小見出し
中見出し
小見出し
小見出し
小見出し
大見出し
中見出し
小見出し
小見出し
中見出し
小見出し
小見出し
【初級編】目次の作り方①・・・［編集見たまま］モードで本文を書く
まずは、［編集見たまま］モードで文章を書きます。今回は、説明のためにかんたんな本文を用意しました。短い文章なので、大見出しと中見出しだけで目次をつくります。
この本文から、下図のような目次の作成をめざします。
【初級編】目次の作り方②・・・目次にしたい文章を選択し、「大見出し」「中見出し」に変換する
下図の赤枠でかこった部分を大見出し、青枠でかこった部分を中見出しにしたい、とします。
最初に大見出しにしたい文章「ももたろう、生まれる」をカーソルで囲んだまま、編集画面の上部の「見出し ▾」の▾ をクリック。あらわれた選択肢から、「大見出し」をクリック。
大見出しに設定した箇所が、太字で表示されました。
同じような要領で、
大見出しにしたい文章を囲んだまま「見出し ▾」⇨「大見出し」をクリック
中見出しにしたい文章を囲んだまま「見出し ▾」⇨「中見出し」をクリックします。
（⇦ 中見出しの下にさらに小見出しを作る場合は、「見出し ▾」⇨「小見出し」をクリック）
同じ太線でも、大見出しと中見出しでサイズが違うのがおわかりでしょうか？ これで目次をつくる下準備ができました。
【初級編】目次の作り方③・・・目次アイコンをクリックする
目次を入れたいスペースにカーソルを合わせたまま、編集画面の上部にある「目次」アイコンをクリックします。
このとき、リード文（導入文）を書いておき、そのあとに目次を挿入すると記事は読みやすくなります。
すると、画面に［：contents ］という文字が出現します。英語の「コンテンツ」には、中身、内容、そして目次という意味があります。
これで完成です。
えっ！？目次できてないじゃん！
と戸惑うかもしれませんが、これでいいんです。
編集画面の上部にある ［プレビュー］をクリックすると、記事を公開したときにどう見えるかがわかります。
じゃん！！
めざしていた目次ができています。
「編集見たまま」モードでは［：contents］と表記されていますが、このまま公開すればちゃんと目次が表示されます。以上が、はてなブログで目次を入れる方法【初級編】でした。
ただし、もしGoogleやYahoo!の検索ページからPVを集めたかったら・・・がんばって【中級編】の方法をマスターされることをお奨めします。
【検索エンジンに正しい情報を！】h2タグ、h3タグを順番に入れよう！
HTMLの知識がないと「？？？」となるかもしれませんが、少しだけお付き合いください。HTMLとは、コンピューターにサイトの構造を伝えるための言語です。
本来、見出しを作る際にとるべきHTMLの階層構造は、次のような形です。
<h1>記事のタイトル</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
HTMLで記述する場合、 hタグに挟まれた部分がそのまま見出しとなります。まず記事のタイトルは、h1タグで挟まれています。
これに続いて大見出し、中見出し、小見出し・・・と作る際は、h2、h3、h4・・・と順番にタグを使うのが本来のルールです。このルールを逸脱すると、検索エンジンは迷子になってしまいます。
ところが、はてなブログの初期設定では、h3タグが「大見出し」となっています。
h1タグ 記事のタイトル
h2タグ ⇦ はてなの［HTML編集］に存在しない
h3タグ 大見出し
h4タグ 中見出し
HTML言語上では“大見出し”扱いのh2タグが、はてなにはありません。
h1 ⇨ ⇨ h3 ⇨ h4
のように、h2タグをすっ飛ばしています。順番どおりにHTMLが記述されていないことになり、検索エンジンが混乱してしまいます。
（⇦ この仕様は、はてなブログの前身『はてなダイアリー』の名残だそうです）
そこで、検索エンジンに正しい見出しの構造を伝えるために、ズレている順番を1個ずつ格上げする必要があります。
＜はてなの初期設定＞ ⇨ ＜本来の階層構造＞
<h3>大見出し</h3> ⇨ <h2>大見出し</h2>
<h4>中見出し</h4> ⇨ <h3>中見出し</h3>
<h5>小見出し</h5> ⇨ <h4>小見出し</h4>
【中級編】目次の入れ方①・・・［編集見たまま］モードで本文を書く
では、見出しを作るときに、具体的に何をすればよいのか？ わかりやすく説明するため、初級編とまったく同じ本文で目次を作ってゆきます。
めざす目次の形も、初級編のときと同じ。HTML記述だけを修正します。
【中級編】目次の入れ方②・・・目次にしたい文章を選択し、「大見出し」・「中見出し」に変換する
初級編と同じように、下図の赤枠でかこった部分を大見出し、青枠でかこった部分を中見出しにしたい、とします。
［編集見たまま］モードで、大見出しにしたい文章「ももたろう、生まれる」をカーソルで囲んだまま、編集画面の上部の「見出し ▾」の▾ をクリック。あらわれた選択肢から、「大見出し」をクリック。このままだとh3タグなので、h2に直します。
「HTML編集」に切り替え、
<h3>ももたろう、生まれる</h3>を、<h2>ももたろう、生まれる</h2>
と、修正します。
「ももたろう、旅に出る」「ももたろう、鬼ヶ島につく」も同じ要領で、
［編集見たまま］モードの「見出し ▾」から「大見出し」を選択。
［HTML編集］モードに切り替え、文章の両端のh3 ⇨ h2 に修正します。
「犬をおともにする」「猿をおともにする」「スライムをおともにする」は、中見出しにするのでしたね。
中見出しを作る場合は、「編集見たまま」モードで文章を囲んだまま「見出し ▾」⇨「大見出し」をクリックします。これで、HTML記述上はh3タグとなり、中見出しと同じ扱いになります。
（もし、中見出しの下にさらに小見出しを作りたい場合は、「編集見たまま」モードで文章を囲んだまま「見出し ▾」⇨「中見出し」をクリック。これで、HTML記述上はh4タグとなり、小見出しと同じ扱いになります）
最後に目次アイコンをクリックすれば、画面に［：contents ］という文字が出現します。これで、HTML記述のルールに則った見出しが完成します。
【中級編】のおさらい
もう一度、正しい目次の作り方を整理します。はてなブログでは本来の大見出し＝h2タグが抜けているので、1個ずつhタグを格上げする必要があります。
①大見出しは、「編集見たまま」モードから「大見出し」をクリック。「HTML編集」に切り替え、<h3>文章</h3> ⇨ <h2>文章</h2>のように直す。
②中見出しは、「編集見たまま」モードから「大見出し」をクリック。
③小見出しは、「編集見たまま」モードから「中見出し」をクリック。
最後に目次アイコンをクリック。［：contents］と表示されれば完成！
h2タグだけは、「HTML編集」モードからでないと作成できません。あとは「編集見たまま」モードから1個上の階層を指定すれば、それが正しいタグを付けることになります。
【らくちん】目次の入れ方・・・chrome拡張機能『Chrome Add-on for Hatena』でh2タグを挿入
SEO対策のためとはいえ、記事を書くたびに「HTML編集」モードからh3 ⇨ h2へと書き換えるのは手間がかかります。
そこで便利なのが、Googleクロームの拡張機能『Chrome Add-on for Hatena』をインストールする方法です。はてなブログのデザインテーマ「Brooklyn」の作者でもあるSHIROMAさんの手によるもので、ワンタッチでh2タグを作成できます。
関連：SHIROMAさんのページ
はてなブログ編集用のChrome拡張機能（使い方の説明） | SHIROMAG
h2タグ挿入の他にも、ワンタッチで「文章を中央寄せにする」「背景をグレーにする」ことが可能です。
インストールすると、ブログの検索窓の右側にアイコン（丸の中にペンのマーク）が表れます。クリックすると、下図のようなメニューが現れます。
いちから記事を書く場合は「記事を書く」を、記事を作成中の場合は「記事の管理」を選び、ここから編集画面に入ります。
（⇦『Chrome Add-on for Hatena』経由で編集画面に入らないと、ボタンを押しても反応しません）
それから、［編集見たまま］モードで記事を作成し、大見出しにしたい文章を選んで<h2>ボタンを押します。
あとは、【中級編】②と同じ。
中見出しは、「編集見たまま」モードから「大見出し」をクリックし、
小見出しは、「編集見たまま」モードから「中見出し」をクリックします。
まとめ
長々と説明してきましたが、目次をちゃんと作ることは読者さんにもブログ運営者さんにもプラスです。正しくh2タグを使いこなして、楽しいはてなブログライフを！！
