はてなブログの目次作り実は超簡単です【基本的なのは】

はてなブログを始めて間もない方、以下のようなことありませんか？

記事を書いてみた　⇒　「あれ、なんか物足りない・・・あ、目次がない！」
手動で書いてもいいけど、毎回手入力するのは大変だなってなりますよね。

今回は、自動で目次を入れる方法を書いていきたいと思います。

また、デフォルトの目次じゃなくて、目次そのものを好きなようにカスタマイズしたいよって方には、後半でその方法をご案内します。

※↓にあるものがその目次です。

はてなブログの目次を作るのは、実は超簡単です

結論から言うと、目次設置のための専用のボタンが用意されています。

目次を作って入れる

では、目次を作ります。

目次を入れたい場所にカーソルを合わせておきます。
次に目次挿入ボタンを押します。

以下のように入ります。

これで目次を表示する準備は整いました。

※【:contents】というのは、好きな場所に入れられます。
基本的には記事の最初の方になると思います。

見出しを入れる

では、その目次の元はというと、「見出し」です。
見出しというのは、文章のはじめや適当な区切りの時にある、フォントの大きめな太字の題名ですね。
見出しがそのまま目次になります。（見出し全てが対象です。見出しサイズによって見え方が変わります）

以下が、見出しの入れ方です。
例として、赤枠を見出しとします。
見出しにしたい文のどこでもいいので、カーソルを合わせておき、見出しを選びます。

これで見出しが入りました。
※参考までに。はてなブログの記法の違いによって、記事作成中の見出しの見え方が違います。
見たまま編集では太字になり、はてな記法では☆記号の小さいやつが文頭についたりします。
完成後に違いはありません。

これで目次が完成しました！

以上が、まず「基本的な目次を記事に入れる」でした。

※上の目次はすでに以下のカスタマイズ後のものです。根本的には同じなので、見た目の違いはスルーで大丈夫です。
私が使っている設定では、中見出し以下が目次に出ないようになっています。

目次をもっとカスタマイズしたい！

しかしながら、用意されているものだけじゃ物足りない・・・、もっと変更できないの？って方向けにその方法をご紹介します。

私なりに調べて少しずつ手を加えていきました。

目次の文字を変えるやり方や、「・」を数字に変えるやり方、目次背景の色を変えるなど、他ブログにはあったのですが、そこじゃないよ！ってとこは、なかなか書かれていませんでした。

今、表示されている記事がシンプルですが、私が手を施したものになります。
記事の外部の設定をイジっているので、記事が増えても自動で入りますし、直したい場合はその外部の設定を直すだけで、全記事に反映されます。

やる事としては、リンク先のものをコピペして、ブログの設定に入れるだけの簡単な作業です。気になった方は、是非試してみてください。
特に難しいことはやっていません。また知識もほとんどありませんでしたが、ちょっとだけ改造したら出来ました。先人の知恵に感謝です。

こちら　⇒　はてなブログの目次の簡単なカスタマイズ方法

（余談）
はてなブログでは「大見出し」がHTMLでいう「h3」タグになっている　ということと、目次とは直接関係ありませんが、記事のリライト（更新日）日付を自動で入れたいと思っていたので、「その２つ」と「見出しのレ点」みたいな細かいのも合わせてその改修を実施済のものです。（後から調べててわかったんですが、Markdownモードだと普通にh2タグ使えるみたいです）

最後に・・・

無料はてなブログでもある程度までは、カスタマイズできますが、

●自動の広告が入って、記事のデザインやイメージが崩れるので消したい
●スマホ向けにPCとは別にカスタマイズしたい
●トップページの表示を「一覧形式」にしたい
●独自ドメイン（XXXXXX.comのような。XXXXXX.hatenablog.comにならない。XXXXXXにはサイト名が入ります）を使いたい
　※独自ドメインについてはググってもらえれば、すぐ調べられます。ここでは省きます。

などなど、そういった悩みを解決するのが、はてなブログPROです。
私も使っていますが、広告も消せるし思ったように表示できていて、いい感じです。
またレンタルサーバーで独自にブログ構築・・・が理想かもしれませんが、一からサイト構築なんて・・・や、レンタルサーバー代が・・・って方には、はてなブログPROがおすすめですよ！

↓登録はこちらから