彼此ともつかぬ場所

　インデックス画面に「Contents」として並んでいるカテゴリの一覧を、親子カテゴリの折りたたみを有効にしたまま、まるっと「カテゴリ」という項目に折りたたんでしまいたい、というコメントをいただきました。
　
　私が別ブログで使用している、春木屋さんの折りたたみスクリプト「なんでもたたむよ」が、たまたまそのまま使えるようだったので、春木屋さんの上記記事のコメントに、再配布自由と記されてあることに甘えて、以下に改造方法を記したいと思います。
　
　
16行目 <!--index_area--> のすぐ下に
<script type="text/javascript"> //折りたたみスクリプト「なんでもたたむよ」 by 春木屋 http://sug.blog2.fc2.com/ function setToggleFunc() { var elm; if ( document.getElementsByTagName ) { for ( var i=1;elm=(document.getElementsByTagName( "*" )[i]);i++ ) { if ( !elm.className ) continue; if ( elm.parentNode.firstChild == elm ) { elm.className.replace( /\bjs_[open|close]\b/, '' ); continue; } if ( !elm.className.match(/js_[open|close]/) ) continue; var objTrigger = elm.previousSibling; while( !objTrigger || objTrigger.nodeType != 1 ) { objTrigger = objTrigger.previousSibling; } if ( !objTrigger ) continue; objTrigger.style.cursor = 'pointer'; objTrigger.className += ' js_mouse_out'; objTrigger.title += ( elm.className.match(/js_close/) ) ? ' ( click to open )' : ' ( click to close )'; objTrigger.onclick = function () { var objTarget = this.nextSibling; while ( objTarget.nodeType != 1 ) { objTarget = objTarget.nextSibling; } objTarget.flag = objTarget.className.match(/js_close/); if ( objTarget.flag ) { objTarget.className = objTarget.className.replace( /\bjs_close\b/, 'js_open' ); this.title = this.title.replace( /click to open/, 'click to close' ); } else { objTarget.className = objTarget.className.replace( /\bjs_open\b/, 'js_close' ); this.title = this.title.replace( /click to close/, 'click to open' ); } } objTrigger.onmouseover = function () { this.className = this.className.replace( /\bjs_mouse_out\b/, 'js_mouse_on' ); } objTrigger.onmouseout = function () { this.className = this.className.replace( /\bjs_mouse_on\b/, 'js_mouse_out' ); } } } } var _OK = false; if ( navigator.appVersion.match( /MSIE (\d+\.\d+)/i ) ) { if ( ( RegExp.$1+0 ) >= 5.5 ) _OK = true; } else _OK = true function window_onload( f ) { if ( _OK ) { if ( window.addEventListener ) { window.addEventListener( "load", f, false ); } else if ( window.attachEvent ) { window.attachEvent( "onload", f ); } } } window_onload( setToggleFunc ); with ( document ) { if ( _OK && getElementsByTagName ) { var s = "<style type='text\/css'> .js_open { display: block} .js_close { display: none; } .js_mouse_on { color:#005243; font-weight:bold; line-height:100%; background-color:#efffe5; padding:4px 1em 2px 1em; margin:5px 0px 0px 0px; } .js_mouse_out { color:#000; font-weight:bold; line-height:100%; background-color:#869975; padding:4px 1em 2px 1em; margin:5px 0px 0px 0px; }<\/style>"; write(s); } } </script> を追加してください。
　
それから、<!-- ▼ メニュー --> の８行下、
<!-- JavaScriptオンの時に表示されるカテゴリ一覧 -->
のすぐ上に、

<div>カテゴリ</div>
<div class="js_close">

を、
<!-- JavaScriptオフの時に表示されるカテゴリ一覧 -->
のすぐ上に、

</div>

を追加すればＯＫです。
　
　
　※ このスクリプトにおける開閉スイッチ（この改造の場合は「カテゴリ」）の表示スタイルには、テンプレートのスタイルシートの内容は反映されません。
　スクリプトの終わりのほう、

var s = "<style type='text\/css'>

　の続きにある

.js_mouse_on { color:#005243; font-weight:bold; line-height:100%; background-color:#efffe5; padding:4px 1em 2px 1em; margin:5px 0px 0px 0px; }

が、マウスカーソルを乗せた時のスタイル、

.js_mouse_out { color:#000; font-weight:bold; line-height:100%; background-color:#869975; padding:4px 1em 2px 1em; margin:5px 0px 0px 0px; }

が、マウスカーソルが離れた時のスタイルとなっています。
　文字色や背景色を変更したい場合は、スクリプトのこの部分を直接書き直してください。

---