ページ

2018/01/07

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の場合、下記の手順で追加します。

  1. レイアウト > slidebar-***から、「ガジェットを追加」を選択
  2. 基本 > 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で目次と見出し番号を自動生成させるカスタマイズ方法

過去記事より、作成したウィジェットをスクロールバーに追従させる方法
Bloggerの可変長のウィジェットをスクロールバーに追従させる(固定位置に表示)

0 件のコメント:

コメントを投稿