Bonjour!

« つぶやき/ライムライト | トップページ | 日記/フランステレコム »

2004-01-26

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

本文(というか#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さんに期待しよう(笑)。

« つぶやき/ライムライト | トップページ | 日記/フランステレコム »

ウェブログ・ココログ関連」カテゴリの記事

コメント

こんにちは。(^^)
本文中に追加で見出しタグを追加する……なんてことは
考えもしなかったのですが、この機能を使えば本文内の
ナビゲーションが可能になりますね。

自宅はWin環境なのですが、今日は周りにMacがあるので
時間が取れたら、こちらの記事で稼動確認してみます。

WIndowsのNetscape、Opera、firebird、そして、MacのSafariとIEで確認しましたが、大きな支障はないようです。

Good job!!

これは便利かも~。(^^;
コメントが長々続いてる記事に使えそうです。
スクロールのわずらわしさ何とかしたいと思ってたところでした。
実験させて頂きますね。

トラックバックもしたけど一応コメントも。
サイドバーに見出し一覧を表示するように改造させていただきました。
これで情報量不足の「最近の記事」を取り除くことができました^^/。
ありがとうございますぅ。

みなさん、コメント&トラックバック、どうもありがとうございます。

>ぴっくあっぷ。さん、
相変わらず神速で(^^;)。ぴっくあっぷのめもでも取り上げていただいて、しかもCOOLまで…(T_T)。どうもありがとうございます。またお暇があればお願いします。といっても、Tigerさんに確認していただけたみたいですが。

>Tigerさん、
早速の動作確認、どうもありがとうございました。思った以上に動作してくれていてビックリしています(^^)。あとは主にIE5系ですかねぇ。

しかし、分かっていたことですが、 Tigerさんのバックナンバーみたいに記事数の多いページだと恐ろしいことになりますね(^^;)。

やっぱりselect要素を使う方が良いかなあ……。

>笹錦さん、
コメントとかトラックバックの見出しまで抽出するかどうか迷ったんですが、使い道のある方もありそうで良かったです。

トラックバック以降の見出しまで抽出するかどうかを選べるといいのかも知れませんね。

>Shinさん、
拝見させていただきました。なるほどー。そういう方法もありますね。とても参考になりました。次のバージョンでは、ちょっとそれらの技を使わせていただくかも知れません。

ということで、みなさん、どうもありがとうございます。

DOMを勉強し始めてみると、いろいろできそうなので、なんか楽しいです。分からないことも多いし、クロスブラウザの問題は頭が痛いですが、ご要望があればまたいろいろ考えてみたいと思っています。

今、密かに(?)、カテゴリリストをサブタイトルに移動させてます。

また、カテゴリページのトップにカテゴリの表示がなくて分かりにくいのと、トップページに戻るというリンクがなくて嫌という人があるみたいなので、それも付けてみています。

両者とも、だいたい良さそうなんですが、まだちょっと思考錯誤中です。

あとは、マイリストの折り畳みさえうまくいってくれれば、その後は……。

あたしがやりたいのは、こっちですね、多分?
でも…できない、分からない…(涙)
マイリストに貼り付けるだけですよね?

桃侍。さん、こんにちは(^^)

>あたしがやりたいのは、こっちですね、多分?

はい。こちらでしょう、たぶん。

でも、私が今やっているようにしたいのなら、無理です。なぜなら未公開だからですー(笑)

# もうすぐ公開しますので。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/1941/136838

この記事へのトラックバック一覧です: 本文の見出しを抽出するスクリプト:

» facet-diversさんが新スクリプト作成! [Peach Style]
facet-diversさん のところで、素晴らしいスクリプトが公開されていたので、新しいものスキスキな私は早速導入してみました。スタイルシートの書き換えである... [続きを読む]

» 見出し一覧テクニックが完成 [あそびをせんとやうまれけむ]
「facet-divers: 本文の見出しを抽出したい」のテクニックが完成しました。 「あそびや」(あそびをせんとやを略して A^^;)にも早速付けてみましたが... [続きを読む]

» カテゴリーの閲覧性がかなり高まった(全見出しの抽出) [philosophical ]
facet-divers: 本文の見出しを抽出するスクリプト より。 すばらしいですね~。 今までバックナンバーとかカテゴリーが閲覧し辛かったんですが、これで見... [続きを読む]

» 本文の見出し一覧をつけました [KOROPPYの本棚]
またまたビックリするような機能を実現してくださった記事を発見しました。 それが、facet-divers: 本文の見出しを抽出するスクリプトです。 ココログは本... [続きを読む]

» サイドバーへの記事一覧表示 [観測気球]
facet さんの「本文の見出しを抽出するスクリプト」と、その改造例「カテゴリーの閲覧性がかなり高まった(全見出しの抽出)」を参考に、サイドバーに投稿日別に記... [続きを読む]

» facet-divers: 本文の見出しを抽出するスクリプト [此処録ANNEX : ココログTIPS]
facet-divers: 本文の見出しを抽出するスクリプト... [続きを読む]

» facet-divers: 本文の見出しを抽出するスクリプト [此処録ANNEX : ココログTIPS]
facet-divers: 本文の見出しを抽出するスクリプト... [続きを読む]

» 見出し一覧 [facet-divers]
見出し要素を抽出して一覧を生成するjavascriptです。以前作ったのとあまり変わりませんが、今回のは見出し要素を使っているタイプのサイトならだいたい使えるの [続きを読む]

« つぶやき/ライムライト | トップページ | 日記/フランステレコム »

contact

検索

無料ブログはココログ
2017年11月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

BANNERS