Home
Menu
Side
Twitter
Top
ホーム / Blogger | ブログ | ブログカスタマイズ |

自動で目次作成！Blogger ブログで目次を挿入する

2019/07/15

Blogger ブログ ブログカスタマイズ

こんにちは。HARU（ @HARU ）です。

説明系ブログや技術系ブログの記事に、必須と言っても過言ではない目次の作成ですが、皆さんはどうしてますか？

手動で目次を作っている人もいるかもしれませんが、自動で目次が作成されたら楽ではありませんか？

ということで今回はBlogger ブログで自動的に目次を作成する方法について紹介したいと思います。

今回紹介する方法ですが、大きいメリットとして目次を表示させる、させないを記事によって選択することができること点です。

記事内容によっては目次を付けたくない場面もでてくると思います。

今回の方法は、どんなタイプのブログにも適用できる方法ですので是非参考にしてみてください。

注意

テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の関連記事を参照してください。

参考

JQuery の導入

JQuery の導入をしていない場合、以下の script を <head> の直下に記述します。


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

CSS 追記

以下の CSS を Blogger テンプレートの CSS 欄に記述します。

QooQ のテンプレートを使っている人は個別記事近くに記述すると、HTML を編集するときにわかりやすいでしょう。


  /*  目次:CSS  */
  #toc:before{
    content:"目次"; /*目次のタイトル*/
    padding-left:1em;
    font-weight:800;
  }
  #toc{
    background-color:#f9f9f9; /*目次の背景色*/
    padding:1em 0;
    display:block;
    margin:2em 0;
    border:1px solid #e6e6fa; /*目次の枠線*/
    max-width:600px; /*目次最大サイズ*/
  }
  #toc ul{
    margin-bottom:10px;
  }
  #toc ul li{
    list-style:none;
    padding:0;
    margin-left: 0;
  }
  #toc ul li:before {
    display:none;
  }
  #toc:before{
    display:block;
    text-align:center;
  }

自動目次作成 Script

以下のコードを </body> の直上に記述します。


  <!-- 目次 -->
  <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
      console.log("call func");
      $('a[name="more"]').after("<div id='toc' />");
      var idcount = 1;
      var h2cnt = 0;
      var h3cnt = 0;
      var h4cnt = 0;
      var toc = '';
      var currentlevel = 0;
      $(".post-body h2,.post-body h3,.post-body h4", this).each(function() {
        var chapid = "chapter-" + idcount;
        $(this).before("<div class='chapter-no' id='" + chapid + "' />");
        idcount++;
        var level = 0;
        var chapNo;
        if (this.nodeName.toLowerCase() == "h2") {
          level = 1;
          h2cnt++;
          h3cnt = 0;
          h4cnt = 0;
          chapNo = h2cnt + ". ";
        } else if (this.nodeName.toLowerCase() == "h3") {
          level = 2;
          h3cnt++;
          h4cnt = 0;
          chapNo = h2cnt + "-" + h3cnt + ". ";
        } else if (this.nodeName.toLowerCase() == "h4") {
          level = 3;
          h4cnt++;
          chapNo = h2cnt + "-" + h3cnt + "-" + h4cnt + ". ";
        }
        if (currentlevel == level) {
          toc += "</li><li>";
        }
        while (currentlevel < level) {
          toc += '<ul class="chapter"><li>';
          currentlevel++;
        }
        while (currentlevel > level) {
          toc += "</li></ul><li>";
          currentlevel--;
        }
        toc += '<a href="#' + chapid + '">' + chapNo + $(this).text() + "</a>";
        $(this).html($(this).html());
      });
      while (currentlevel > 0) {
        toc += "</li></ul>";
        currentlevel--;
      }
      if ($(".post-body h2")[0]) {
        $("#toc").html(toc);
      } else {
        $('#toc').attr('class', 'no-toc');
      }
    });
    //]]>
  </script>

リンクアイコンを使用する場合

【 QooQ カスタマイズ 】 Blogger ブログでリンクの装飾を CSS でカスタマイズ 【 外部リンクアイコン他 】でリンクアイコンを追加した場合、以下のコードを CSS に追記する。


  /*  目次リンクアイコン削除  */
  #toc a:after{
    display:none;
  }

使い方

記事本文の目次を入れたいところに <!--more--> のタグを記述します。

タグを記述した上に目次が自動的に作成されます。

目次を入れたくない記事には、このタグを入れなければ目次が表示されることはありません。

なお、ブログ本文は h タグ （ 見出しタグ ）を使って書いてください。h タグが無いと目次が自動作成されません。


  記事文章
  <!-- 目次が挿入される場所 -->
  <!--more-->
  <h2>タイトル</h2>
  記事文章

QooQ