jQueryを使ってWordPressのプラグインなしでTOC+風の目次を実装するスニペット

目次を作るイラスト

WordPressで記事に目次を挿入してくれる人気のプラグイン「TOC+」は、当サイトも使っていて、簡単に設定できるので非常に重宝しています。

そんな目次の挿入ですが、TOC+のプラグインを使わずにjQueryを使って実装することもできてしまいます。

この記事は、そんなjQueryのTOC+風の目次について

  • jQuery目次のデザインサンプル。
  • HTML+CSS+jQueryのコピペ用コード一式。
  • ちょっとしたカスタマイズの解説。

です。

プラグインではなくjQueryなので、WordPress以外にも使うことができるので、コピペしたりカスタマイズしたりと、是非使ってみてください。

デザインサンプル

早速デザインサンプルで、当サイトの目次と同じ見た目です。

jQueryの設定は、このページの h2〜h3 タグを取得して、目次を作ってくれる仕様にしています。

目次

コピペする時の注意点

この記事で紹介のコピペ用コードには、jQueryの組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO
当サイトでは以下のjQueryを使用しています。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
上記のような記述が、htmlファイルの
<head>〜</head>
の中に無い場合その中へ貼り付けましょう。
かかかず
かかかず

jQueryは必須でないと動かないので、書きこんでからコピペください。

コピペ用コード一式

利用には、HTMLを表示させたいところに設置して、jQueryは <body>〜</body> のクロージングタグの前にコピペします。

コピペ用のコードは、コンテンツ内の見出しをピックアップして、そこから目次を自動生成してくれます。

コードを表示する

HTML

<dl id="index">
  <dt>目次</dt>
</dl>

CSS

dl#index {
position: relative;
    width: 100% !important;
    border-top: solid 5px;
    font-size: 0.95em;
    background: #f9f9f9;
    box-shadow: 0 1.5px 2.4px rgb(0 0 0 / 15%);
    border-color: #6bb6ff;
    margin: 20px auto 30px;
    box-sizing: border-box;
    padding: 25px 32px;
    display: table;
    min-width: 68%;
    counter-reset: li;
}
dl#index dt {
    font-weight: bold;
    font-size: 118%;
    padding: 0;
    color: #6bb6ff;
}
dl#index dt:before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    background-color: #6bb6ff;
    position: relative;
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: baseline;
    speak: none;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    content: "\f0ca";
    width: 50px;
    height: 50px;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
}
dl#index dt {
    padding: 0 0 20px;
    margin: 0 0 20px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    list-style: none;
}
dd.lv_h2 {
    position: relative;
    margin: 0;
}
dd.lv_h2 a {
    position: relative;
    text-decoration: none;
    display: inline-block;
    line-height: 1.6;
    padding: 3px 0;
    margin: 5px 0;
    transition: all .3s ease;
    font-size: 1.05rem;
    font-weight: bold;
    margin-left: 42px;
    color: #5f7b96;
}
dd.lv_h2:before {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    width: 32px;
    height: 32px;
    margin-right: 7px;
    border-radius: 16px;
    background-color: #6bb6ff;
    position: absolute;
    top: 5px;
    left: 0;
}
dd.lv_h2:after {
    counter-increment: li;
    content: counter(li);
    width: 32px;
    line-height: 32px;
    font-family: 'Avenir Next', 'Helvetica Neue', Arial, 'Meiryo','Yu Gothic', san-serif;
    font-weight: 400;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 5px;
    left: 0;
}
dd.lv_h2 a:hover {
    text-decoration: none;
    box-shadow: 0 2px;
}
dd.lv_h3 {
    margin: 0;
    font-size: 0.95em;
    font-weight: normal;
}
dd.lv_h3 a {
    position: relative;
    font-size: 94%;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    line-height: 1.6;
    padding: 3px 0;
    margin: 5px 0;
    transition: all .3s ease;
    margin-left: 40px;
    text-decoration: none;
    color: #5f7b96;
}
dd.lv_h3 a:before {
    position: relative;
    content: '\2023';
    display: inline-block;
    width: 14px;
    height: 28px;
    line-height: 28px;
    font-size: 40px;
    color: #c8e4ff;
    vertical-align: middle;
    margin-right: 7px;
}
dd.lv_h3 a:hover {
    text-decoration: none;
    box-shadow: 0 2px;
    padding-right: 4px;
}

jQuery

$(function(){
  var countId = 1
  $("#content h2,#content h3").each(function(){
    var ttl = $(this).text();
    var lv = this.nodeName.toLowerCase();
    this.id = 'ttl-' + countId;
    countId ++;
    $("#index").append('<dd class="lv_'+lv+'"><a href="#'+this.id+'">'+ttl+'</a></dd>');
  });
});

jQueryの解説

まずは、以下の場所に記述した目次番号を付与するための基準となるものを設定します。

jQuery

$("#content h2,#content h3")

このタグで例えば h2〜h6 まで指定したり、a タグだけ取得することも可能です。

レンタルサーバー