サイドバーの箇条書きにアイコンをつけたい

質問

ＦＣ２ブログに関しての質問です。
サイドバーの「カテゴリ」や「リンク」一覧のところの文頭に、可愛いアイコンを付けたいです。

画像のような感じで、箇条書きの頭にアイコンが付くようにカスタマイズするには、どのようにスタイルシートを変更すれば良いでしょうか。

使う予定のアイコン画像はアップロードしてあります。

テンプレート名は「purity」です。
よろしくお願いします。

回答No.2

zeff · ベストアンサー

あっ…質問の内容をちゃんと把握してませんでした；
ボーっとしてたのかな、申し訳ないです；

＞上の写真の「最新記事」の横についてしまいました。。。
そのつもりで回答したので、
合っていたといえば合っていたわけですが。
前の回答は忘れて元に戻してください＾＾；

リストの文頭にアイコンを入れるんであれば、

.side_txt li{
list-style-type : none;
list-style-position : outside;
vertical-align : middle;
font-size : 11px;
line-height : 1.3;
padding : 1px 0px;
}

ここを変えないといけないんでした。

.side_txt li{
list-style-type : none;
list-style-position : outside;
vertical-align : middle;
font-size : 11px;
line-height : 1.3;
/* 以下が変更内容です */
padding : 1px 0 1px **px; /* 左余白を取る */
background:url(アイコン画像url) no-repeat left top;
}

これでどうでしょうか？
複数行になっても、
画像のように文頭にアイコンが来るはずです。

補足

できました！

「サイドバーの箇条書き」ではなく「リストの文頭」って表現をすればよかったんですね ^^;

ご丁寧にどうもありがとうございました m( )m

回答No.1

zeff

スタイルシートの
.side_title{
margin : 0px;
padding : 9px 12px 0;
color : #181230;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 12px;
font-weight : bold;
}

に
background:url(アイコン画像URL) no-repeat 左からの位置px 9px;
を追加してください。

ただ、このままだとアイコンが文字に少しかぶっていると思うので、
paddingの12px（左右の余白）の所を
padding:9px 12px 0px **px;
といった具合に上右下左の指定に変更して
**pxで左余白を増やしてください。

左からの位置pxは15px*15px程度のアイコンだと8pxというところです。
9pxは上からの位置で、paddingと同じにして合わせています。

※変更例
.side_title{
background:url(アイコン画像URL) no-repeat 8px 9px;
margin : 0px;
padding : 9px 12px 0 24px;
color : #181230;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 12px;
font-weight : bold;
}

補足

ご回答ありがとうございます。

おっしゃるようにやってみたところ、記事タイトルのところではなく、上の写真の「最新記事」の横についてしまいました。。。