カテゴリーとブックマークのプラグインを、Lc-Factory＠忍者ブログさんの記事を参考にツリー化しました。

Lc-Factoryさんの忍者ブログ版ではカテゴリー、リンク、コメント、トラックバックのツリー化プラグインを配布されています。
FC2版とseesaa版でもツリー用ソースを配布されていらっしゃって、本ブログのFC2版はかなりプラグインが充実しています。

Lc-Factoryさんの各ブログリンクはこちら

『Lc-Factory＠忍者ブログ』
「Lc.ツリーカテゴリー(for shinobi)を配布です。」
「Lc.ツリーリンク(for shinobi)を配布です。」
「Lc.ツリーコメント(for 忍者)を配布です。」

『Lc-Factory/雑記』
『Lc-Factory＠FC2ブログ』
『Lc-Factory＠Seesaa』

雑記とFC2版には使い方も書かれています。

＜特徴＞
こちらの特徴は、書き込む場所がほぼプラグインhtmlで済むということだと思います。細かい調節はスタイルシートに書き込む必要がありますが（行間とか）、純粋なツリー化だけだったらプラグインのみでOK。

記事ではフリープラグインに書き込むように紹介されていますが、カテゴリーやリンクのプラグインに書き込んでも働きました。
私は容量の問題（忍者ブログは各プラグインには10KBの容量が定められています）で、カテゴリーやリンクの方に書き込んで使用しています。（以下の使い方の記述も全てそちらに準じています）



＜使い方＞
＊前置き＊
書き込んでいる箇所がフリープラグインではないことをご了承ください。（ツリーカテゴリーならカテゴリープラグインに、ツリーリンクならリンクプラグインに書き込んでいます）

基本の使い方

例：以下のような↓見た目のツリーカテゴリーを作りたい場合

【生物】
├動物
│├柴KEN
│└ピヨ
└植物

1）カテゴリー「表示設定」の「プラグインHTMLの変更」に、ツリープラグインのソースを上書きする
2）「カテゴリーの編集ページ」で、カテゴリー名を以下のように記述する
「【生物】　動物　柴KEN」
「【生物】　動物　ピヨ」
「【生物】　植物」

ツリー化自体はこれだけで完了です。

（初期設定では、ツリー化するための記号が全角スペースになっていますのでこういう形になりますが、例えば記号を「＊」に変える場合は「【生物】＊動物＊柴KEN」とすればOKです）

補足：「表示設定」「その他」の説明

Lc-Factoryさんのツリー化プラグインは、「// ■表示設定です。」～「// ■その他」の、「=」と「;」の間をいじればほぼ整います。
とりあえず試してみれば大体分かると思います。

・true/falseの箇所は、試して好きなほうを選ぶ。
・true/false以外の部分の「=」と「;」にはさまれている部分は、記号の指定。好きな記号に変えてみる。（半角/全角スペースも使用可、アイコンも使用可能。アイコンはimgタグで指定する）
・「'_blank';」はリンクを開くときに、今の画面ではなく新たにタブを開くという意味。
・はじめからオープンにしておきたくないグループは、グループ名の頭に「.」をつければそこだけクローズ状態になる。（「.管理用　管理画面トップ」というような感じ）

Lc.factoryさんのFC2ブログの方のこちらの記事で基本の使い方の説明をされています。
・プラグイン「Lc.ツリーカテゴリー」
・プラグイン「Lc.ツリーリンク」
・プラグイン「Lc.ツリーコメント」
忍者版とはやや違う点もありますが、使い方はほぼ一緒です。忍者版にはない機能もあるので働かない場合も。

Lc.factoryさんは設置のサポートはされていませんが、詳しい使い方は
・Lc-Factory/雑記
・Lc-Factory＠FC2ブログ
こちらにほとんど載っています。ブログ内検索などで該当記事を探してみてください。

スタイルシート設定の記事はこちらを参照
・ Lc.ツリーカテゴリーの、CSS設定について（その１）



＜使い方色々＞
＊前置き＊
書き込んでいる箇所がフリープラグインではないことをご了承ください。
同じことをやろうとしている方の参考になればいいなと思っています。


　IEで見たときに親の部分がずれる不具合

左寄せに設定しているはずが、IE（ver.7～9で確認)で見たときのみ、右の画像のように親の部分が右にずれて表示される不具合が生じる場合があります。（IE以外のブラウザでは異常なし）

これは、ブログ内検索のボックスに指定しているclass（box）と、LCツリーの親の先頭についているツリーの開け閉めをする用の□に指定しているclass（カテゴリーツリーならLC_CAT .box）がIEでのみ競合してしまっているためのようです。
ブログ内検索のボックスのwidthを指定した場合に不具合が生じます。

対策

まず、ブログ内検索のボックスのclassを書き換えます。
「プラグインの設定」＞ブログ内検索「表示設定」＞「プラグインHTMLの変更」の

<input type="text" name="search" value="" class="box">

の部分を

<input type="text" name="search" value="" class="searchbox">

に変更。


次に、「テンプレートの設定」＞「CSS編集」の、検索ボックス用デザイン（.boxの記述です）の部分を探して

.box{
margin:3px 5px px px ;
padding:0 0 1px 0;/*box size*/
font-size: 13px;
width: 170px;
float:left;
}

.boxのセレクタを

.searchbox{
margin:3px 5px px px ;
padding:0 0 1px 0;/*box size*/
font-size: 13px;
width: 170px;
float:left;
}

上で指定したclass値に書き換えます。

IE以外のブラウザでは見た目に変化はありません。
また、{}の数値は私のテンプレートのものなので、変える必要はありません。


　リンクのプラグインにバナーを貼る
リンクサイトにバナー画像を貼れるのが忍者ブログの特色のひとつなのですが（リンクの編集から設定が行えます）、ただバナーを設定するだけだと、サイト名のすぐ隣にバナーが貼られるために縦が揃わない＆行間が空きすぎて見栄えが悪くなります。

そこで、画像の位置を揃えたいという場合、左寄せするとツリー化できなくなるので（左に親がくる関係上）、右に置くことになります。

バナーを右寄せし、バナーサイズを縮小表示する

Lc.ツリーリンクのソースのこの部分（ページ内検索で見つけてね）に

<script language="JavaScript">
<!--
{
lc_lnk_registLink("<!--$plugin_link_title--><!--if_link_img--><img src='<!--$plugin_link_img_link-->' border='0'><!--/if_link_img-->", "<!--$plugin_link_link-->", lc_lnk_pureCount++);
}
//-->

以下の赤字の部分を書き加える

<script language="JavaScript">
<!--
{
lc_lnk_registLink("<!--$plugin_link_title--><!--if_link_img--><img src='<!--$plugin_link_img_link-->' style='float:right; position:relative;' height='19px' ><!--/if_link_img-->", "<!--$plugin_link_link-->", lc_lnk_pureCount++);
}
//-->
</script>

と、画像が右寄せ＆縮小表示されます。（行間が空くのが気にならなければheightの部分は削除します。数値はお好みで適宜変えてください）
（11/20追記）「ブログ環境設定」＞「ブログ表示の設定」＞「リンク画像設定」で最大幅を設定したほうが数値が変えやすいかも（追記ここまで）


この時点では右寄せされた画像が揃ってないかと思われます。
そこで、「テンプレートの設定」＞「CSS編集」に、以下を書き込みます

/* ツリー化プラグイン　行間設定*/
#LC_LNK {
font-size: 13px;
line-height: 1.6%;
}

数値はテンプレートに合わせて適当に変更してください。

＜感想＞
設置が簡単ですし、かなりオススメ。一つのプラグインの容量が限られている点だけ注意が必要です。

一回設置してしまうと、追加で加えたリンクやカテゴリーの位置を入れ替えなくてもいいというのが非常に便利です。
（たとえば、　「プーぺガール　ブログ」のツリーに「つれづれプーぺ」を加える場合、「プーペガール　ブログ　つれづれプーぺ」とタイトルを書いて一番最後に加えるだけで、該当ツリー部分の最後尾に移動しているように見えます。（ただしJavaScriptをONにしている場合のみ）
JavaScriptを切っている場合は元の並び順のままですし、表示自体も滅茶苦茶になってしまうことがありますが、（カテゴリーの方は特に異常ありませんが、ブックマークの方はなんだかすごいことに・・・）JavaScript切っている方は5%くらいだという情報をどこかで見たのでまぁいいかなと勝手に判断させていただいています。




追記は10月頭現在の当ブログのツリーカテゴリーとツリーリンクのCSS。
参考になれば幸いです。
ツリーのソースはLc-Factoryさんの所からコピーしてくださいね。

＜個人用CSS＞

/* ツリーカテゴリ設定*/
#LC_CAT {/* ツリーカテゴリ全体の設定*/
font-size: 13px;
line-height: 1.1;
}
#LC_CAT .indent {/* ツリーカテゴリ「│」の設定*/
font-size:12pt;
}
#LC_CAT .branch {/* ツリーカテゴリ「├」「└」の設定*/
font-size:12pt;
margin:0px 8px 0 15px;
}
#LC_CAT .parent {/* ツリーカテゴリ親の設定*/
line-height: 1.4;/* 親の行間設定*/
vertical-align: -15pt;/* 親の上部に余白*/
}


/* ツリーリンク設定*/
#LC_LNK {/* ツリーリンク全体の設定*/
font-size: 12px;
line-height: 1;
}
#LC_LNK .indent {/* ツリーリンク「│」の設定*/
font-size:12pt;
}
#LC_LNK .branch {/* ツリーリンク「├」「└」の設定*/
font-size:12pt;
margin:0px 3px 0 2px;
}
#LC_LNK .parent {/* ツリーリンク親の行間設定*/
line-height: 1.65;
vertical-align: 25%;/* 文字縦位置調整*/
}
#LC_LNK .child {/* Lc.ツリーリンク 子設定（階層指定） */
font-size: 12px;
line-height: 1.8;
}

＜個人用カテゴリープラグインhtml＞（設定部分のみ）

/ ■表示設定(true/false)
var LC_CAT_PARENTBOLD = true; //親太字
var LC_CAT_DISPLAYNUM = true; //記事数表示
var LC_CAT_DECOLESS_PARENT = true; //親下線消
var LC_CAT_DECOLESS_CHILD = false; //子下線消
var LC_CAT_DYNAMIC_SIZE = false; //記事数で文字サイズ
var LC_CAT_PARENTBOX = false; //親の＋をボックス表示

// ■その他
var LC_CAT_INDENTCHR = '｜';
var LC_CAT_INDENTCHR_GROUP = '├';
var LC_CAT_TOOPEN = 'ツリーを開く';
var LC_CAT_TOCLOSE = 'ツリーを閉じる';
var LC_CAT_BOX_CLOSED = '';
var LC_CAT_BOX_OPENED = '';
var LC_CAT_BRANCH_CONNECT = '<img src="画像URL" width="11px" alt="アイコン" />';
var LC_CAT_BRANCH_EDGE= '<img src="画像URL" width="11px" alt="アイコン" />';
var LC_CAT_DEFAULT_OPENED = true;
var LC_CAT_GROUP_SEPARATOR = '　';
var LC_CAT_CATEGORY_MARK = "";　//子の先頭文字

var LC_CAT_CREATOR_LINK = false;
var LC_CAT_IMAGEBASE = "http://file.<!--$g_user_id-->/";

＜個人用リンクプラグインhtml＞（設定部分のみ）

// ■表示設定です。true/false
var LC_LNK_PARENTBOLD = true; //親項目太字
var LC_LNK_DECOLESS_PARENT = true; //親の下線消し
var LC_LNK_DECOLESS_CHILD = false; //子の下線消し
var LC_LNK_PARENTBOX = false; //親の＋などをボックス表示

// ■その他
var LC_LNK_INDENTCHR = '　';
var LC_LNK_INDENTCHR_GROUP = ' 　<img src="画像URL" width="19px" alt="アイコン" /> ';
var LC_LNK_TOOPEN = 'ツリーを開く';
var LC_LNK_TOCLOSE = 'ツリーを閉じる';
var LC_LNK_BOX_CLOSED = '';
var LC_LNK_BOX_OPENED = '';
var LC_LNK_BRANCH_CONNECT = ' <img src="画像URL" width="9px" alt="アイコン" />';
var LC_LNK_BRANCH_EDGE= ' <img src="画像URL" width="9px" alt="アイコン" />';
var LC_LNK_DEFAULT_OPENED = true;
var LC_LNK_GROUP_SEPARATOR = "　";
var LC_LNK_LINK_MARK = " ";

var LC_LNK_LINK_TARGET = '_blank';
var LC_LNK_CREATOR_LINK = false;

IE8～9、OSⅩのfirefoxとsafariで動作確認済。


画像が一列に並ばないという場合は、行間（line-height）を広げるか、画像の大きさを小さく表示するように設定してください。

BRANCHの部分を、初期設定の「├」「└」のまま、罫線の隙間を埋める場合は、
１）CSSの#LC_CAT （リンクだったらLNK）のfont-sizeとline-heightで全体のフォントサイズと行間設定をし、
２）#LC_CAT .indent （ツリーカテゴリ「│」の設定：空欄にしている場合は不要）と、#LC_CAT .branch （ツリーカテゴリ「├」「└」の設定）のfont-sizeを大きく設定してください。
ただMacで見たときに、「├」と「└」がずれて表示されてしまうようです。