DTIブログカスタマイズしちゃうぞっ　

カスタマイズ講座のＣＳＳ編でございます。

今回は質問をちょっと受けまして、ひとこと掲示板で説明するにはスペースがキツいので、こちらに書くことにしました☆


まず質問内容なのですが、

『FISHのテンプレートですが、Author:hazukiの左横に有る、丸いポチポチ（で伝わるでしょうか？）を例えば、このブログの（DTIブログカスタマイズしちゃうぞっ）みたいな花に変更するには、どこをいじればいいでしょうか？
お願いします。 』

こんな感じでした。


Ｆｉｓｈテンプレのメニュー欄には、●が左端に付いてます。
それっていうのはデフォルトで、何も指定しないと付くのらしいですわ。


ＣＳＳでその形を表現する時は、以下になります。

●　li {list-style-type: dics;}
○　li {list-style-type: circle;}
■　li {list-style-type: square;}
ａ　 li {list-style-type: lower-alpha;}
A 　li {list-style-type: upper-alpha;}


ここまでは普通の表現方法。
今回のご質問のように、画像を表示させたい場合には二通りあります。


まず一つ目が、ｈｔｍｌ タグに <img> として書き込む方法。
そして二つ目が、ＣＳＳ の背景として表示させる方法。

私も最初は、タグに直接書いていたのですが、それだと座標が何度やっても上手く行かず四苦八苦した覚えがあります。
画像の種類によっては、十分それで対応出来ると思います。

ＣＳＳの背景として表示させる方なのですが、私はこの方法でやっております。
例として、このアイステンプレの記述方法を。

p {
font-size: 10px;
padding: 2px 6px 0px 24px;
margin-left: 10px;
line-height: 120%;
color: #00008B;
list-style-type: none;
text-decoration: none;
background: url(http://1.dtiblog.com/h/hazuki/file/snow-list.jpg) no-repeat left;
}

今回ちょっと実験的に、リストタグの代わりにＰで代用してみました。
また様子みながら変えようかな〜とは思います。

上から、

文字の大きさ
文字の余白
Ｐ 要素の余白
行間、文字色
リストの種類
文字装飾
背景画像（場所）繰り返し、位置

って感じに書いてあります。



あくまでも背景画像なので、ｐａｄｄｉｎｇ を指定しないと画像に文字が被ってしまいます。
何回も表示させて、ちょっとずつ ｐｘ を増やしながら様子をみましょう。

背景画像をリストマークの代わりにしたいので、list-style-type: none; は忘れずに指定して下さい。

画像も注意して作らないと、端が欠けた状態で表示される事になったりしてちょっと悲しい事も（笑）
凝ったものよりシンプル目がいいです♪


ぜひ一度お試し下さいませ〜(o^∇^o)ノ