カテゴリーのツリー化。

| | コメント(2)

サイドバーのカテゴリー…サブカテゴリーを使ってるとリスト表示では見難いなぁ~と思ってたの(>_<)
リストマークを変更したりもしたけど、やっぱり見難いなぁ~って(-_-;)
小粋空間さまでカテゴリーをツリー化する方法が紹介されてて、それ見た時、これなら見易いかも!!って思った
なので早速サイドメニューのツリー化スクリプト(改)を参考にやってみたー(*^_^*)
以下、覚書。




1.まずは小粋空間さまで maketree.js をDLしてきて、サーバーにアップロード! (ブログのある場所でOKだと思いますー。)

2.うちはサブカテゴリーを利用してるのでMTタグの修正はなく、以下の赤部分を追加するだけでOKでした

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


<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryDescription$></a> [<$MTCategoryCount$>]
<MTElse>
<li><$MTCategoryDescription$>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>


<script type="text/javascript" language="javascript">
<!--
generateSubcategoryTree();
//-->
</script>


*注*<div id="categories">のid名を変更してる場合は、maketree.jsの記述も変更しなければいけないみたいです!


3.各テンプレートの<head>~</head>間に下記を追加。

<script language="JavaScript" type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="utf-8"></script>


4.小粋空間さまから画像をDLしてきて、サーバーにアップロードする。


5.スタイルシートに下記を追加。(.sideの下あたりに。)

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(http://***/**/img/tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(http://***/**/img/tree_end.gif);
    list-style: none;
}

*注*画像名は保存した名前で書くコト。あとうちは画像をimgディレクトリ内に入れたのでurlは画像の置いてるURLを書きました。


6.あとは再構築して、終了!!


・・・多分、これで出来るはずなんだけど・・・どういうわけかうまく表示されない(T_T)
月別と日別アーカイブはちゃんと表示されてるんだけど、メインと個別アーカイブはなぜかカコログがツリー化されてるの(/_;)
カテゴリーアーカイブにいたっては全くツリー化されておらず(>_<)
何がダメなんだろー???ちょっと検討しなければ。。。


[追記:2005/02/13 01:39]
無事、解決した~ヾ(≧∇≦*) 詳しくはコチラ


コメント(2)

>yujiroさん
こんばんは★
コメントしてくださって、どうもありがとうございます(*^_^*)
以前のリスト表示に比べて、本当にツリー表示は見やすくて感動的です♪
これは自画自賛しちゃって、構わないですよ~ヾ(≧∇≦*)
こんな素敵なスクリプトを作ってくださって、本当にありがとうございます!!!

こんにちは。
こちらにもコメントさせて頂きました。
ということで、ご利用ありがとうございます!

ツリーは見やすくていいですよね~(自画自賛)。

コメントする

2010年3月

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

コメント

ブログペット


海くんをクリックすると何か喋ってくれるかもー★

背景:〔NEOといっしょ〕さま

カコログ

 
Powered by Movable Type 4.1