はてなブログの目次の作り方をくわしく解説！

はてなブログの目次とは、はてなブログのブログタイトル下に表示されている見出し一覧を示します。

ブログに目次を設置している人、いない人はそれぞれいるでしょう。ブログの内容如何によっては目次が必要ないという人もいるはずです。日記形式でブログを利用している人は特に利用しない人が多いかと思います。

しかし、何らかの見出しを作ってブログの記事を作成している場合、目次の役割が重要になってきます。

本を読む際、小説であれば気にしなくても、啓発本などを利用する場合は目次から目的のものを探す人も多いのではないでしょうか。目次を見て、大体の本の内容を把握する人もいます。ブログの場合、目次の役割とは後者を示すことが多いです。

書き手側にももちろん役割はあります。1つ目の役割とは、記事の構成を行うためのものです。

つらつらと書いているだけではあちこちに内容が飛んでしまって、まとまりがない記事となってしまうこともあります。目次とはそれを未然に防ぐこともできるものです。記事作成後に目次一覧を見て内容を確認するためにも利用することができます。

2つ目の役割とは、SEO対策としての役割です。SEO対策とは、インターネットの検索エンジンなどの検索結果において自身のブログを上位で表示させる、より多く表示させるための対策を示します。ブログの閲覧数を増やしたい場合はSEO対策が重要となります。

読み手側からの「内容がよくわかる」という利点もあって、アクセス数や離脱率も少しは上昇します。もちろん、目次を設置したから劇的に上がる、というわけではありませんが、アクセスされる可能性は少しでも増やすに越したことはありません。

また、目次の設定方法によっては、目次にある見出し一覧からその見出しへとページ内リンクで飛ぶようにすることもできます。それも検索結果で引っかかりやすくなるものの一つになります。

つまるところ、目次とは「読み手のためでもあり書き手のためにもなる」というものなのです。

はてなブログでは、自動で目次が挿入されるわけではありません。記事の中に目次を入れるのは手動です。ブログの機能メニューのボタン一つで可能ではありますが、それでも自分で作成する必要があります。

また、はてなブログの目次のレイアウトはデフォルトのままだとシンプルすぎて嫌、物足りない、と思う方もいると思いますが、そのレイアウトに関しても自分で設定しなければなりません。

この記事では、はてなブログの目次の作り方や、はてなブログで目次の見出し一覧を装飾する方法などの手順について解説していきます。

はてなブログの目次の必要性や役割とはどんなものかご理解いただけたと思いますので、ここからははてなブログの目次の作り方の手順の説明をして参ります。

はてなブログの目次の作り方の手順ですが、これに関しては至極簡単と言えます。もちろん見出しがある記事が必要となりますが、その見出しのある記事の作成も同時に行っていきますので、それぞれ確認していきましょう。

はてなブログの目次の作り方の手順ですが、最初に記事の確認を行いましょう。既にある記事に見出しを作成する前提での話となりますが、1から作成する場合の作り方の手順としては《編集画面に入る》と《見出しを作る》からで構いません。

記事の確認手順ですが、下記のはてなブログトップページでアカウントメニューを開いてください。

はてなブログアカウントメニューから「記事の管理」を開いてください。

はてなブログの記事の一覧が表示されます。記事の内容をプレビューとしてみたい場合は、右側にある「記事を見る」ボタンをクリックしましょう。

記事を実際の画面で確認することができます。簡単に描き散らかした記事（目次を作ることを前提として作成しています）が、見出しがないと少し読みづらいことが分かるかと思います。そのために見出しを間に入れ、それをもとに目次を作ることになります。

さて、見出しや目次を入れる場合、編集画面に入りましょう。記事の編集画面は、先ほどの「記事の管理」画面から利用することができます。「編集」ボタンを押しましょう。

メニューが表示されますので、「編集」をクリックしてください。

記事の編集画面が表示されます。

次にはてなブログでの見出しの作り方です。見出しの追加手順は、左上にある「見出し」から挿入が可能です。（※見たままモードでの編集を前提としています）

見出しの種類は「大見出し」「中見出し」「小見出し」です。基本的に大見出しの中に中見出し、中見出しの中に小見出しという体で作成していきます。

まずは見出しの内容を作成しましょう。

その見出しにしたい部分をクリック（もしくはドラッグして選択）します。ブログ作成の機能メニューが上部にありますので、そこで「見出し」ボタンをクリックしましょう。

はてなブログの機能メニューの「見出し」から設定したい見出しを選択しましょう。

見出しとして作成されます。見たままモードだと完全にそのままのプレビューとはいきませんが、大体の目安として見出しの大きさが分かりやすいかと思います。

蛇足ですが、大見出しが＜h3＞で自動挿入されますので、CSSなどで装飾する場合は注意が必要です。同じように他の大見出しや中見出しを作成していきましょう。

見出しの作成も完了したので、次は目次の挿入となります。それぞれの見出しをコピペするのか、と言うとそうではありません。目次はブログの機能メニューにそれ専用のボタンがあります。

機能メニューの「目次」ボタンをクリックしてください。

[:contents]と挿入されます。これが目次となります。目次内容の編集は行う必要はなく、これ一つで十分です（ただし、Pro版のHTML編集を利用している場合は自分で行う必要があります）

さて、機能メニューで挿入したはてなブログの目次の内容を確認する手順ですが、保存して確認する方法もありますが、編集画面からも確認することができます。

目次の挿入が終わったところで、問題ないかどうかをはてなブログのブログ記事編集画面の「プレビュー」画面で確認しましょう。

プレビューを押すとブログのプレビュー画面になります。編集画面でタブ移動するようなものですので、現在の内容はちゃんと保持されます。

目次が挿入されていますので、内容を確認しましょう。プレビュー画面で見て見て何かおかしな点が見つかった場合は、編集画面へ戻ってその部分を直して、再度プレビューしてみてください。

ここまで行って問題なければ、記事を更新して内容の保存をしましょう。

はてなブログに目次を挿入することはできましたが、問題なのはその目次の長さです。見出しの数の分目次の数も多くなりますので、場合によっては煩わしいこともあるかと思います。そんな目次をカスタマイズすることも可能です。

はてなブログの目次のカスタマイズ方法ですが、目次の機能のカスタマイズを行うにはJavaScript（jQuery）とCSSを利用することになります。

目次を折りたたむカスタマイズ方法の説明に移りましょう。使わせてもらっているのは下記サイトのスクリプトとCSSになります。

まずJavaScript（jQuery）とCSSを貼り付ける場所を開きましょう。はてなブログの左側のメニューの機能の中から「デザイン」をクリックしてください。

レンチマークをクリックしてください。

JavaScript（jQuery）は「フッタ」に貼り付けます。

入力欄をクリックしてください。

広くなった入力欄に、先ほどのリンク先の「フッター部分に記載コード」の項目のJavaScript（jQuery）を貼り付けてください。

貼り付けると上記のような感じになります。

CSSは「デザインCSS」に貼り付けます。

入力欄をクリックしてください。

表示されているCSSの一番下にCSSを貼り付けます。そのまま最後の行に追加する形で貼り付けてください。

横のプレビュー画面を見て見ると、「目次」が追加されたうえ、その横に「[表示]」というボタンが追加されています。ここで目次を開閉することができます。

プレビュー画面に反映されない場合、実際の画面でもプレビューと同じように表示されますので、一度CSSやJavaScript（jQuery）にコピペミスがないか探してみてください。

HTMLやCSSなどの特別な知識はないけれど目次は見やすくしたい、ということもあると思います。コピペしてもうまく動かない、ということももちろんありますので、はてなブログで初心者でもできる目次を見やすくする方法について説明していきましょう。

はてなブログに関わらず、目次の機能はブログの内容のようやくのようなものです。そのため、目次は簡潔に分かりやすくしておくことが重要です。その目次にそのまま直結しているのが見出し文になります。

つまり、見出し文が妙に長いとその分、目次欄も見にくくなってしまい、目次本来の機能が失われる可能性もあります。

記事の中でも見出しが2行にわたっていると少し見づらく感じる人もいるでしょう。一目でわかる簡潔な内容に見出し文を納めておけば、必然的に目次も文字数が少なくなる分見やすくなりますので、見出し文はできるだけ短めにしておくことが重要です。

さて、はてなブログに目次を設置する方法や見やすさなどについて説明してきましたが、はてなブログの目次は場合によってはシンプルすぎる、と感じる人もいるでしょう。

ほかの人が作成したはてなブログのデザインであれば目次がすでにある場合もありますので、その場合は気にしない人もいるかもしれませんが、可愛いものにしたい、ということももちろんあるでしょう。

そんな方向けに、コピペで使えるはてなブログのCSSのおすすめを紹介していきます。

まずは可愛い印象を持つことができるCSSです。下記リンク先のサイトには、マスキングテープで作成したメモのような目次を作ることができるコードがあります。

最近マスキングテープが流行っていますし、実際可愛いですよね。それっぽいものをブログの目次に利用できればはてなブログで作成したブログを訪れた方に一瞬でも興味を引くことができるかもしれません。

コピペするだけで上記のようにマステ付メモ風の目次にすることができます。可愛いですね。

マスキングテープにあたる部分の色を変えたい場合は、CSS内にある「background-color: #66CCFF; /* マステ背景色 */」のカラーコード（#66CCFF）の部分を変更することで可能です。

クールな印象のCSSもあります。下記リンク先にはシンプルな目次のコピペCSSがありますが、可愛かったりクールだったりと様々なものが公開されています。

その中でもシンプルなのにクールな印象を受けたのが下記のCSSになります。

コピペしてみたものが上記になります。シンプルで見やすく、どこかクールな印象も受ける内容のCSSですので、そういった目次を利用してみたい人におすすめのCSSです。

はてなブログに目次を設定すると、その機能を含めてアクセス数が少しでも伸びるようにすることができます。

いくつか見出しを付けてブログを作成している方、ブログのアクセス数を少しでも増やしたい方はこの記事で紹介した内容をぜひ試してみてください。