見出し要素を抽出して一覧を生成するjavascriptです。以前作ったのとあまり変わりませんが、今回のは見出し要素を使っているタイプのサイトならだいたい使えるのではないかと思います。抽出する見出しのある部分より後にあってHTMLが書ける所(ココログで本文の見出しを抽出するなら、右サイドバーのマイリストのメモ欄など)に以下のコード例をコピー&ペーストし、必要箇所を修正してください。関数extractHeadings()で、見出しの抽出元と抽出先を指定し、一覧を作成しています。targetName);です。最初の引数scopeNameで、抽出元の要素のidまたはclass名を指定します。引用符で囲んでください。例の場合、"content"というidを持つ要素(またはclass名が付いた最初の要素)の中にある見出しを抽出しているということになります。ココログなどTypepad系のブログなら、このままでOKです。"center"でも構いません。抽出元にidやclassが付いていない場合は抽出できません。二番目の引数targetNameで、抽出先の要素のidまたはclass名を指定します。例のようにtargetNameがない場合は、作成した見出し一覧を、抽出元の最初の見出しの直前に挿入するようになっています。"right");とします。任意の場所に見出し一覧を抽出することもできます。その場合は、抽出先となるdiv要素を作成して任意のidを付けて配置し、targetNameにそのidを指定してください。そのdiv要素は、関数extractHeadings()が呼び出されるより前に記述されている必要がありますので、上手くいかないこともあるかもしれません。関数extractHeadings()は、作成した一覧の要素を返すようにしてありますので、例えば、foldHeadingList(extractHeadings("content"));とすると、ページ読み込み時に見出し一覧が折り畳まれた状態になり、見出し一覧のタイトルだけが表示されるようになります。関数foldHeadingList()は、オマケです(^^;▼カスタマイズ◆スタイル(CSS)上記のコード例のすぐ下に、以下のコード例を書き足すと、今の見出し一覧のようなスタイルになります。記事別ページでは見出し一覧を出さないようにしてありますので、トップページやカテゴリページなどで御覧下さい。10px;}--></style>作成される一覧のHTML構造は、以下のようになっていますので、適当にアレンジしてください。a.level-x...最初の#(scopeName)-headingsは、上記の例では#content-headingsとなります。div.titleがタイトル部分です。タイトルはa要素でできていて、クリックすると一覧を折り畳める用になっています。span.counterについては、後述します。div.item以降が各見出しに対応しています。見出しもa要素で、こちらは、クリックすると各見出しの位置にジャンプします。抽出元の見出し要素のレベル(h1なら1、h3なら3)を指します。◆見出し一覧タイトル見出し一覧のタイトルは、ドキュメントタイトルから自動的に作成しています。この部分をカスタマイズするには、関数extractHeadings()がある行より上に、以下のようなコードを追加してください。false;のところで、見出し一覧のタイトルを、ドキュメントタイトルから取るかどうかを指定しています。デフォルトでは、ここがfalseじゃなくてtrueになっていて、次に指定する"defaultTitle"というところに記述したタイトルだけが表示されます(変更@2004-12-05)。デフォルトでは「見出し一覧」というタイトルになっています。ドキュメントタイトルから見出し一覧タイトルを自動作成する場合、不要な文字があることがあります(たとえば、サイト名など)。その場合、"erasePatternFormDocTitle"というところで、ドキュメントタイトルから不要な文字を消すことができます。記法は、正規表現です。上記の例は、ココログなどのTypepad系ブログ用の書き方です。」という文字が削除されます。上記で不要部分を削除して何も無しになった場合は、"defaultTitle"の一行で指定したタイトルが代わりに表示されます。Typepad系ではトップページのみが何も無しの場合に該当しますので、上記例では「トップページ/最近の記事」としてみました。前述したように、ドキュメントタイトルに依らず一定の見出しを付けたい場合もここで指定します。次の二行("titlePrefix"と"titleSuffix")で、タイトルの前後に常に付け足す文字を指定できます。抽出先をサイドバーにした場合などに使えるかと。◆カウント機能さらに、以下のような行を関数extractHeadings();より上に付け足すと、抽出元にある特定レベルの見出し数をタイトル右横に表示することができます。h3を数えて()で囲って表示するには、以下のようにします。記事数を表示るために付けた機能ですね(^^;また、ここはspanタグで作られていて、counterというclass名を付けていますので、スタイルは、以下のような感じで変更可能です。}◆抽出対象となる見出しレベルの制限デフォルトではh2からh6までのレベルの見出しを抽出するようになっています。これを変更するには、以下のようなコードを、関数extractHeadings();より上に追加してください。"23";右辺の引用符内に、抽出対象のレベルを列挙してください。上記例だと、h2とh3が抽出対象になります。デフォルトでは2-6となっています。コメント入力欄に「(任意)」の文字も!(2008.04.01)げ。(2008.01.10)「パソコン・インターネット」カテゴリの記事Amazonで見ている本をhontoで検索するbookmarklet(2012.05.29)Amazonで見ている本をbk1で検索するbookmarklet[2006-09版](2006.09.11)Amazonで見ている本をbk1で検索するbookmarklet改改(2006.05.22)GoogleとAmazonにだけ繋がらないのは(2006.04.08)コメントはじめまして。検索してここにたどり着きました。スタイルシート等は全然詳しくないのですが、こちらのスクリプトを参考にさせていただき、なんとか思い通りの形になりました。ありがとうございます。extractHeadings01a.jsのファイルが見つからないのでそのままfacetさんの所のスクリプトを利用させていただいているのですが、よろしいのでしょうか?問題がありましたら教えてください。13:15→たくみのパパさん、はじめまして(^^)実は私も風邪で、ちょっとパソコンの前に座るのが辛く、お返事が遅れています。ご希望に近い形になったということですが、コメントを読む限り、できればバックナンバーだけに見出し一覧を付けたいなど、さらにご希望があるように感じました。ご遠慮なさらず、具体的に書いてみてください。ご希望通りにできると思いますので(^^)それから、extractHeadings01a.jsの件ですが、記事が分かり辛くて申し訳ありません。私の記事は、分かり辛いことで定評(?)がありまして(^^;まず、ココログの方の場合、そのまま使っていただいてもよいと思っていますので、個人的には別にそのままで一向に構いません。それなりの対処をされた方がよいとも言えます。するかといいますと、まず、私のブログにおいてある該当ファイルを御自分のパソコンにダウンロードし、それを改めて御自分がお持ちの任意のWebサイト(ブログなど)へアップロードしていただく必要があります。(このファイルは、ココログが作ったものじゃなくて、私が作って自分のブログにアップロードしてあるものだからです)該当ファイルのURLは、記事内のマイリスト用コードに書かれている通りですが、以下に再掲しておきます。http://facet.cocolog-nifty.com/divers/extractHeadings01a.jsアップロード先は、ココログ用のスクリプトですから、御自分のココログにするのが一番安心かと思います。ファイルのアップロード方法については、ココログのヘルプ等をご参照ください。該当ファイルをアップロードし終わりましたら、記事内のマイリスト貼り付け用コードに書かれている、最初のjavascript要素のsrc属性値のURLの部分を、御自分のアップロード先へ変更してください。ご不明の点がありましたら、また改めてご質問ください。20:53こんにちは。extractHeadings01a.js、さっそくダウンロードさせていただきました。マイリストも変更済みです。ご教授ありがとうございました。当座は今のままでも良いかと考えております。将来別の希望が出てくるかもしれませんが・・・^^;では、お風邪が早く良くなられますよう。13:04→たくみのパパさん了解しました。15:59facetさんはじめまして。_)m昨日の夜中さっそく試してみようと試みたのですが、なんかチンプンカンプン状態だったので、じっくりとがんばってみようと思います。私のことなので、理解するまで多分時間がかかると思います。10px;}--></style>これだけで動作はするはずですが、このままでは見出し一覧のタイトルが重複してしまいますので、今のマイリストのタイトルを「<!--このページの見出し一覧-->」に変更して表示されないようにすれば、とりあえず完成です。上記のstyleだと、KOROPPYさんちのとは随分違った雰囲気の一覧になりますので、お好みに合わせて、styleを調整してみてください。09:30facetさん、ありがとうございました!さっそくマイリストに貼り付けてみたら、ちゃんと表示されました!!!ヾ(〃^∇^)ノわぁい♪お馬鹿ついでに、もう一つ教えていただきたいのですが・・・スクロールバーを入れようと思い、上のコードの中に追記してみたのですが、なぜかうまく出来ません。.listのところです。360px;に設定してあるので、IE以外では、縦に長くなったら自動的にスクロールバーが出るようになってます。IEはmax-heightの効果がないのでheightを使わないといけないんですが、heightを使うと一覧が短い時にもその高さになってしまうので、判断が難しいところです。18:27facetさん、どうもです。私もバックナンバーやカテゴリー毎のページに目次を付けたいな、と思い、こちらのスクリプトか、なおゆきさんの『タイトルと概要を表示するJavaScript』http://java.cocolog-nifty.com/blog/2005/09/javascript_6281.htmlを使おうか......と迷っていたのですが。莫迦げたアイデアが浮かんだので、自分で作ってみました(^^;。宜しければご笑覧下さい。http://furyu.tea-nifty.com/annex/2006/05/javascript_fc68.htmlちなみに、ブックマークレットもありますので、ココログを使っている任意のサイトにて(対応していない場合もありますが)、ページ内目次(見出し一覧)を付けることが出来たりします。12:16はじめまして!timotimoといいますココログの見出し作成コード、利用させていただきました何の知識もなくただ貼っても動いてくれて、大変助かりました(もちろんそのようにお作りになったからアタリマエですが^^;)黙って使うのも気が引けましたのでご報告まで。22:12timotimoさん、はじめまして。お役に立てたようで何よりでした。見出し一覧を付けてみました。発見したので早速利用してみました。ページの見出し一覧を抽出。見出し一覧&月別バックナンバープルダウンメニューを設置。there]久々にカスタマイズです。-]ココログで、現在表示しているページの目次を作るJavaScriptを作ってみました。伝言版(はてな出張所)ココログ不調時やメンテ中はこちらへ。コメント入力欄に「(任意)」の文字も!なわとびげ。AnalyticsBANNERS似非ページトップに戻る。