見出し一覧

見出し要素を抽出して一覧を生成する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]