サイドメニューのツリー化に挑戦。
今回も小粋空間さんでお世話になりました。
配布されているスクリプト maketree.js とツリー用の画像(ドットライン)をDL
テンプレート及びスタイルシートの必要箇所に追記。
コメントとトラックバックのところにドットラインで無事ツリー化成功です。
・小粋空間 さん : サイドメニューのツリー化スクリプト（改）
覚書きとして。
...
■ツリー化
スクリプトを使用するテンプレートの＜head＞～＜/head＞の間にを挿入。
＜script type="text/javascript" src="＜$MTBlogURL$＞
maketree.js" charset="utf-8"＞＜/script＞
【コメント例】 青、オレンジ、緑 の部分
…
RECENT COMMENTS
＜/div＞
＜div class="sidescl" id="commentlist"＞
＜MTEntries recently_commented_on="10"＞
＜ul＞
＜font color="#e1d7c6"＞■＜/font＞＜a href="＜
$MTEntryLink$＞"＞＜MTEntryTitle trimj_to="22"＞＜/a＞
＜MTComments lastn="15"＞
＜li＞＜a href="＜$MTEntryLink$>#<$MTCommentID$＞"＞
＜MTCommentAuthor＞＜/a＞
＜$MTCommentDate format="%m/%d"$＞
＜br /＞＜/li＞
＜/MTComments＞
＜/ul＞
＜br /＞
＜/MTEntries＞
＜/div＞
＜!--折--＞
＜script type="text/javascript"＞
：
＜/script＞
＜!--tree--＞
＜script type="text/javascript" language="javascript"＞
＜!--
generateNormalTree("commentlist");
//--＞
＜/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(img/tree_lst_dotted.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(img/tree_end_dotted.gif);
list-style: none;
}
赤のgifはツリー用の画像です。
適宜ファイルにアップロードして(名前を変更したのでCSSも同じに)使用。
...Close
