サイドバーのリストの横に→見たいな画像を入れるには?

[統計] HTMLからXHTMLへの移行を進めていますか?



0   名前: 夜一 : 2007/03/02(金) 05:23  ID:s6JK945A sub-Ds
【何をしたいのか】
→ seesaaブログのカテゴリ欄リストの文字の横に画像を入れたい。
 (例)・アイドル
   ・ゲーム
の・の部分を→の形になった画像や三角みたいな画像を見れたいんですがどうすればいいのでしょうか?

【現在の状況】
→ デザイン→カテゴリのHTML編集部分でどこに画像のアドレスを入れる大体分かっているのですが、入れてみると文字と文字の行の間隔がなくなってくっついてしまうんです。


画像をいれかつ元の行間隔にするにはどうすればいいのでしょうか?教えていただけませんでしょうか?
よろしくお願いします。



1   名前: K+S : 2007/03/02(金) 05:23  ID:nROqylMa sub-YS
本来であれば、list-style-image プロパティと marker-offset プロパティで弄るはずですが。
現状では、list-style: none とした上で、li 要素の背景画としてマーカーを表示するのが定石です。
ul li {
	list-style: none outside;
	padding-left: 20px; /* マーカー画像幅と間隔に合わせて調整 */
	background: url("marker.gif") 0 50% no-repeat scroll;
	line-height:1.5; /* 任意 */
}
マーカー画像の幅については、縦横ともに16px前後以下が適しているようです。

それにしても、
→ seesaaブログのカテゴリ欄リストの文字の横に画像を入れたい。
 (例)・アイドル
   ・ゲーム
の・の部分
がどこにあるのか分かりません。
seesaaブログのテンプレを軽く確認してみましたが、カテゴリ欄についてはインライン末の br 要素で内容を配置しているようで。

一覧へ戻る