最初動かなかった

目次の自動生成を行う jQuery.exTOC.js - Cyokodog::Diary

上記のリンク先からスクリプトサンプルをもらってきて、指示通りやったにもかかわらず全然動いてくれなかった。リンクまでは生成されるが、そのリンクをいくらクリックしても、所定の場所まで移動してくれないのだ。

適応したスクリプト

        <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="../js/extoc_1_0.js"></script>
 
<script type="text/javascript">
jQuery(function($){
var toc = $('h2').exTOC({
    headFrom : 3,
    headTo : 5,
    insertMethod : 'after',
    numberingHead : true,
    numberingFrom : 2,
    numberingTo : 3
});
toc.getTOC().before('<div class="mokuji" id="TOC"><b>目次</b></div>')    
$('h3').append('<a href="#TOC" style="font-size: 8px; font-weight: normal; padding-left:10px;">▲目次に戻る</a>');
});    
 
</script>

原因はDOCTYPE

かつて、文字が大きくなるように404 Blog Not Foundをまねて、DOCTYPEを消した事を忘れていた。DOCTYPEを消せば、IEでMediumサイズのフォントが巨大に表示され、テキスト帳のようなイメージになるので、それを狙ってやっていた。

ところが、jQueryを使うなら、DOCTYPEは必ず必要らしい。

正確な構造は良く分かっていないが、なかったら正しく動かなくなるみたいだ。

原因がわかり、初めて動いたときはうれしかった。同時に良く分かってないのに変な事をやるもんじゃないと反省した。

スタイルの適応

目次の自動生成を行う jQuery.exTOC.js - Cyokodog::Diaryのサンプルが、無彩色だったので、そのまま使っている。

hタグを使って目次を自動更新するメリット

hタグはタイトルをつけるためのものだ。箇条書きからエントリーを起こす場合、箇条書きをタイトルにして、補足を入れるような形で文章を作っていく。

タイトルを細かく要素で分けて、深いツリー構造にしていっても、後から全体を確認するために、目次が必要になってくる。

出来上がった文章を自動で目次にしてくれれば、かなり効率が良い。手作業でやろうと思うとうんざりする。こういう面倒な作業は、自動化するために多少時間がかかったとしても、できるだけやっておいたほうが良い。

追記には反映されない

ひとつだけ残念なのが、追記部分が目次としてカウントされない事だ。何か方法があるのかもしれない。

本来、パーマリンク内でしか使えない目次なので、追記が反映されないのはかなり痛い。

このタイトルは目次に反映されない

原因を確かめたほうがよさそうだ。

反映されたことを確認

なぜかは分からないが、目次に含まれるようになった。もしかしたら、テストしていたときはDOCTYPEがなかったため、うまく取得することができていなかったのかもしれない。