「メニューリスト折り畳み機能」を追加する

メニューリストを折りたたむ機能を追加する方法を以下に説明します

全部表示するには↓をクリックして下さいm(_._)m
私の作ったテンプレートのうち
skyblue_catとorange_catにはすでに折り畳み機能が付いているので
この作業は必要ありません

↑の２つ以外のテンプレートをご利用の方で
折り畳み機能を使いたいという方のみこれから書く方法にて
折り畳み機能を追加してやってくださいm(_._)m

設定に必要なのはHTMLファイルの方だけです
CSSを書き換える必要はありません

以下、HTMLファイルの書き換え方法を記述します

■その１：javascriptを追加する
</head>タグのすぐ上に以下のjavascriptを追加して下さい
（コピペで貼り付けられます）

<script type="text/javascript">
<!--
function menuListOnClick(menuId) {
(document.getElementById(menuId).style.display == "none")? document.getElementById(menuId).style.display = "block" :document.getElementById(menuId).style.display = "none";
}
// -->
</script>
<noscript>
JavaScript対応ブラウザで表示するとよりダイナミックなページが楽しめます
</noscript>

■その２：テンプレートにデフォルトでついているメニューリストも折り畳みにしたい場合にこの作業を行ってください
とりあえずMONTHLYの部分だけお手本を書きますので
他のメニューリストはこれを見本にして変更して行って下さい
ただし！
青い文字にした部分だけは
最初をmenu1にしたらその次はmenu2という風にidにつける名前を変更していって下さい
idの名前に同じ名前があるとjavascriptが上手く動作しません
さらに青い文字は2箇所ありますが
その2箇所は同じ名前になっている事を確認してください
（例えばidの名前がmenu2だったらonclickの部分もmenu2でなければいけません）

【変更前(simple_columns)】

<h2 class="monthly-archives">MONTHLY</h2>
<ul class="monthly-archives">
<!--archive-->
<li><a href="<%archive_link>" title="「<%archive_year>年<%archive_month>月」の記事一覧"><%archive_year>-<%archive_month> : <%archive_count></a></li>
<!--/archive-->
</ul>

【変更前（orange_cat_regular、skyblue_cat_regular）】

<h2 class="monthly-archives"><a href="#" onclick="showListItems(0);" class="showListItemAnchor">MONTHLY</a></h2>
<div id="monthly-archives_list_items" style="display:block;">
<ul class="monthly-archives">
<!--archive-->
<li><a href="<%archive_link>" title="「<%archive_year>年<%archive_month>月」の記事一覧"><%archive_year>-<%archive_month> : <%archive_count></a></li>
<!--/archive-->
</ul>
</div>

orange_cat_regular、skyblue_cat_regularの場合は↑この部分を丸ごと↓ここに書いてあるものをコピって上書きしてもらっていいです
尚、他の部分も同じなので
どういう風に変わったのかを見比べていただいて
その法則にしたがって変更してもらえればいいと思います

【変更後】

<h2 class="monthly-archives"><b onclick="menuListOnClick('menu1');" onmouseover="style.cursor = 'pointer'">MONTHLY</b></h2>
<div id="menu1">
<ul class="monthly-archives">
<!--archive-->
<li><a href="<%archive_link>" title="「<%archive_year>年<%archive_month>月」の記事一覧"><%archive_year>-<%archive_month> : <%archive_count></a></li>
<!--/archive-->
</ul>
</div>

■その３：BLOGPEOPLEを追加する
APPENDIXも含めて全部↑のような変更を加えていくと
BLOGPEOPLEは8つ目のメニューリストという事になるのでここではmenu8としていますが、自分で好きな名前をつけてもらってもいいです

尚、以下の部分はSEARCHより上に挿入した方が見栄えがいいと思います
（どうしてかは実際挿入してみるとわかると思います
CSSをいじれば見栄えも変更できますけど、面倒な人はSEARCHより上に挿入してください）

また、赤い文字の部分は必ず自分のBLOGPEOPLEのスクリプトに置き換えてください！
このまま貼り付けて使用してもBLOGPEOPLEのリストは表示されませんのであしからずですm(_._)m

<h2 class="appendix"><b onclick="menuListOnClick('menu8');" onmouseover="style.cursor = 'pointer'">BLOGPEOPLE</b></h2>
<div id="menu8">
<ul>
<!-- ↓ここのscriptタグの一行を自分でBLOGPEOPLEで作成したscriptタグに置き換えてください //-->
<script language="javascript" type="text/javascript" src="http......js" charset="Shift_JIS"></script>
<!-- ↑ここのscriptタグの一行を自分でBLOGPEOPLEで作成したscriptタグに置き換えてください //-->
</ul>
</div>

また、初期表示は折りたたんでおいて
クリックすると表示されるようにするには
<div id="menu8">
の部分を
<div id="menu8" style="display:none;">
とするだけでOKですｖ

以上で変更は終わりです
お疲れ様でした！