Bloggerで目次の自動作成

目次を自動作成してもらいたい

記事の内容を確認するために必要な目次を作りたいと思います。

ブログをいくつか見ていると、記事内に目次があって、そこをクリックするとその内容にスクロールされて連れて行ってくれるものがあります。

Bloggerでは作れないのでしょうか。

色々調べたところ、自動作成ができるようです！！

下記の方々の記事を参考にさせて頂きました。

→この記事をみながら作成してみました、すごいです。

自動生成は　見出し(h2)・小見出し(h3)・準見出し(h4)　を順次自動生成していくものらしいです。

私のブログでは小見出しを順にピックアップしてもらうようにしようと思います。

HTML編集画面で　　を検索

<b:include data='blog' name='google-analytics'/> と

の間にコードを挿入 (コードは下記からコピーさせてもらいました)

私が がむしゃら院長 ブログ用に変更したのは

①　target: ["h2", "h3", "h4"],　を

　　target: ["h3"],　に

→小見出しだけで目次をつくってもらう

②　insertPosition: "firstHeadAfter",　を

　　insertPosition: "firstHeadBefore",　に

→ 目次を最初の小見出しの前に作成

③　width: "auto",　を

　　width: "100%",　に

→ 目次のボックスの幅を記事の幅に合わせる

④　marginTop: "30px",

marginBottom: "30px",

indent: "20px",　を

　　marginTop: "20px",

marginBottom: "20px",

indent: "10px",　に

→目次の上部、下部、見出しとの間隔を調整する

すると下記のように目次が自動作成されました。

クリックしたらそこに飛ぶこともできます。感動。

・記事内に目次を自動作成できるようにしました。

・目次をクリックしたらその見出しのところまで連れて行ってくれます。

これでページ内を素早く移動できるようになりました。

今回は難しそうでしたが、やってみると15分くらいでできました。

先達のおかげです。ありがとうございます。