サイドメニューの折りたたみ ～続編～
後はそれぞれのテンプレートを同じように変更すればいいかと思ったのもつかの間・・・。問題発生。
各サイドメニューにエントリー数、コメント数などを表示できるようになっているだが、コメントが実際数より多い。よくよく見たら<a>の数をカウントしているようで、一覧にはコメントがついてるエントリーへのリンクも入っているので、それもカウントしてしまっている模様。はてさて・・・。
また小粋空間さんのサイトを探すことしばし。<ul> <li>でコメント部分を表示させて、スクリプトで<li>をカウントさせればいいというところまでつかんだのだが、どうも表示がうまくいかない。
どうしたものかと更に探していると、トラックバックの中でグル研日記さんのサイドメニューの折りたたみというエントリーを発見。同じところにぶつかられたみたいで、エントリーの最後に小粋空間さんのサイドメニューのツリー化スクリプト（改）へのリンクが。
そのエントリーの解説にしたがってやってみたところ、今度こそバッチリ！おまけでサイドメニューのツリー化までやっちゃいました。
以下簡単に解説。
１.maketree.js をここからダウンロード。
２.maketree.js をローカルサイトパスにアップロード。
３.テンプレートの該当箇所を下記のように修正
<div class="sidetitle2" id="tracksname">
Recent Trackbacks
</div><div class="side" id="trackslist">
<MTPings lastn="10">
<a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$><br />
</MTPings>
</div><script type="text/javascript">
<!--
FoldNavigation('tracks','on',true);
//-->
</script>
<div class="sidetitle2" id="tracksname">
Recent Trackbacks
</div><div class="side" id="trackslist">
<ul>
<MTPings lastn="10">
<li><a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a><br/>
from <$MTPingBlogName$> <$MTPingDate format="%m/%d"$></li>
</MTPings>
</ul>
</div><script type="text/javascript" language="javascript">
<!--
generateNormalTree("trackslist");
//-->
</script>
<script type="text/javascript">
<!--
FoldNavigationByTagName('tracks','on',true,'li');
//-->
</script>
４.下記インクルード文を<head>～</head>に挿入
<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="utf-8"></script>
５.画像のダウンロード
小粋空間さんのこちらのエントリーより画像をダウンロード
(エントリーの真ん中よりちょっと下のところに画像へのリンクがあります）
６.画像をアップロード
ローカルサイトパスへアップロード。一度、他のディレクトリに入れてみたのですが、後の設定でパスを指定するところが出てくるのでローカルサイトパスが無難。
７.スタイルシートの編集
下記をスタイルシートに追加します。青い文字の部分はダウンロードしたファイル名に変更。
ul.tree {
margin: 0px!important;
padding: 0px!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0px!important;
padding: 0px!important;
}
ul.tree li {
margin: 0px!important;
padding: 0px 0px 0px 16px!important;
background-image: url(tree_lst.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(tree_end.gif);
list-style: none;
}
以上で完了。詳しくは下記の小粋空間さんとグル研日記さんのエントリーを参照下さい。
グル研日記さん：サイドメニューの折りたたみ
小粋空間さん：サイドメニューのツリー化スクリプト（改）
