テンプレ、プラグインのカスタマイズを色々試しつつ、こっそりテンプレ作成などしてみたり(謎)
09月 ≪ 2017年10月 ≫11 月
12345678910111213141516171819202122232425262728293031
つぶやきぃ~♪
チェックチェック!
クリックしてね♪
ぽちっと同盟名簿へ
meromero park



タグふれんず

BlogPet

いろいろサーチ
プロフィール

あき

etc・・・
 エントリーナビ 
スポンサーサイト 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
この記事に拍手する
スポンサー広告 * * TOP↑
【最近の記事+コメント】 
【最近の記事+コメント】にアイコンを付けてキレイなツリー画像を使う!!

ブログ開設当初、アイコン付きツリー化カテゴリーというプラグインを使用してました。(今は使ってません。)
大カテゴリにアイコンが付けられるのが魅力で、お気に入りだったのですが、作者様はカテゴリしか作っていなかったようです。(実は、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(); }

この記事に拍手する
プラグインカスタマイズ * CM(3)TB(1)TOP↑
*TITLE:
ほぉ♪
細かいところにもきをつかってますのぅ!
あきしやんのテンプレはかわいくて見やすいねー!!
参考にさせてもらいまするぅぅぅ~(*∩ω∩)
【2008-05-09 (Fri) 10:58 】 *   * ★トモ★ * - * EDIT *
*TITLE:
>トモちん

見やすい・・・
オペラで見たらすごい事になってたよ(泣)
IE限定っつうのはねぇ???(`ー´) クククッ
いいのだ。自己満足なのだ!!
【2008-05-09 (Fri) 18:55 】 *   * あき * - * EDIT *
*TITLE: 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
【2008-06-28 (Sat) 00:03 】 *   *  *  * EDIT *














 秘密にする?

http://akiringakiring.blog31.fc2.com/tb.php/57-be4ee1d8
この記事へのトラックバック
【最近の記事+コメント】にアイコンを付けてキレイなツリー画像を使う!!ブログ開設当初、アイコン付きツリー化カテゴリーというプラグイ...
2008-09-09 (Tue) 12:40 スローライフでHappy!?


登録してね♪
おこづかいゲット~!
宿・ホテル予約ならじゃらんnet セシール セシール - デジタルカタログ テニス365 オンライン書店 boople.com(ブープル) e87.com(株式会社千趣会イイハナ) ジャパネットたかた メディアミックスショッピング みんなが気になるあなたのブログ レビューブログ
最近のコメント
カテゴリ
アーカイブ
リンク
List Me! by BlogPeople
ユーザータグ
トラックバック
テンプレ一覧

* デザイン変更 *
(トップに飛ぶと 元に戻ります)


Style Changer(改)
Script by FCafe
Arrange by ウェビンブログ

カウンター

今ここに:人います!
今日の献立
Yahoo!オークション
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。