ホーム Blogger JavaScript 目次【jQuery】BloggerにJavaScriptを使って任意の記事に目次を作る方法

【jQuery】BloggerにJavaScriptを使って任意の記事に目次を作る方法

2020/10/03

Bloggerで、任意の記事に目次をつけられるようになると便利だと思いませんか？

そんな願望からjQueryを使って記事の任意の場所に目次を設けられる方法を編み出しました。設置や操作も比較的簡単だと思うので、興味のある方は、ぜひ試してみてください。

概要

プログラムの仕様

このプログラムの大まかな仕様は以下の通りです。

・tocというidを持つ要素の位置に目次を挿入する（<div id="toc"></div>）
・ページ内のh2～h4までのタグを読み取って目次リストを生成する（ただし、h2タグは必須）
・目次リストのページ内リンクは自動生成される

※このコードは「トーマスイッチ」さんが紹介しているものを参考にさせていただいています

メリット

・任意の位置に簡単に目次を挿入できる
・固定ページにも目次の挿入が可能

デメリット

・一括処理はできない
・挿入・削除を全て手作業で行うことになる

作業手順

1．<head>にjQueryのCDNの読み込みコードを書く

※この作業は、当サイトのテンプレートをお使いの方は不要です（設定済）

今回使用するコードはjQueryを使用しています。
ですので、CDNでjQueryを読み込ませる必要があります。

jQueryを使用していないテンプレートをお使いの方はテンプレートの<head>タグ内に以下のコードを挿入してください。
なお、jQueryは便利ですが若干重いので、これを入れることでページ読込が遅れる可能性があります。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' />

2．レイアウト画面に「HTML/JavaScript」ガジェットを設定する

まず、目次を表示させるコードを挿入ためにBloggerの「HTML/JavaScript」ガジェットを用意します。
挿入位置はどこでも良さそうですが、個人的には「ブログの投稿」の下あたりがおすすめです。

3．以下のコードをガジェット内にコピペする

「HTML/JavaScript」ガジェット内に以下のコードをコピペして保存します。

ちなみに、このコードは当サイトのテンプレートの目次あり版で使用しているものと同じです。
CSSは<style>タグで設定しているので用意する必要はありません。

当サイトのテンプレートのお使いの方とそうでない方でコードの内容が若干異なります。
以下から対応したコードをお使いください。

当サイトのテンプレートをお使いの方

<script>
  $(function () {
    var idcount = 1;
    var toc = '';
    var currentlevel = 0;
    $(".post-body h2, .post-body h3, .post-body h4", this).each(function () {
      this.id = "chapter-" + idcount;
      idcount++;
      var level = 0;
      if (this.nodeName.toLowerCase() == "h2") {
        level = 1;
      } else if (this.nodeName.toLowerCase() == "h3") {
        level = 2;
      } else if (this.nodeName.toLowerCase() == "h4") {
        level = 3;
      }
      while (currentlevel < level) { toc += '<ul class="chapter">'; currentlevel++; } while (currentlevel > level) {
        toc += "</ul>";
        currentlevel--;
      }
      toc += '<li><a href="#' + this.id + '">' + $(this).html() + "</a></li>\n";
    });
    while (currentlevel > 0) {
      toc += "</ul>";
      currentlevel--;
    }
    if ($(".post-body h2")[0]) {
      $("#toc").html(toc);
    }
    else {
      $('#toc').attr('class', 'no-toc');
    }
  });
</script>
<style>
  /* 目次タイトル */
  #toc:before {
    display: block;
    text-align: center;
    content: "\3010\76EE\a0\6B21\3011";
    font-weight: bold;
    font-size: 15px;
    color: #555;
    letter-spacing: 2px;
    padding-bottom: 20px;
  }

  /* 目次全体 */
  #toc {
    display: block;
    width: 75%;
    background: #f9f9f9;
    padding: 10px 10px 20px;
    font-size: 13px;
    margin: 0 auto 30px;
    border: 1px solid #bbb;
  }

  #toc ul li {
    margin-left: 4%;
  }

  #toc ul {
    margin: 2px 0 2px 15px;
  }

  #toc li {
    color: #666;
  }

  #toc a {
    color: #666;
  }

  #toc a:hover {
    opacity: 0.6;
  }

  /* レスポンシブ（タブレット縦） */
  @media (max-width: 1024px) {
    #toc {
      width: 80%;
    }
  }

  /* レスポンシブ（スマホ縦） */
  @media (max-width: 768px) {
    #toc {
      width: 90%;
      margin: 0 auto 20px;
    }

    #toc ul li {
      margin-left: 0;
    }
  }

  @media (max-width: 560px) {
    #toc:before {
      font-size: 13px;
    }

    #toc {
      font-size: 11px;
    }
  }
</style>

フォームをクリックし、Ctrl+Aキーで全選択、Ctrl+Cでコピーできます。

その他のテンプレートをお使いの方

<script>
  $(function () {
    var idcount = 1;
    var toc = '';
    var currentlevel = 0;
    $(".entry-content h2,.entry-content h3,.entry-content h4", this).each(function () {
      this.id = "chapter-" + idcount;
      idcount++;
      var level = 0;
      if (this.nodeName.toLowerCase() == "h2") {
        level = 1;
      } else if (this.nodeName.toLowerCase() == "h3") {
        level = 2;
      } else if (this.nodeName.toLowerCase() == "h4") {
        level = 3;
      }
      while (currentlevel < level) { toc += '<ul class="chapter">'; currentlevel++; } while (currentlevel > level) {
        toc += "</ul>";
        currentlevel--;
      }
      toc += '<li><a href="#' + this.id + '">' + $(this).html() + "</a></li>\n";
    });
    while (currentlevel > 0) {
      toc += "</ul>";
      currentlevel--;
    }
    if ($(".entry-content h2")[0]) {
      $("#toc").html(toc);
    }
    else {
      $('#toc').attr('class', 'no-toc');
    }
  });
</script>
<style>
  /* 目次タイトル */
  #toc:before {
    display: block;
    text-align: center;
    content: "\3010\76EE\a0\6B21\3011";
    font-weight: bold;
    font-size: 15px;
    color: #555;
    letter-spacing: 2px;
    padding-bottom: 20px;
  }

  /* 目次全体 */
  #toc {
    display: block;
    width: 75%;
    background: #f9f9f9;
    padding: 10px 10px 20px;
    font-size: 13px;
    margin: 0 auto 30px;
    border: 1px solid #bbb;
  }

  #toc ul li {
    margin-left: 4%;
  }

  #toc ul {
    margin: 2px 0 2px 15px;
  }

  #toc li {
    color: #666;
  }

  #toc a {
    color: #666;
  }

  #toc a:hover {
    opacity: 0.6;
  }

  /* レスポンシブ（タブレット縦） */
  @media (max-width: 1024px) {
    #toc {
      width: 80%;
    }
  }

  /* レスポンシブ（スマホ縦） */
  @media (max-width: 768px) {
    #toc {
      width: 90%;
      margin: 0 auto 20px;
    }

    #toc ul li {
      margin-left: 0;
    }
  }

  @media (max-width: 560px) {
    #toc:before {
      font-size: 13px;
    }

    #toc {
      font-size: 11px;
    }
  }
</style>

フォームをクリックし、Ctrl+Aキーで全選択、Ctrl+Cでコピーできます。

4．記事内に目次の挿入コードを記述する

このプログラムは以下のコードを読み取って挿入されます。

このコードを記事内の目次を表示したい部分に記述してください。
なお、このプログラムは<h2>タグが存在しない記事では目次は表示されない仕様になっています。

補足説明

CSSを編集する方法

当サイトの目次あり版テンプレートをお使いの方の場合

目次あり版をお使いの場合は、このプログラムは既に導入済みです。
仕様ではの上に自動挿入されるようになっています。

固定ページに目次を入れたい場合は、固定ページ内の任意の場所に、

を設定してください。
<h2>タグがあるなど、条件に沿っている場合は目次が挿入されます。

プログラム内で目次リンクとなる要素を取得しているコードについて

プログラム内で目次リンクとなる要素を指定しているコードは以下の部分です。

$(".post-content h2,.post-content h3,.post-content h4", this)

上記は当サイトのテンプレート用で、記事内のh2～h4までの見出しタグを取得しています。
この部分は大抵のテンプレートでは「.entry-content h2」のようになっているっぽいです。
上手く行かない場合は、この辺をイジってみてください。

また、h2タグの有無で目次の表示を決めている条件分岐は以下の部分です。

if ($(".post-content h2")[0]) {
$("#toc").html(toc);
}

「.post-content」という部分が、当サイトのテンプレートにおける個別記事ページの内容部分を指すクラス名になります。多くのテンプレートでは、この部分が「.entry-content」となっているので、上記の作業手順でコードを分けています。

コピペ系のコードでは「.entry-content」が多いので、当サイトのテンプレートをこれに対応させるには「<div class='post-body …'」と「<div class='post-content'>」に「entry-content」というクラス名を付与する必要が出てきます。以上が説明になりますが、作業が難しいと思うので対応したコードを使ってください。

オリジナルのBloggerテンプレート配布中！

Smart（スマート）

カード型の記事リストが並ぶ、スマートなデザインのテンプレートです。

スッキリした形にまとめたいブログにおすすめのテンプレートとなっています。

Hello, world!（ハローワールド）

画像を目立たせた記事リストが並ぶ、シンプルなデザインのテンプレートです。

画像を強調したいブログにおすすめのテンプレートとなっています。

3 件のコメント :

ふじやんさんのコメント...: こんにちは。またまたTwitterフォロワーさんからの不具合情報です(^^;

目次リンクとなる要素を指定するコードですが、Smartの場合、.post-content だと、サイドバーの「注目の記事ガジェット」の h3 タイトルも拾ってしまって、目次に記事リンクが挿入されてしまうようです。
検証してみたところ .post-content を .post-body または .post-area に変えるることで回避できました。

以上、ご参考まで。; 2020年10月7日 15:04
ふでたまごさんのコメント...: >ふじやんさん

情報ありがとうございます。指摘された通りに修正しておきました。

注目の投稿ガジェットを記事表示エリアに配置するという想定がなかったので、不具合に気づきませんでした（＾＾；; 2020年10月9日 15:09
みさんのコメント...: このコメントは投稿者によって削除されました。; 2024年3月12日 15:44

コメントを投稿