テンプレカスタマイズ［実践編*１］
□ナビゲーションの折り畳み
JUGEMカスタマイズ講座 ナビゲーションの折り畳み
1)独自タグにidを追加する。
＊リストタイトルのid属性は「〜name」、
リスト本体のid属性は「〜list」
2)スクリプトの設置。
htmlテンプレートの</body>の直前に挿入
3)初期表示設定。
FoldNavigation('リスト名','初期表示',アイテム数表示);
リスト名：それぞれのリストを指定する部分。
初期表示：デフォルトの表示状態。off→閉じた状態 on→開いた状態
アイテム数表示：リストタイトルの横にアイテム数を表示するかどうか。
true→表示 false→非表示
JUGEMカスタマイズ講座 ナビゲーションの折り畳み
1)独自タグにidを追加する。
＊リストタイトルのid属性は「〜name」、
リスト本体のid属性は「〜list」
2)スクリプトの設置。
htmlテンプレートの</body>の直前に挿入
3)初期表示設定。
FoldNavigation('リスト名','初期表示',アイテム数表示);
リスト名：それぞれのリストを指定する部分。
初期表示：デフォルトの表示状態。off→閉じた状態 on→開いた状態
アイテム数表示：リストタイトルの横にアイテム数を表示するかどうか。
true→表示 false→非表示
開閉マークを画像にするには…
1)画像のURLを書く
var openMark = '▽'; /* 閉じている場合に開くためのマーク */
var closeMark = '△'; /* 開いている場合に閉じるためのマーク */
を
var openMark = '<img src="画像のURL" width="画像のサイズ" height="画像のサイズ" border="0" alt="OPEN" />'; /* 閉じている場合に開くためのマーク */
var closeMark = '<img src="画像のURL" width="画像のサイズ" height="画像のサイズ" border="0" alt="CLOSE" />'; /* 開いている場合に閉じるためのマーク */
に。
2)スクリプトの書き換え
スクリプト下から10行目付近にある
if (objMarks[i].className == 'foldmark') {
objMarks[i].firstChild.nodeValue = (dispMode == 'none') ? closeMark : openMark;
}
を
if (objMarks[i].className == 'foldmark') {
objMarks[i].innerHTML = (dispMode == 'none') ? closeMark : openMark;
}
に書き換える。
＊firstChild.nodeValueまでをinnerHTMLに書き換えること！
