記事の先頭に目次を置く

投稿日：2016年3月14日更新日：2020年2月21日

Blogの記事の先頭に自動的に目次を生成するにはどうすれば良いか？

JavaScript を使って実装したいと思います．

<h3>を列挙

記事上部には以下を書き加えます。

<div id="index_h3"></div>

記事下部には以下を書き加えます。

<script type="text/javascript"> 
(function(){
   var elements = document.getElementsByTagName("h3");
   var str = "<ul>\n";
   for(var i = 1;i < elements.length;i++){
       str += "<li>elements[i].innerHTML</li>\n";
   }
   str += "</ul>";
   document.getElementById("index_h3").innerHTML = str;
}());
</script>

<div id="index_h3"></div>に箇条書きにして<h3>要素を列挙しています。

ページ内リンクを張る

記事下部を以下のように修正します。

<script type="text/javascript"> 
(function(){
   var elements = document.getElementsByTagName("h3");
   var str = "<ul>\n";
   for(var i = 1;i < elements.length;i++){
       elements[i].setAttribute("id","h3_" + i);
       str += "<li><a href=\"#h3_" + i + "\">" + elements[i].innerHTML + "</a></li>\n";
   }
   str += "</ul>";
   document.getElementById("index_h3").innerHTML = str;
}());
</script>

ただし、はてなブログの場合、自動的にKeyWordリンクが貼られてしまった見出しでは正しくリンクが張れないので、正規表現をつかって目次の見出しタイトルのHTMLタグを削除します。見出し本体のHTMLタグ並びにKeyWordリンクは削除されないのでご安心を。

<script type="text/javascript"> 
(function(){
   var elements = document.getElementsByTagName("h3");
   var str = "<ul>\n";
   for(var i = 1;i < elements.length;i++){
       elements[i].setAttribute("id","h3_" + i);
       str += "<li><a href=\"#h3_" + i + "\" style=\"color:#000000;\">" + elements[i].innerHTML.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,"") + "</a></li>\n";
   }
   str += "</ul>";
   document.getElementById("index_h3").innerHTML = str;
}());
</script>

上記のCodeではついでに目次の文字色を黒に変えています。