折り畳みで見出し一覧

このjavascriptを設置すると、本文エリアの上部に「見出し一覧」や「全て表示」などといった「表示モードスイッチ」が配置され、それらをクリックして選択するだけで、本文エリアの表示モードを瞬時に変えられるようになります。

# これは、折り畳みで「続きを読む...」スクリプトのオプション機能です。元記事（折り畳みで「続きを読む...」）を参考にスクリプトを設置し、以下のオプション機能をオンにしてください。

----

* 中央本文エリア最上部に「表示モードスイッチ」を追加する機能

このオプション機能をオンにすることによって、中央本文エリア(#center.content）の再上部に、「見出し一覧」、「全て表示」「導入部/概要を表示」の３つの表示モードスイッチが生成されます。

# ページ読み込み時には、「導入部/概要を表示」モードになっているので、このスイッチは表示されません。他のモードになると、自動的にスイッチが現れるようになっています。

この機能をオンにする方法は、次の通りです。

- ここのスクリプト本体（foldContent01a.js）をそのまま使っている場合：「呼び出しスクリプト」の foldContent(); という行より前に下記のコードを挿入する。
- 自分の所にスクリプト本体（foldContent01a.js）をアップロードした場合：スクリプト本体の上方にある同様の部分を下記のように修正して再度アップロードする。

addCenterHeadDisplayModeSwitch = true;
displayAllText = '全て表示(+)';
displayHeadingsText = '見出しだけ表示(-)';
displayIntrosText = '続きを隠す(△)';
displaySwitchStyle = "text-align:center;font-size:small;";

最初の一行で機能をオンにしています。また、〜Textと〜Styleの所の引用符内は自由にカスタマイズ可能です。（スイッチは、a要素です）

# 今はスイッチが３つですが、記事の並び順をひっくり返すことのできるスイッチなんかもあったらいいなあと思ったりします。

----

* 記事タイトル(見出しh3要素)に開閉スイッチを追加する機能

「見出し一覧」モードにした時に、読みたい記事だけを展開表示して読めたら便利だなあと思って付加したオプション機能です。（∴見出し一覧に必須の機能ではありません）

この機能をオンにすると、記事タイトル横に開閉スイッチがつくようになります。
（上記の機能をオンにする方法を参照）

addH3ShowHideSwitch = true;
showSwitchMark = '+';
hideSwitchMark = '-';
showHideSwitchStyle = "padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;float:right;";

最初の一行で機能をオンにしています。また、〜Markおよび〜Styleの所の引用符内はカスタマイズ可能です。（スイッチは、button要素です）

# 上記の〜Styleは、サイドバー折り畳みスイッチのボタンスタイルに合わせています。

# 【お知らせ】以前のサイドバー折り畳み２を実装された方で、スタイルを変更せずに使っている方へ：
「とりあえずサイドバー折り畳み２」の記事中にあるswitchStyleのところに誤記がありました。(width=1.4em;height=1.4em;となっていました(^^;）。Opera 7.23 でボタンが小さく表示されてしまっていた原因がこの誤記でした。どうもすみません_(._.)_。

# なお、color:transparent; を追加すると背景色と同じになります。また、 border:none; を追加するとボタンに見えなくなってさらに目立たなくすることができたりしますが、推奨はしません。

# Opera 7.23 では、開閉ボタンの斜め上あたりに別のボタンみたいなのが出て妙なことになってますね……。何なんでしょう？ うーむ(^^;

# 記事別ページ（固定リンク先ぺーじ）で見出し一覧にすると、トラックバック以下も見出しだけになるのですが、これ以降の見出しには開閉ボタンが付いていません。付いていた方が便利だよなーと思っているので、そのうちそうしたいなと思っています。

----

* 記事のフッターの下にスペーサーを追加する機能

私が今使っている「Typepad風テンプレート」では、「小見出し一覧表示」オプション機能をオンにして「見出し一覧」モードにした場合、小見出しと次の記事タイトル（または日付）がくっつきすぎて見栄えがよくありませんでした。そこで、その間隔を調整できるようにしたのがこの機能です。（∴見出し一覧に必須な機能ではありません）

この機能をオンにすると、記事のフッター(.content p.posted）の下に、スペーサーとしてdiv要素がひとつ追加されます。
（上記の機能をオンにする方法を参照）

addSpacerAfterEntryFooter = true;
spacerHeight = "10px";

# h2やh3のCSSを調整すればいいような気もしましたが。

----

# （参考）これまでに作った「見出し一覧」スクリプト：
facet-divers: 本文の見出しを抽出するスクリプト
facet-divers: 見出し一覧をポップアップ
どれが一番よかったんでしょうね