スタイルシート（CSS）を使ってリストマークを背景画像で設定！

うちのサイトではSEO的な観点から個別エントリーのタイトルは<h1>～</h1>で囲んであります。でその<h1>に対して、背景画像の設定をするだけです。設定例はこんな感じです。

#content h1{
font-size:16px;
margin-top: 25px;
margin-bottom:0px;
padding-left: 20px;
border-bottom: 1px solid #B2B2A0;
background-image: url(images/parts/h1mark.gif);
background-repeat: no-repeat;
background-position: 0px 2px;
}

背景画像（イメージ）の設定は、background-image、background-repeat、background-positionの3つです。指定パスに画像アップするのを忘れずに！

▽background-imageでは背景画像として読み込む画像のパスを設定。
▽background-repeatでは背景画像を繰り返さないように設定。
▽background-positionでは左上を基準として、左右、上下の位置を指定。

後は<h1>～</h1>に挿入する文字列をpaddingを使って調節します。

単純だけど、これって結構応用範囲が広いんですよね。画像を変えたい時もスタイルシートをちょちょっと変更すれば良いだけです。うちのサイトでは個別タイトルの<h1>だけじゃなくて、サイドメニューの<div>や<a>タグ、またコメントや、トラックバックを表示させる<div>タグで使いまくりです。