Bloggerのウィジェットで目次を作成

Bloggerで、Qiitaのようにサイドバーに目次(index)を表示させる方法。
こちらを参考にカスタマイズしました。
人気のあるBloggerブログの作り方: Bloggerで目次と見出し番号を自動生成させるカスタマイズ方法

こちらの記事だと、目次の表示箇所が本体の記事中になっています。これをサイドバーに表示させたかったのです。

まず下記の前提条件を確認します。

Bloggerのテーマにサイドバー（sidebar）が含まれていること
何処かでjQueryが指定されていること
- 指定されていない場合はHTML（テーマ > HTMLの編集）の<head></head>の間に下記を追記

<!-- jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'/>

前提条件がOKの場合、下記の手順で追加します。

レイアウト > slidebar-***から、「ガジェットを追加」を選択
基本 > HTML/JavaScript追加を選択し、タイトルに「目次」などを、コンテンツに下記をコピペして完了です。

<script type='text/javascript'>
  $(document).ready(function() {
    var toc = '';
    $(".post-body h1,.post-body h2", this).each(function() {
      var mark;
      if (this.nodeName.toLowerCase() == "h1") {
        mark = "*&nbsp;";
      } else if (this.nodeName.toLowerCase() == "h2") {
        mark = "&nbsp;&nbsp;&nbsp;-&nbsp;";
      }
      toc += mark + '<a href="#' + $(this).text() + '">' + $(this).text() + "</a><br/>";
    });
    temp = $('#toc').get(0)
    temp.innerHTML = toc;
  });
  document.write('<div id="toc">loading index...</div>')
</script>

このコードの場合、h1, h2クラスの見出しがindexとしてカウントされます。
また、h1クラスの見出しは* hogehoge, h2クラスの見出しは - hogehogeとなります。こんな感じ。

* h1 hogehoge
  - h2 subsub
  - h2 subsub
* h1 hogehoge

このマークを変えたりh4まで対応させたりするのはちょこっといじればできるので割愛。
連番を振る方法は、下記をご参照ください。
人気のあるBloggerブログの作り方: Bloggerで目次と見出し番号を自動生成させるカスタマイズ方法

過去記事より、作成したウィジェットをスクロールバーに追従させる方法

kusuwada.hatenablog.com

好奇心の足跡

飽きっぽくすぐ他のことをしてしまうので、忘れないため・形にして頭に残すための備忘録。

Bloggerのウィジェットで目次を作成