【最近の記事＋コメント】にアイコンを付けてキレイなツリー画像を使う！！
ブログ開設当初、
アイコン付きツリー化カテゴリーというプラグインを使用してました。（今は使ってません。）
大カテゴリにアイコンが付けられるのが魅力で、お気に入りだったのですが、
作者様はカテゴリしか作っていなかったようです。（実は、danielさんのツリーカテゴリが元になっていたのは・・・今日知ったのですが・・・(*´-ω-)σｫｨｫｨ…）
【
FCafe】danielさん作の他の
ツリー化プラグインを使うようになり、バランスに納得がいかなくなりました。
今になって思えば、marginやpaddingの指定でいくらでも納得の行く形に出来たと思うのですが、その時は、作者さんが違うんだから仕方ない！！などと思っていたのです。
そして、danielさん作の
ツリー化シリーズで揃えた訳です。
少したって、
最近の記事＋コメントというプラグインを見つけ、これはいい！！とDLしました。
作者様は、【
30歳目前。肉体改造計画。】のらぐさん。
こちらのページでも詳しく解説して下さっています。
あきの場合、ブログの機能よりもまず見た目！！なので、自己満足の世界なのですが、まずツリーマーク（├ ← これや、└ ← これ）を画像に変える事にしました。
らぐさんのブログでも紹介されている、【
小粋空間】yujiroさんの記事を参考にカスタマイズ完了！！
のはずが、ここでリストマークをアイコンに変えて記事リストの頭に付けたくなったのです！！
そう、アイコン付きカテゴリと同じ形にしたくなったのですよ！！！
カスタマイズへ！！
「最近の記事＋コメント」プラグインをきれいなツリーにする カスタマイズ by 【
小粋空間】
作業メモ
�．好�リプト内の変更。
var FMT_HEAD = '<UL>';
var FMT_PARENT_HEAD = ' <LI style="text-align:left">';
var FMT_PARENT_BODY = ' %ENTRY% %EXTRA%';
var FMT_COMM_HEAD = '';
var FMT_COMM_BODY = ' <BR />├ %COMMENT%';
var FMT_COMM_TAIL = '';
var FMT_PARENT_TAIL = ' </LI>';
var FMT_TAIL = '</UL>';
var FMT_PARENT_BODYL = FMT_PARENT_BODY;
var FMT_COMM_BODYL = ' <BR />└ %COMMENT%';
↓
var FMT_HEAD = '<UL>';
var FMT_PARENT_HEAD = ' <LI style="text-align:left">';
var FMT_PARENT_BODY = ' %ENTRY% %EXTRA%';
var FMT_COMM_HEAD = '<UL>';
var FMT_COMM_BODY = ' <LI class="tree"> %COMMENT%</LI>';
var FMT_COMM_TAIL = '</UL>';
var FMT_PARENT_TAIL = ' </LI>';
var FMT_TAIL = '</UL>';
var FMT_PARENT_BODYL = FMT_PARENT_BODY;
var FMT_COMM_BODYL = ' <LI class="tree_end"> %COMMENT%</LI>';
��CSSに以下を追加。
.tree {
margin-left: 3px;
padding: 0 0 0 15px;
background: url(├←このマークの変わりに使う画像URL) no-repeat 2px 0;
list-style: none;}
.tree_end {
margin-left: 3px;
padding: 0 0 0 15px;
background: url(└←このマークの変わりに使う画像URL) no-repeat 2px 0;
list-style: none;}
更にカスタマイズ！！記事の頭にアイコンを付ける。 by KAZU
作業メモ
�．好�リプト内（FMT_HEAD、FMT_PARENT_HEAD、FMT_COMM_HEAD、FMT_PARENT_TAIL）の変更。
var FMT_HEAD = '<UL>';
var FMT_PARENT_HEAD = ' <LI style="text-align:left">';
var FMT_PARENT_BODY = ' %ENTRY% %EXTRA%';
var FMT_COMM_HEAD = '<UL>';
var FMT_COMM_BODY = ' <LI class="tree"> %COMMENT%</LI>';
var FMT_COMM_TAIL = '</UL>';
var FMT_PARENT_TAIL = ' </LI>';
↓
var FMT_HEAD = '<UL class="ul1">';
var FMT_PARENT_HEAD = ' <p style="text-align:left"><img src="アイコン画像URL">';
var FMT_PARENT_BODY = ' %ENTRY% %EXTRA%';
var FMT_COMM_HEAD = '<UL class="ul1">';
var FMT_COMM_BODY = ' <LI class="tree"> %COMMENT%</LI>';
var FMT_COMM_TAIL = '</UL>';
var FMT_PARENT_TAIL = ' </p>';
��CSSのリストの設定部分に以下を追加する。
.ul1 { margin:2px 0 5px 0;
padding:0;
list-style-image: url(); }
エントリーナビ 
関連記事
