Plus」を外しました。プラグイン無しで記事の見出しから目次を生成したり、「目次に戻る」を自動で表示させたりするjQueryのメモです。目次のリストを生成するまずはこちらを参考に、目次のリストをつくります。上から順に、かんたんに補足をいれます。idcount,toc,currentlevelというみっつの変数に、それぞれ以下のように値を代入します。0;<article>内に<h2>と<h3>と<h4>があったら、それぞれfunction(){以後の処理をします。h4",this).each(function(){ここで単にh2,h3,h4と書いてしまうと、記事以外の(ページ内全部の)h2が目次の対象になってしまいます。このブログでは<article>内の<h2>~<h4>を目次にするため、上のように書きました。日本語リファレンス合致した全てのエレメントに対して関数を実行する。これは、合致するエレメントが見つかる度に1度ずつ、毎回関数が実行されることを意味する。記事内に指定した見出しが登場したら、その都度以下の処理を行います。変数idcountに入ってる数値」っていうid名をつけます。id=”chapter-1”>ってなります。次に、変数idcountの値をひとつ増やします。idcount++;変数idcountの値をひとつずつ増やすことで、次に登場する見出しのid名はchapter-2、その次はchapter-3...となります。新しい変数levelを定義します(いったん0を代入)。0;見出しが<h2>なら、変数levelには1を代入。1;}<h3>なら2、<h4>なら3を代入します。3;}以下、変数currentlevelと変数levelの値によって処理がかわります。class="chapter">';さらに変数currentlevelの値をひとつ増やす、という処理を続けます。"</ol>";さらに変数currentlevelの値をひとつ減らす、という処理を続けます。currentlevel--;}これで分岐はおわりです。</a></li>」って文字列を足していきます。"</a></li>\n";ここまでの流れがわかりづらいので、以下の例にそってもう少し補足します。いう構成の記事があったとします。<h2>ひとつめのH2</h2><h2>テキストテキスト</h2><h3>ひとつめのH3</h3><h2>テキストテキスト</h2><h2>ふたつめのH2</h2><h2>テキストテキスト</h2>この場合、まず、ひとつめの<h2>ではこんな処理が行われます。変数currentlevelには最初0が入っています(最初に代入した)。変数levelには1が代入されます(<h2>だから)。class="chapter">」って文字列になります。currentlevelの値をひとつ増やして、1になります。</a></li>」という文字列を足します。href="#chapter-1">ひとつめのH2</a></li>です。つぎに<h3>で行われる処理です。変数currentlevelは1が入っています。変数levelは2(<h3>だから)。class="chapter">」って文字列を足します。class="chapter">」になります。currentlevelの値をひとつ増やして、2になります。href="#chapter-2">ひとつめのH3</a></li>になります。さいごの<h2>のところで行われる処理です。変数currentlevelは2が入っています。変数levelは1(<h2>だから)。currentlevelのほうがlevelより大きいので、変数tocに</ol>って文字列を足します。href="#chapter-2">ひとつめのH3</a></li></ol>。変数currentlevelの値がひとつ減って、1になります。href="#chapter-3">ふたつめのH2</a></li>になります。すべての見出しに対して、処理が終わりました。変数currentlevelの値が0より大きい間は、変数tocに</ol>を足します。"</ol>";さらに、変数currentlevelの値をひとつ減らします。href="#chapter-3">ふたつめのH2</a></li></ol>となります。変数currentlevelの値がひとつ減って、0になります。リスト末尾後の</ol>が書かれたところで変数currentlevelの値が0になりますので、これでリスト生成は終わりです。最後に、tocというid名がついた要素の中に、いま生成した目次のリスト(つまり、変数tocのながーい値)を挿入してね、と書いておきます。STUDIO要素内のHTMLを取得、またはエレメント内に指定したHTMLを挿入します。これで、好きなところに目次を表示する仕組みが整いました。id="toc"></div>と書きます。idがtocであれば、divじゃなくても良いです。spanでもnavでもお好みで。id="toc">~</div>内に挿入されます。</ol></div>「目次に戻る」も自動で表示させる文章が長いときにあると便利な「目次に戻る」ナビゲーションを、<h2>の前に自動で表示させることにします。class="back-toc">...</div>を追加します。ピンクの文字と矢印を入れてみました。ボタン風にするともっと見やすいですね。こちらは、見出しの直後に小さなボタンを置くイメージ(ピンクの矢印)。class="back-toc">...</div>を追加することにします。自動で目次を表示する(テンプレートファイルに直接書く)このブログでは、テンプレートファイル(single.php)でmoreタグ(<!--more-->)の前と後を出し分けています。moreタグ直後に目次が自動で表示されるよう、テンプレートファイルに直接書き込んでしまいました。通常、記事はこんなふうに出力しているかと思います。?>わたしは、ここを以下のように書き換えています。id="toc"></div>って書かなくても自動で全部の記事に目次が表示されるようになりました。id="toc"></div>が出力されてしまうようになります。見出しがないのでもちろん目次のリストは出力されませんが、id="toc"に指定している背景色や枠線がちょっと出ちゃうので、気になります。...見出し(<h2>)がひとつでも存在すれば、いままでと同じ処理をします。class="no-toc">と出力させます。'no-toc');}これを、CSSで非表示にします。!important;}でも、見出しがなければそもそも目次を生成させないようにするなど、もう少しスマートな方法があるような気がします。書いているコードです。}});</script>へたっぴなコードですが、何かの参考になればうれしいです。Plus」なら簡単に目次を自動で表示してくれますし、見出しの数から表示・非表示も設定できますし(今回これが無理やりなのが心残り)、やっぱりプラグインは便利ですね。