Bonjour!

« getPageType.js for Typepad | トップページ | コメント欄の設定を明示する »

2004-11-27

見出し一覧

見出し要素を抽出して一覧を生成するjavascriptです。以前作ったのとあまり変わりませんが、今回のは見出し要素を使っているタイプのサイトならだいたい使えるのではないかと思います。カスタマイズ性も含め、当社比で150%の柔軟性アップといったところでしょうか(^^;

▼設置方法

抽出する見出しのある部分より後にあってHTMLが書ける所(ココログで本文の見出しを抽出するなら、右サイドバーのマイリストのメモ欄など)に以下のコード例をコピー&ペーストし、必要箇所を修正してください。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/extractHeadings01a.js">
</script>
<script type="text/javascript">
<!--
extractHeadings("content");
//-->
</script>

◆抽出元および抽出先の指定

関数extractHeadings()で、見出しの抽出元と抽出先を指定し、一覧を作成しています。

書式は、extractHeadings(scopeName, targetName);です。

最初の引数scopeNameで、抽出元の要素のidまたはclass名を指定します。引用符で囲んでください。

例の場合、"content"というidを持つ要素(またはclass名が付いた最初の要素)の中にある見出しを抽出しているということになります。

# ココログなどTypepad系のブログなら、このままでOKです。"center"でも構いません。

# 抽出元にidやclassが付いていない場合は抽出できません。

二番目の引数targetNameで、抽出先の要素のidまたはclass名を指定します。

例のようにtargetNameがない場合は、作成した見出し一覧を、抽出元の最初の見出しの直前に挿入するようになっています。

また、例えば、ココログで右サイドバーの最上部に本文の見出し一覧を挿入したい場合には、extractHeadings("content", "right");とします。

任意の場所に見出し一覧を抽出することもできます。その場合は、抽出先となるdiv要素を作成して任意のidを付けて配置し、targetNameにそのidを指定してください。

# ただし、そのdiv要素は、関数extractHeadings()が呼び出されるより前に記述されている必要がありますので、上手くいかないこともあるかもしれません。

なお、関数extractHeadings()は、作成した一覧の要素を返すようにしてありますので、例えば、

foldHeadingList(extractHeadings("content"));

とすると、ページ読み込み時に見出し一覧が折り畳まれた状態になり、見出し一覧のタイトルだけが表示されるようになります。

# 関数foldHeadingList()は、オマケです(^^;

▼カスタマイズ

◆スタイル(CSS)

上記のコード例のすぐ下に、以下のコード例を書き足すと、今の見出し一覧のようなスタイルになります。

# 記事別ページでは見出し一覧を出さないようにしてありますので、トップページやカテゴリページなどで御覧下さい。

<style type="text/css">
<!--
#content-headings {
margin: 0px 15px 30px 15px;
border: inset 1px gray;
padding: 0px;
background-color: #eeeeee;
}
#content-headings.folded {
margin: 0px 15px 15px 15px;
}
#content-headings .title {
padding: 0px;
}
#content-headings .title a {
display: block;
margin: 1px;
border: outset 1px gray;
padding: 2px;
font-size: x-small;
font-weight: bold;
color: gray;
text-decoration: none;
text-align: center;
background-color: white;
}
#content-headings .title a:hover {
color: white;
background-color: gray;
}
#content-headings .title .counter {
margin-left: 0.5em;
color: silver;
}
#content-headings .list {
margin: 0px;
max-height: 360px;
overflow: auto;
padding:0px;
font-size: x-small;
}
#content-headings .list .item {
margin-bottom: 0.5em;
line-height:110%;
}
#content-headings .list a {
text-decoration: none;
display: block;
padding: 2px;
}
#content-headings .list a:hover {
color: white;
background-color: gray;
}
#content-headings .level-1 {
margin-top: 1em;
text-align: center;
}
#content-headings .level-2 {
margin-top: 1em;
margin-left: 0px;
border-bottom: solid 1px gray;
padding-left: 10px;
}
#content-headings .level-3 {
margin-left: 0px;
border-left: solid 5px gray;
padding-left: 10px;
}
#content-headings .level-4 {
margin-left: 5px;
border-left: solid 5px gray;
padding-left: 10px;
}
#content-headings .level-5 {
margin-left: 10px;
border-left: solid 5px gray;
padding-left: 10px;
}
#content-headings .level-6 {
margin-left: 15px;
border-left: solid 5px gray;
padding-left: 10px;
}
-->
</style>

作成される一覧のHTML構造は、以下のようになっていますので、適当にアレンジしてください。

div#(scopeName)-headings
- div.title
- - a
- - - span.counter
- div.list
- - div.item
- - - a.level-x
- - div.item
- - - a.level-x

最初の#(scopeName)-headingsは、上記の例では#content-headingsとなります。

div.titleがタイトル部分です。

タイトルはa要素でできていて、クリックすると一覧を折り畳める用になっています。span.counterについては、後述します。

div.item以降が各見出しに対応しています。

見出しもa要素で、こちらは、クリックすると各見出しの位置にジャンプします。

.level-x の x は、抽出元の見出し要素のレベル(h1なら1、h3なら3)を指します。

◆見出し一覧タイトル

見出し一覧のタイトルは、ドキュメントタイトルから自動的に作成しています。

この部分をカスタマイズするには、関数extractHeadings()がある行より上に、以下のようなコードを追加してください。

useOnlyDefaultTitle = false;
HeadingListText["defaultTitle"] = "トップページ/最近の記事"
HeadingListText["erasePatternFromDocTitle"] = "[^:]+(: )?";
HeadingListText["titlePrefix"] = "";
HeadingListText["titleSuffix"] = "";

最初のuseOnlyDefaultTitle = false;のところで、見出し一覧のタイトルを、ドキュメントタイトルから取るかどうかを指定しています。

デフォルトでは、ここがfalseじゃなくてtrueになっていて、次に指定する"defaultTitle"というところに記述したタイトルだけが表示されます(変更@2004-12-05)。デフォルトでは「見出し一覧」というタイトルになっています。

ドキュメントタイトルから見出し一覧のタイトルを自動作成する場合は、上記例のように、この行の最後を = false; に変更すればOKです。

ドキュメントタイトルから見出し一覧タイトルを自動作成する場合、不要な文字があることがあります(たとえば、サイト名など)。その場合、"erasePatternFormDocTitle"というところで、ドキュメントタイトルから不要な文字を消すことができます。記法は、正規表現です。

# 上記の例は、ココログなどのTypepad系ブログ用の書き方です。たとえば、このブログなら、上記の表現で、トップページでは「facet-divers」、それ以外では「facet-divers: 」という文字が削除されます。

上記で不要部分を削除して何も無しになった場合は、"defaultTitle"の一行で指定したタイトルが代わりに表示されます。

# Typepad系ではトップページのみが何も無しの場合に該当しますので、上記例では「トップページ/最近の記事」としてみました。

# 前述したように、ドキュメントタイトルに依らず一定の見出しを付けたい場合もここで指定します。
次の二行("titlePrefix"と"titleSuffix")で、タイトルの前後に常に付け足す文字を指定できます。

# 抽出先をサイドバーにした場合などに使えるかと。

◆カウント機能

さらに、以下のような行を関数extractHeadings();より上に付け足すと、抽出元にある特定レベルの見出し数をタイトル右横に表示することができます。

例えば、h3を数えて()で囲って表示するには、以下のようにします。

countEntries = true;
entryTitleTagName = "h3";
HeadingListText["counterPrefix"] = "(";
HeadingListText["counterSuffix"] = ")";

# 記事数を表示るために付けた機能ですね(^^;

また、ここはspanタグで作られていて、counterというclass名を付けていますので、スタイルは、以下のような感じで変更可能です。

#content-headings .title .counter { color:silver; }

◆抽出対象となる見出しレベルの制限

デフォルトではh2からh6までのレベルの見出しを抽出するようになっています。これを変更するには、以下のようなコードを、関数extractHeadings();より上に追加してください。

headingLevelPattern = "23";

右辺の引用符内に、抽出対象のレベルを列挙してください。上記例だと、h2とh3が抽出対象になります。

# デフォルトでは2-6となっています。つまり、正規表現の[]内の書式に準じています:h[2-6] = h[23456]

« getPageType.js for Typepad | トップページ | コメント欄の設定を明示する »

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

パソコン・インターネット」カテゴリの記事

コメント

はじめまして。
ココログの月別バックナンバーページに記事の見出し一覧を載せたいと思い、
検索してここにたどり着きました。
スタイルシート等は全然詳しくないのですが、
こちらのスクリプトを参考にさせていただき、
なんとか思い通りの形になりました。
どうもありがとうございます。
ただ、extractHeadings01a.jsのファイルが見つからないので
そのままfacetさんの所のスクリプトを利用させていただいているのですが、
よろしいのでしょうか?
問題がありましたら教えてください。
では、失礼します。

→たくみのパパさん、はじめまして(^^)

実は私も風邪で、ちょっとパソコンの前に座るのが辛く、お返事が遅れています。申し訳ありません。

とりあえずご希望に近い形になったということですが、コメントを読む限り、できればバックナンバーだけに見出し一覧を付けたいなど、さらにご希望があるように感じました。ご遠慮なさらず、具体的に書いてみてください。多分、もっとご希望通りにできると思いますので(^^)

それから、extractHeadings01a.jsの件ですが、記事が分かり辛くて申し訳ありません。私の記事は、分かり辛いことで定評(?)がありまして(^^;

まず、ココログの方の場合、そのまま使っていただいてもよいと思っていますので、個人的には別にそのままで一向に構いません。

次に、信頼性からいうと、私のブログがいつまでもあるという保証はありませんから、 それなりの対処をされた方がよいとも言えます。

どうするかといいますと、まず、私のブログにおいてある該当ファイルを御自分のパソコンにダウンロードし、それを改めて御自分がお持ちの任意のWebサイト(ブログなど)へアップロードしていただく必要があります。(このファイルは、ココログが作ったものじゃなくて、私が作って自分のブログにアップロードしてあるものだからです)

該当ファイルのURLは、記事内のマイリスト用コードに書かれている通りですが、以下に再掲しておきます。

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

アップロード先は、ココログ用のスクリプトですから、御自分のココログにするのが一番安心かと思います。

ファイルのアップロード方法については、ココログのヘルプ等をご参照ください。

該当ファイルをアップロードし終わりましたら、記事内のマイリスト貼り付け用コードに書かれている、最初のjavascript要素のsrc属性値のURLの部分を、御自分のアップロード先へ変更してください。

以上で修正完了です。

ご不明の点がありましたら、また改めてご質問ください。説明下手なので余計に混乱させてしまうかもしれませんが(^^;

こんにちは。

extractHeadings01a.js、さっそくダウンロードさせていただきました。
マイリストも変更済みです。
ご教授ありがとうございました。

確かにはじめはバックナンバーにだけ見出し一覧が欲しかったのですが、
元記事を参考にデフォルトで折り畳むようにしたので、
当座は今のままでも良いかと考えております。
将来別の希望が出てくるかもしれませんが・・・^^;

では、お風邪が早く良くなられますよう。

→たくみのパパさん

了解しました。では、また、何かありましたら。

facetさんはじめまして。
KOROPPYさんに見出しの一覧の件で教えていただき
facetさんにもご迷惑をおかけしてすみませんでしたm(_ _)m
昨日の夜中さっそく試してみようと試みたのですが、なんかチンプンカンプン状態だったので、じっくりとがんばってみようと思います。私のことなので、理解するまで多分時間がかかると思います。わからないことがあった時はお世話になっても宜しいでしょうか?
これからもどうぞ宜しくお願い致しますm(_ _)m

さゆみさん、はじめまして(^^)

私の記事は、分かり難いので定評がありますから、チンプンカンプンで当然です(笑)
スミマセン(^^;

とりあえず、「このページの見出し一覧」のメモ欄に、以下のコードをコピペして保存してみていただけますか?


script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/extractHeadings01a.js"
/script
script type="text/javascript"
!--
HeadingListText["defaultTitle"] = "このページの見出し一覧";
extractHeadings("content", "right");
//--
/script
style type="text/css"
!--
#content-headings {
margin: 0px 15px 30px 15px;
border: inset 1px gray;
padding: 0px;
background-color: #eeeeee;
}
#content-headings.folded {
margin: 0px 15px 15px 15px;
}
#content-headings .title {
padding: 0px;
}
#content-headings .title a {
display: block;
margin: 1px;
border: outset 1px gray;
padding: 2px;
font-size: x-small;
font-weight: bold;
color: gray;
text-decoration: none;
text-align: center;
background-color: white;
}
#content-headings .title a:hover {
color: white;
background-color: gray;
}
#content-headings .title .counter {
margin-left: 0.5em;
color: silver;
}
#content-headings .list {
margin: 0px;
max-height: 360px;
overflow: auto;
padding:0px;
font-size: x-small;
}
#content-headings .list .item {
margin-bottom: 0.5em;
line-height:110%;
}
#content-headings .list a {
text-decoration: none;
display: block;
padding: 2px;
}
#content-headings .list a:hover {
color: white;
background-color: gray;
}
#content-headings .level-1 {
margin-top: 1em;
text-align: center;
}
#content-headings .level-2 {
margin-top: 1em;
margin-left: 0px;
border-bottom: solid 1px gray;
padding-left: 10px;
}
#content-headings .level-3 {
margin-left: 0px;
border-left: solid 5px gray;
padding-left: 10px;
}
#content-headings .level-4 {
margin-left: 5px;
border-left: solid 5px gray;
padding-left: 10px;
}
#content-headings .level-5 {
margin-left: 10px;
border-left: solid 5px gray;
padding-left: 10px;
}
#content-headings .level-6 {
margin-left: 15px;
border-left: solid 5px gray;
padding-left: 10px;
}
--
/style


これだけで動作はするはずですが、このままでは見出し一覧のタイトルが重複してしまいますので、今のマイリストのタイトルを「!--このページの見出し一覧--」に変更して表示されないようにすれば、とりあえず完成です。

なお、上記のstyleだと、KOROPPYさんちのとは随分違った雰囲気の一覧になりますので、お好みに合わせて、styleを調整してみてください。

よく分からないときは時は、何でも結構ですので、またお気軽にコメントください(^^)

facetさん、ありがとうございました!
さっそくマイリストに貼り付けてみたら、ちゃんと表示されました!!!ヾ(〃^∇^)ノわぁい♪

お馬鹿ついでに、もう一つ教えていただきたいのですが・・・
スクロールバーを入れようと思い、上のコードの中に追記してみたのですが、なぜかうまく出来ません。
どこに入れたらいいのでしょうか??

本当に何度もすみませんm(_ _)m

#content-headings .list
のところです。

一応、既にmax-height: 360px;に設定してあるので、IE以外では、縦に長くなったら自動的にスクロールバーが出るようになってます。

IEはmax-heightの効果がないのでheightを使わないといけないんですが、heightを使うと一覧が短い時にもその高さになってしまうので、判断が難しいところです。

KOROPPYさんとも話し合ったことがあるんですが、未だいい解決策がありません…

max-を削除してみたらスクロールバーが表示されました!
こんな簡単なことで私はずっと悩んでたんだ・・・( ̄▽ ̄;)!!ガーン
とりあえず、なんとかスタイルも変えることが出来たし私としては、かなり満足できました♪
本当にありがとうございましたm(*T▽T*)m

いえいえ、どういたしまして、さゆみさん(^^)
もうアイコンまで…仕事速!

では、また何かあれば何でもお気軽に~

facetさん、どうもです。

私もバックナンバーやカテゴリー毎のページに目次を付けたいな、と思い、こちらのスクリプトか、なおゆきさんの
『タイトルと概要を表示するJavaScript』
http://java.cocolog-nifty.com/blog/2005/09/javascript_6281.html
を使おうか……と迷っていたのですが。

ふと、莫迦げたアイデアが浮かんだので、自分で作ってみました(^^;。宜しければご笑覧下さい。
http://furyu.tea-nifty.com/annex/2006/05/javascript_fc68.html

ちなみに、ブックマークレットもありますので、ココログを使っている任意のサイトにて(対応していない場合もありますが)、ページ内目次(見出し一覧)を付けることが出来たりします。

はじめまして!timotimoといいます

ココログの見出し作成コード、利用させていただきました
何の知識もなくただ貼っても動いてくれて、大変助かりました(もちろんそのようにお作りになったからアタリマエですが^^;)

黙って使うのも気が引けましたのでご報告まで。
ありがとうございました!m(_ _)m

timotimoさん、はじめまして。
お役に立てたようで何よりでした。(^^)

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: 見出し一覧:

» facet-divers: 見出し一覧 [此処録ANNEX:ココログTIPS]
facet-divers: 見出し一覧 [続きを読む]

» サイドバーの見出し一覧に関して [KITORA's Blog]
先の Entry:「【教えて】サイドバーの見出し一覧が……」 に書いた話題ですが [続きを読む]

» 見出し一覧を付けてみました。 [るるが株式会社]
facet-divers様のスクリプト見出し一覧! 発見したので早速利用してみました。軽く色などは変 [続きを読む]

» ページの見出し一覧を抽出。 [ケセラセラ]
いつもお世話になっているfacetさんのfacet-diversからまたスクリプ [続きを読む]

» 見出し一覧&月別バックナンバープルダウンメニューを設置。 [be there]
久々にカスタマイズです。以前からやりたかった記事の見出し一覧、ようやくできました [続きを読む]

» 【ココログ】ページ内記事の目次を作るJavaScript(謎のおまけ付き) [風柳亭 - 別館:書庫のある庵 -]
ココログで、現在表示しているページの目次を作るJavaScriptを作ってみました。 トップページに記事を沢山置いている [続きを読む]

« getPageType.js for Typepad | トップページ | コメント欄の設定を明示する »

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