折り畳みで小見出し一覧

折り畳みで「続きを読む...」スクリプトのオプション機能のひとつ「小見出し一覧表示機能」のついての記事です。

----

* この機能をオンにすると……

この機能をオンにすると、折り畳まれた時、小見出し(h4〜h6）だけは非表示にならずに残り、結果として小見出しが一覧できるようになります。

# この記事を記事別ページでご覧の場合、記事タイトル横にある折り畳みボタン[-]で一度折り畳んでみてください。

** だだし……

# ただし、『テキストフォーマットの初期設定』を『改行を反映させる』にして記事を作成している場合、本文記事内で小見出し(h4-h6タグ）を使っても、自動的にpタグで囲まれてしまうため、このスクリプトでは小見出しとして認識することができません。この場合、もうひとつのオプション機能、「特定キーワードで始まる段落を対応するタグに変換する機能」を御利用ください。
→ facet-divers: 折り畳み前にキーワード→タグ変換

* この機能をオンにする方法

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

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

showHeadingsWhenFolded = true;

* スタイルの調整方法

見出しは上下のマージンを大きくとってあることが多いので、そのままのスタイルで小見出しを並べてしまうと、間延びした感じになってしまうと思います。それをスクリプト本体だけで解消するようにはできませんでしたが、独自スタイルシートと組み合わせれば調整できるよう、折り畳まれた状態のときだけ小見出し(h4〜h6）に"folded"というclassが付くようにしておきました。

∴小見出し一覧時の小見出しのスタイルを調整するには、スタイルシートに

.folded {
	margin: 0px;
}
h4.folded {
	padding-left: 0px;
}
h5.folded {
	padding-left: 10px;
}
h6.folded {
	padding-left: 20px;
}

という感じでスタイル規則を追加してください。

# 独自のスタイルシートを使う方法自体については、フルカワさんの「詩織」やtsupoさんの「観測気球」などでいろいろと紹介されていますので、そちらをご参照ください。
→ 詞織
→ 観測気球

# このブログは、長らく独自スタイルシートを使っていなかったんですが、今回のこのオプション機能のために、スタイル規則を追加できるタイプのjavascriptを適用することにしました。
→ facet-divers: javascriptでスタイル規則を追加したい

* 謝辞

# なお、この小見出し一覧機能は、上記のweblog.hikoboshi.mac: ココログ無料版でも『続きを読む』が欲しい！という記事を書かれたしののめひこぼしさんの、続編記事ともいうべきweblog.hikoboshi.mac: hide.jsと小見出し抽出にインスパイアされて付加したオプション機能です。

----

* 余談

# この機能を使っていると、小見出しの横にも開閉スイッチが欲しくなってきました(^^;。

＞＞＞追記 2004-06-22: この記事自体に小見出しがなく、記事別ページで見ているときに効果を確認しづらいので、小見出しを捏造してみました（笑）。＜＜＜