映画ときどき海外ドラマ

テレビ放送や動画配信など、おうちで映画を楽しむブログ

【はてなブログ:初心者】目次の作り方講座!h2タグ、h3タグの順番に入れてPVアップ!

スポンサーリンク

【はてなブログ:初心者】目次の作り方講座!h2タグ、h3タグの順番に入れてPVアップ!
ブログを読んでいて、「読みづらいな~」と感じるいちばんの原因。それは、目次がないことです。この記事では、はてなブログを始めたばかりの人のために、目次の入れ方を解説します。

 

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

 

【見習い編】目次は、入れ子構造でつくる!

 

本に目次があるように、ブログにも目次があると便利です。ブログを訪問した読者さんが、どこを読めば求める情報が得られるか、すぐにわかるからです。目次は、読みたい場所にすぐ移動できるナビゲーションの役目を果たします。

 

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

 

大見出し

  中見出し

    小見出し

    小見出し

  中見出し

    小見出し

    小見出し

              小見出し

大見出し

  中見出し

    小見出し

    小見出し

  中見出し

    小見出し

    小見出し

 

 

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

 

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

 

【はてなブログ】目次の作り方元記事

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

 

 

【はてなブログ】目次の入れ方大見出しと中見出し

 

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

 

 

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

 

大見出し中見出し赤青

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

 

【目次の作り方】最初の大見出し


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

 

【はてなブログ】大見出しの設定

 

 

同じような要領で、

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

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

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

 

 

【目次のやり方】大見出し中見出し

 

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

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

 

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

 

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

 

【はてなブログ】目次アイコンをクリック

 

すると、画面に[: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 ⇨ 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.google.com

 

 

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

 

拡張機能『Chrome Add-on for Hatena』でh2タグ

 

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

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

 

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

 

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

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

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

 

まとめ

 

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