memo 【最近の記事＋コメント】

2008-05-08 (Thu) 02:17 | EDIT

【最近の記事＋コメント】にアイコンを付けてキレイなツリー画像を使う！！

ブログ開設当初、アイコン付きツリー化カテゴリーというプラグインを使用してました。（今は使ってません。）
大カテゴリにアイコンが付けられるのが魅力で、お気に入りだったのですが、作者様はカテゴリしか作っていなかったようです。（実は、danielさんのツリーカテゴリが元になっていたのは・・・今日知ったのですが・・・(*´-ω-)σｫｨｫｨ…）

【FCafe】danielさん作の他のツリー化プラグインを使うようになり、バランスに納得がいかなくなりました。
今になって思えば、marginやpaddingの指定でいくらでも納得の行く形に出来たと思うのですが、その時は、作者さんが違うんだから仕方ない！！などと思っていたのです。
そして、danielさん作のツリー化シリーズで揃えた訳です。

少したって、最近の記事＋コメントというプラグインを見つけ、これはいい！！とDLしました。
作者様は、【30歳目前。肉体改造計画。】のらぐさん。
こちらのページでも詳しく解説して下さっています。

あきの場合、ブログの機能よりもまず見た目！！なので、自己満足の世界なのですが、まずツリーマーク（├ ← これや、└ ← これ）を画像に変える事にしました。
らぐさんのブログでも紹介されている、【小粋空間】yujiroさんの記事を参考にカスタマイズ完了！！

のはずが、ここでリストマークをアイコンに変えて記事リストの頭に付けたくなったのです！！
そう、アイコン付きカテゴリと同じ形にしたくなったのですよ！！！

Treeシリーズにアイコンを付ける

ツリーシリーズ続き。

カスタマイズへ！！

「最近の記事＋コメント」プラグインをきれいなツリーにするカスタマイズ 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>';