サイドバーや記事内などのリスト(li)にアイコンを付けたい場合、リストを使わずに

1. <画像URL> テキスト <br />
2. <画像URL> テキスト <br />

とされている事がありますが、スタイルシートで指定した方が後々修正が楽ですし、ページ読み込みも早いです。

アイコンには16×16ピクセルの画像が使われる事が多いです。まずはフリー素材から借りてみるのも良いでしょう。(参考：Free! Icons for your website or application[フリーアイコン集])

まずは記事内で試してみる

記事内で試してみましょう。HTMLの<ul>または<ol>にクラスを指定し、その要素内の<li>にアイコンを付ける方法です。

記事の本文に以下のコードを記述してください。なお、記事投稿のページ下部にある投稿設定にて「改行の扱い」を「HTMLタグのみ」にしておきましょう。

<ul class="sample1">
	<li>リスト</li>
	<li>リスト</li>
</ul>

つぎに、テンプレートのCSSに以下のコードを追加してください。

.sample1 li
{
	list-style: none;
	background:url(http://blogxx.fc2.com/file/xxxx.gif);
	background-repeat: no-repeat;
	padding: 0 0 0 17px;
}

HTMLではsample1というクラスを指定、CSS部分には.sample1内のli要素について記述します。

「list-style:none」で、通常リストテキストの左に表示される「・」を表示させないようにしています。

「background」は背景の事で、<li>に背景画像を指定しています。このままだと背景画像が並んで表示されてしまうので、background-repeat: no-repeatとする事で一度しか表示しないようにしています。(繰り返し表示しない)

最後に、padding(上0px 右0px 下0px 左17px)でli要素内での間隔を指定しています。paddingを指定しないと、テキストと画像が被って表示されてしまいます。今回はアイコンが16pxという事を前提にしているので、その幅+少し間隔を空けるという事で左に17pxとしましたが、使用する画像によって修正して下さい。

リスト毎にクラスを指定することも可能

上では要素内のリスト全てに同じアイコンを表示させましたが、下のサンプルは各リスト毎にクラスを指定する方法です。

<ul>
	<li class="sample2">テキスト</li>
	<li class="sample3">テキスト</li>
</ul>

.sample2{
	list-style: none;
	background:url(http://blogxx.fc2.com/file/xxxxA.gif);
	background-repeat: no-repeat;
	padding: 0 0 0 17px;
}
.sample3{
	list-style: none;
	background:url(http://blogxx.fc2.com/file/xxxxB.gif);
	background-repeat: no-repeat;
	padding: 0 0 0 17px;
}

• カテゴリトップへ

前後の記事

最近の記事