茱萸note

電子工作の備忘録と旅行の記録

Web 電子工作

記事の先頭に目次を置く

投稿日:2016年3月14日 更新日:

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ではついでに目次の文字色を黒に変えています。

-電子工作
-,

関連記事

Alexa で ESP8266 を操作する方法【Alexa×Arduino 検討】

Alexa を搭載した Amazon Echo 等を使って ESP8266(Arduino)を操作する方法を検討します。

Raspberry Pi で Windows PC をシャットダウン or スリープモードにする

Windows PC を Raspberry Pi から遠隔操作してシャットダウン or スリープモードにします。

【Ubuntu】【上級者向け】Grubブートローダをインストールする

「EFIシステムパーティションを新たに作成した」などの理由でGrubブートローダをインストールしたい人に向けてその方法を説明します。

TeXの多書体化

TeXを多書体化して、文書中で自由にフォントを変えられるようにします。

プロキシ設定が必要な学内LANに接続するときに役に立つスクリプト

プロキシ設定が必要な学内 or 社内LANに接続する際のプロキシ設定の切り替えをしやすくするスクリプトを用意します。