【はてなブログ初心者向け】正しい「目次の作り方」講座!大見出し、中見出しの順番に入れてアクセスアップ!

ブログを読んでいて、「読みづらいな～」と感じるいちばんの原因。

それは、目次がないことです。長文になればなるほど、目次は大事です。目次があれば記事全体の構成を伝えられるだけでなく、必要な箇所だけ読んでもらえるからです。

 

この記事では、はてなブログを始めたばかりの人のために、目次の入れ方を解説します。

ステップとしては、まず基本的な目次の入れ方（初級編）を説明します。次に、それを踏まえてアクセスupにつながる目次の入れ方（中級編）をお伝えします。

• 【はてなブログ初心者向け】目次は「入れ子構造」でつくる！
•  【初級編】目次の作り方①・・・［編集見たまま］モードで本文を書く
• 【初級編】目次の作り方②・・・目次にしたい文章を選択し、「大見出し」「中見出し」に変換する
• 【初級編】目次の作り方③・・・目次アイコンをクリックする
• 【正しい目次の作り方とは？】HTMLのルールに従って、h2タグとh3タグを順番に入れよう！
• 【中級編】正しい目次の作り方①・・・［編集見たまま］モードで本文を書く
• 【中級編】目次の作り方②・・・目次にしたい文章を選択し、「大見出し」・「中見出し」に変換する
• 【h2タグを入れる！】正しい目次の作り方 おさらい
•  【らくちん方法➀】正しい大見出しの入れ方・・・chrome拡張機能『Chrome Add-on for Hatena』でh2タグを挿入
• 【らくちん方法②】正しい大見出しの入れ方・・・ショートカットキーでh2タグを挿入する
• まとめ

【はてなブログ初心者向け】目次は「入れ子構造」でつくる！

 ブログの目次は、「大見出し」「中見出し」「小見出し」を下図のように入れ子構造に配置することによって、作られます。

 

 

「入れ子構造」とは、同じ大きさのものが、順番に重ねて入れられている状態のことです。身近なものでいうと、マトリョーシカや重箱が代表的な例です。

 

ブログの目次は「大見出し ➤ 中見出し ➤ 小見出し」の順番で作ってゆきます。この順番を揃えておかないと、とても読みづらくなります。

 【初級編】目次の作り方①・・・［編集見たまま］モードで本文を書く

 まずは、［編集見たまま］モードで文章を書きます。今回は、説明のためにかんたんな本文を用意しました。短い文章なので、「大見出し」と「中見出し」だけで目次をつくります。

 

 この本文から、下図のような目次の作成をめざします。

 

 

【初級編】目次の作り方②・・・目次にしたい文章を選択し、「大見出し」「中見出し」に変換する

 下図の赤枠でかこった部分を大見出し、青枠でかこった部分を中見出しにしたい、とします。

 

最初に大見出しにしたい文章「ももたろう、生まれる」をカーソルで囲んだまま、編集画面の上部右側の「見出し　▾」の▾ をクリック。あらわれた選択肢から、「大見出し」をクリック。

 

大見出しに設定した箇所が、太字で表示されました。

（※ お使いのデザインテーマによって、見え方が変わる場合があります）

 

同じような要領で、

大見出しにしたい文章を囲んだまま「見出し　▾」⇨「大見出し」をクリック

中見出しにしたい文章を囲んだまま「見出し　▾」⇨「中見出し」をクリックします。

（⇦ 中見出しの下にさらに小見出しを作る場合は、「見出し　▾」⇨「小見出し」をクリック）

 

同じ太線でも、大見出しと中見出しでサイズが違うのがおわかりでしょうか？ これで目次をつくる下準備ができました。

【初級編】目次の作り方③・・・目次アイコンをクリックする

目次を入れたいスペースにカーソルを合わせたまま、編集画面の上部にある「目次」アイコンをクリックします。

このとき、リード文（導入文）を書いておき、そのあとに目次を挿入すると記事は読みやすくなります。

 

すると、画面に［：contents ］という文字が出現します。英語の「コンテンツ」には、中身、内容、そして目次という意味があります。

 

これで完成です。 

えっ！？目次できてないじゃん！

 と戸惑うかもしれませんが、これでいいんです。

 

編集画面の上部にある ［プレビュー］をクリックすると、記事を公開したときにどう見えるかがわかります。

 じゃん！

 めざしていた目次ができています。

 

「編集見たまま」モードでは［：contents］と表記されていますが、このまま公開すればちゃんと目次が表示されます。以上が、はてなブログで目次を入れる方法【初級編】でした。

 

ただし、GoogleやYahoo!の検索ページからアクセスを集めたかったら・・・がんばって【中級編】の方法をマスターされることをお奨めします。

【正しい目次の作り方とは？】HTMLのルールに従って、h2タグとh3タグを順番に入れよう！

 HTMLの知識がないと「？？？」となるかもしれませんが、少しだけお付き合いください。HTMLとは、検索エンジンのロボット（AI）にサイトの構造を伝えるための言語です。

 

編集画面の「HTML編集」から見ると、本文はこのような記述になっています。

 

見出しを作る際、正しいHTMLの階層構造は、次のような形です。

<h1>記事のタイトル</h1>

<h2>大見出し</h2>

<h3>中見出し</h3>

<h4>小見出し</h4>

 

HTMLで記述する場合、 hタグに挟まれた部分がそのまま見出しとなります。まず記事のタイトルは、h1タグで挟まれています。

これに続いて大見出し、中見出し、小見出し・・・と作る際は、h2、h3、h4・・・と順番にタグを使うのが本来のルールです。このルールを逸脱すると、検索エンジンは迷子になってしまいます。

 

ところが、はてなブログの初期設定では、h3タグが「大見出し」となっています。

HTML言語上では“大見出し”扱いのh2タグが、はてなブログには存在しません

 

◆ グーグル検索へ悪影響も？ はてなブログの目次には「h2タグ」がない！ ◆

上の図のように、本来は設置すべきh2タグをすっ飛ばしています。正しいルールから、階層が1個ずつズレているのです。

もし、記事のクオリティが同じぐらいなら、HTMLのルールを守っているブログのほうが検索順位では有利になります。

 

そこで、検索エンジンに正しい見出しの構造を伝えるために、ズレている順番を1個ずつ格上げする必要があります。

【中級編】正しい目次の作り方①・・・［編集見たまま］モードで本文を書く

では、見出しを作るときに、具体的に何をすればよいのか？ わかりやすく説明するため、初級編とまったく同じ本文で目次を作ってゆきます。

 

 めざす目次の形も、初級編のときと同じ。HTML記述だけを修正します。

【中級編】目次の作り方②・・・目次にしたい文章を選択し、「大見出し」・「中見出し」に変換する

 初級編と同じように、下図の赤枠でかこった部分を大見出し、青枠でかこった部分を中見出しにしたい、とします。

 

［編集見たまま］モードで、大見出しにしたい文章「ももたろう、生まれる」をカーソルで囲んだまま、編集画面の上部の「見出し　▾」の▾ をクリック。あらわれた選択肢から、「大見出し」をクリック。このままだとh3タグなので、h2に直します。

 

「HTML編集」に切り替え、

<h3>ももたろう、生まれる</h3>を、<h2>ももたろう、生まれる</h2>

と、修正します。

 

 

「ももたろう、旅に出る」「ももたろう、鬼ヶ島につく」も同じ要領で、

［編集見たまま］モードの「見出し　▾」から「大見出し」を選択。

［HTML編集］モードに切り替え、文章の両端のh3 ⇨ h2 に修正します。

 

 「犬をおともにする」「猿をおともにする」「スライムをおともにする」は、中見出しにするのでしたね。

 

中見出しを作る場合は、「編集見たまま」モードで文章を囲んだまま「見出し　▾」⇨「大見出し」をクリックします。これで、HTML記述上はh3タグとなり、中見出しと同じ扱いになります。

 （もし、中見出しの下にさらに小見出しを作りたい場合は、「編集見たまま」モードで文章を囲んだまま「見出し　▾」⇨「中見出し」をクリック。これで、HTML記述上はh4タグとなり、小見出しと同じ扱いになります）

 

最後に目次アイコンをクリックすれば、画面に［：contents ］という文字が出現します。これで、HTML記述のルールに則った見出しが完成します。

【h2タグを入れる！】正しい目次の作り方 おさらい

もう一度、正しい目次の作り方を整理します。

はてなブログでは、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.google.com

 

インストールすると、ブログの検索窓の右側にアイコン（丸の中にペンのマーク）が表れます。クリックすると、下図のようなメニューが現れます。 

いちから記事を書く場合は「記事を書く」を、記事を作成中の場合は「記事の管理」を選び、ここから編集画面に入ります。

（⇦『Chrome Add-on for Hatena』経由で編集画面に入らないと、ボタンを押しても反応しません）

 

それから、［編集見たまま］モードで記事を作成し、大見出しにしたい文章を選んで<h2>ボタンを押します。 

あとは、【中級編】②と同じ。

中見出しは、「編集見たまま」モードから「大見出し」をクリックし、

小見出しは、「編集見たまま」モードから「中見出し」をクリックします。

【らくちん方法②】正しい大見出しの入れ方・・・ショートカットキーでh2タグを挿入する

Chromeの拡張機能を使わず、ショートカットキーだけでh2タグを挿入することもできます。

 

大見出しにしたい範囲をマウスで囲った状態で、キーボードの

を同時に押します。

 

Chromeのの拡張機能は不具合を起こすこともあるので、個人的にはこちらがおすすめです（筆者の場合、手作業でhtml編集からh2タグに変換しています）

まとめ

 長々と説明してきましたが、目次をちゃんと作ることは読者さんにもブログ運営者さんにもプラスです。正しくh2タグを使いこなして、楽しいはてなブログライフを！！