●サイドメニューツリー化(maketree.js)MT3.3
…の備忘録orz
MovableType3.3にて実装
1.小粋空間よりmaketree.jsをDL
2.1でDLした maketree.js をローカル・サイト・パス( mt.cgi がある場所 )にアスキーモードでUP
3.テンプレートに赤字のコードを追加。青字は削除箇所
サブカテゴリーをツリー化する場合<div class="sidetitle">
Categories
</div><!-- 全カテゴリー用 -->
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]
</MTCategories>
</div>
<!-- 全カテゴリー用 --><!-- サブカテゴリー用
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
サブカテゴリー用 -->↓
<div class="sidetitle">
Categories
</div><div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div><script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>
Recent Commentsをツリー化する場合<div class="sidetitle">
Recent Comments
</div><div class="side">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>
</div>↓
<div class="sidetitle">
Recent Comments
</div><div class="side" id="commentlist">
<MTEntries recently_commented_on="5">
<ul>
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br />
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br /></li>
</MTComments>
</ul>
</MTEntries>
</div><script type="text/javascript">
<!--
generateNormalTree("commentlist");
//-->
</script>
4.インクルード文挿入
ツリー化スクリプトを使う各テンプレート(メインページやカテゴリー、個別、日付アーカイブ等)<head>～</head>間に下記のコードを追加
<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="utf-8"></script>
5.画像のダウンロード
ここの5からツリーで表示する画像をDLし、( /mt-static/images/に)UPする
実線を選択する場合は tree_lst_solid.gif と tree_end_solid.gif をDL
点線を選択する場合は tree_lst_dotted.gif と tree_end_dotted.gif をDL
6.スタイルシートに下記のコードを追加
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_dotted.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(tree_end_dotted.gif);
list-style: none;
}
※画像を /mt-static/images/ にUPした場合、青字部分は
background-image: url(././mt-static/images/tree_lst_dotted.gif);
background-image: url(././mt-static/images/tree_end_dotted.gif);
となる(相対パスの場合)
≪ 続きを隠す
