宵闇書房　Twilight bookstore

2005/07/04 Monday 20:42

リスト部分の画像をそれぞれ替える

トルキーです、こんばんは。超眠いのでこれからちょいと仮眠をとる予定…。昨日の夜（というか今日の朝？）、ベッドに潜り込んだものの暑さのせいか眠れなくてそのまま1時間orz

ええと、これはご存じの方も多いと思いますが、CSSをいじるの初めて！というsbユーザーの方向けに。他のブログも同じようにできると思いますがさっぱりさわったことないので、MTなどをお使いの方はご参考程度にどうぞ。
目標はこのテンプレートの右側部分（アイコン変えまくり）。

ちなみに現在アイコンは赤が一番人気…とても意外。水色は分かるんだけど…。
※ダウンロード数が見たい方はどうぞ（カウントしているだけのcgiなので、誰が落としたかなどは分かりません。気になる方はご安心のほど）。

1）ツリー化用のJavaScriptまたはプラグインを導入、HTMLを書き換える

まぁこれはツリー化したい部分などの合わせてお好みのものを。それぞれのやり方に従ってくださいませ。

で、このときに、必ずツリー化用のマークはこちらを適用させるようにしてください。

gTreeOption['list'] = '<li class="lst">'; /* ツリー用マーク(通常) */ gTreeOption['end'] = '<li class="lst">'; /* ツリー用マーク(末端) */ gTreeOption['leef'] = '</li>\n'; /* 各枝の末尾 */ gTreeOption['top'] = '<ul class="tree">'; /* ツリー本体の最初 */ gTreeOption['btm'] = '</ul>'; /* ツリー本体の最後 */

※ツリー用マーク(末端)の方はclass="end"のままでもいいですが（現に私はプラグインを書き換えるのが面倒なのでそうしてます）、CSSが長くなるので今回はこっちで。

2）CSSにツリー化用のスタイルを記述する

まずはCSSに以下の記述をしてください。
最近のテンプレ見てますとあまり必要ないかも知れませんが、一応…。

ul.tree{ list-style:none; margin:0px; padding:0px; }

で、例えば、コメント部分をやってみる場合。
コメント部分のHTMLはこんな感じになってます（これはboleroさまのプラグインを適用している場合のソース）。

<dl id="comment"> <dt id="commentname">recent comment</dt> <dd id="commentlist">{recent_comment_list_tree}</dd> </dl>

で、CSSには以下のように記述します。

dd#commentlist ul.tree li.lst{ margin:0px 0px 0px 10px; padding:0px 0px 0px 15px; background:url(ここに画像のアドレス) no-repeat 0px 1px; }

1行目
ddは<dd>ですな。#commentlistはidの名前です。
<dd id="commentlist">の中にある<ul class="tree">の中の<li class="lst">に適用する、という意味です。

2行目
marginは字下げ。左側にどのくらい余白を設けるかを示します。ちなみに数字の順序は上右下左の順。

3行目
paddingは画像が入る部分の字下げ。画像の横幅が13pxなので、それ以上の数字を記述します。これがないと、画像に文字がかぶります。

4行目
backgroundは背景画像です。画像のアドレスはhttpから書きましょう。no-repeatは文字通り繰り返さないと言う意味。0px 1pxは順に背景画像の左からの距離、上からの距離になります。

3）id名を替えてCSSを付け加える

そのまんまです（笑）。コピー＆ペーストして、id名をチェンジ、背景画像もチェンジで違うリストに違う画像を適用できます。

comments

ポムポム | 2005/07/06 Wednesday 11:35: トルキーさん、こんにちは！
いつもお世話になっております。

早速こちらの記事を参照させていただき、ツリー画像を、先日お借りした「ブログ向けアイコン」に変更しました！
ずっとやってみたかったので、トルキーさんが分かり易く記事にしてくださったお陰で、本当に助かりました。

どうもありがとうございました<(_ _)>
これからも宜しくお願いいたします。

トルキー | 2005/07/07 Thursday 22:13: ＞ポムポムさま
いえいえー、うまくできましたようでよかったです！やはり、CSSいじり慣れていないと、ここら辺難しいかな、と思います。1年前の私はできませんでした（汗）。
だんだんマニアと化してるかも…と思う今日この頃です。

comment form

trackback url

トラックバックは承認制です。言及リンクがない場合には公開致しませんのでご了承下さい。

http://twilightbookstore.org/blog.cgi/189

宵闇書房 Twilight bookstore

リスト部分の画像をそれぞれ替える

comments

comment form

trackback url

trackback