カテゴリのツリー化の仕方がわかりません。

カテゴリのツリー化をしたいのですが、やり方がわかりません。こちらの を見せてもらったけれど、初心者のためよく分かりません。どうしてもやりたいので、教えてください。

Java Scriptだと難しいかもしれないので
こっちの方が簡単だと思います。

⇒

カテゴリで使ってる「└」とか「├」とかは「けいせん」と打って変換したら色々出てきますよ＾＾

まず、ツリー化したいカテゴリを３つほど追加しておきます。

カテゴリ名は以下のように設定します。

大カテゴリ名：小カテゴリ名

例：
ニュース：コンピューター
ニュース：芸能
ニュース：ブログ
ニュース：一般

ツリー化のカスタマイズに成功すれば以下のように表示されるようになります。

ニュース
　┣コンピューター
　┣芸能
　┣ブログ
　┗一般


次は、ツリー化表示におけるスタイルの設定です。
スタイルシートを開いて、以下をコピペします。

.key_area {
	padding:0 0 0 10px;
	text-align:left;
}
.key {}
.leaf_area {
	margin:3px 3px 3px 3px;
	text-align:left;
}
.leaf {
	padding:2px 2px 2px 18px;
	margin:0;
	background: url(http://image.blog.livedoor.jp/takoashi/tbm.gif) no-repeat; 
}
.leaf_last {
	padding:2px 2px 2px 18px;
	margin:0;
	background: url(http://image.blog.livedoor.jp/takoashi/tbe.gif) no-repeat; 
}

スタイルシートを保存・再構築します。


次は、ツリー化のためのJavaScriptの設置です。
プラグインの新規追加＞上級者向けプラグイン＞フリーエリアに以下をコピペします。

<script type="text/javascript" src="http://blog.livedoor.jp/takoashi/js/ConvertTree.js"></script>
<script type="text/javascript" src="http://blog.livedoor.jp/takoashi/js/CreateCommentsTree.js"></script>
<script type="text/javascript" src="http://blog.livedoor.jp/takoashi/js/CreateTrackBacksTree.js"></script>
<script type="text/javascript" src="http://blog.livedoor.jp/takoashi/js/CreateCategoryTree.js"></script>

<script type="text/javascript">
<!--
var cate_div = GetPluginByTitle("Categories");

var cate_tree = CreateTreeDataFromCategories(cate_div,"：");

var cate_td = new TreeDataObj(); // おまじない

ConvertTree(cate_tree,cate_div,cate_td);
// -->
</script>

※改行設定は「改行を<br/>タグに変換」ではなく「変換しない」にチェックを入れておいてください。
※このプラグインは、プラグインＢの一番最後（Blog内検索の次）に設置してください。

サイドバー（プラグイン）を再構築して完了です。


mannendoco_life