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

2021年6月13日 5分

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

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

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

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

です。

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

デザインサンプル
- コピペする時の注意点
コピペ用コード一式
- jQueryの解説

デザインサンプル

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

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>');
  });
});