リストにアイコンをつけたい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。