タグ「リスト」 の検索結果(1/1)

2009年2月 7日

リストのマークを画像に

サイドバーの各項目(=サイドメニュー)はどれもリスト形式になっていて、「小粋空間」さんのテンプレートでは、リストのマークは"circle"(線で描かれた丸)になっています(ただし、タグクラウドだけは非表示)。
今回は、そのマークを三角矢印の画像にしてみました。
まずPhotoshopで矢印の画像を作り、あとはスタイルシート(オリジナル)に以下のような指定をします。
/* Sidebar ------------------------------------------------------- */

/*項目の頭に三角矢印を付けることと、それに伴う調整*/
.side ul {
      padding-left: 0;
}
.side ul li {
      padding-left: 15px;
      list-style-type: none;
      background: url(images/arrow.gif) no-repeat 0 4px;
}
.side ul li ul {
      padding-left: 0;
}
.side li li {
      background: none;
}
ul#tags li {
      background: none;
      padding-left: 0;
}

ポイントは、入れ子になっているサブのリスト及びタグクラウドにはマークの画像を表示させないことと、マークの表示位置の調整です。
表示位置は何度かやってみて、X軸を0(左寄せ)、Y軸を4px(上から4ピクセル下)としましたが、ブラウザによって微妙に上下に位置がずれるので、難しいところです。
マウスオーバー時に画像を差し替えて矢印の色を赤系統に変化させるということも可能ですが、今日はこれくらいにしておきます。
ページの先頭に戻る