本文の見出しを抽出するスクリプト

本文（というか#center.content部分）に含まれている見出し(h1〜h6)を全て抽出し、それぞれの見出しへのリンクが付いた一覧を作成して本文上部に挿入してくれるjavascriptです。

これまでIE6で動作してくれなかったのですが、前回の記事（本文の見出しを抽出したい）に頂いた山けんさんのコメントのお蔭で、晴れてこの問題を解決することができました。山けんさん、本当にありがとうございました。_(._.)_

ということで、本文の見出しを抽出するスクリプト version 01b (extractContentHeadings01b.js)として改めて公開することにします。

http://facet.cocolog-nifty.com/divers/extractContentHeadings01b.js

使い方は、右サイトバーのリスト型マイリストのメモ欄（テキスト表示設定済み）に下記のスクリプトを張り付けるだけです。（本文より後じゃないとちゃんと動作しないのではないかと思ってます。）

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/extractContentHeadings01b.js"></script>

とりあえずこれだけで動作するように考えて作ったつもりなんですが、全然駄目かも知れませんので、そのあたりの不具合などをお知らせ頂けると嬉しいです。

現在までに、IE6/winXP、(Firebird 0.7, Mozilla 1.1)/Linux[Mandrake9.2]での動作を確認しました。IE5は、（ノートパソコンが故障してしまったため）まだ動作確認できてません。動作確認、大歓迎です。_(._.)_

また、このスクリプトは、スタイルシートをイジルことで見栄えを変更することができます。

現時点の当サイトでは、以下のスタイルを書き加えることによって、本文の右半分にボックス表示されるようにしています。

#content-headings {
float:right;
width: 45%;
border: solid 1px black;
background-color: white;
margin: 0px 0px 5px 5px;
padding: 5px;
font-size: x-small;
line-height: 120%;
}

また、今のスタイル（TypePad風）のままでは本文のリンクに下線が引かれるようになっているのですが、さすがに邪魔だったので下記のスタイルを追加して消しています。

#content-headings a {
text-decoration: none;
}
#content-headings a:hover {
text-decoration: underline;
}

さらに、ボックス内で階段状にインデントしたかったので、

#content-headings .level-2 {
margin-left: 5px;
}
#content-headings .level-3 {
margin-left: 10px;
}

というスタイルも加えました。.level-の後の数字が見出しレベルの数字に対応しています。Firebirdではきちんとインデントされるんですが、IE6では駄目でした。このあたりも修正したいんですが、まだ解決できていません。(T_T) (これもIE6だとclassNameにしないといけないのかもしれないですね…）

# 今回で見出しの抽出方法は分かったので、今度はセレクトボックス型のも作りたいなあと思っています。今回のボックス表示は、最初は結構いいかなと思ったんですが、一ページ内の記事数が多くなると邪魔くさいですからね(^^;)。

# また、サイドバーの見出し抽出も同じようにすればできそうですので、これもそのうち作りたいなと思ってます。

# なお、サイドバーを折り畳む方は、まだIEでの解決方法が見つかっていないので、まだまだ道のりは遠そうです(T_T)。tsupoさんに期待しよう（笑）。