- 2007-11-12 (Mon)
- FC2blog Tips
- FC2blog
- Tips
- CSS
Category :
Tags :
リストは、cssや画像を指定せずに記述すると、「●」か「○」のようなリストになってしまう。前回はリストマークを変えたり、ナンバー形式にする説明をしました。
●記事に箇条書きなどのリストを付ける
ここでは、そのリストを画像にする方法をします。方法は2種類。
１．個別でリストに画像をつける方法
２．全体のリストに画像をつける方法
勿論、「hoge」部分を変更し、複数cssに作っておけば、リスト作成時に「ul class=""」の値を入れるだけで複数パターンのリストが作ることができる。
●記事に箇条書きなどのリストを付ける
ここでは、そのリストを画像にする方法をします。方法は2種類。
１．個別でリストに画像をつける方法
都度、リストに別々の画像アイコンを使うときに有効かと思います。これを毎回入れるのが、面倒くさく勝手に入るような設定にしたい場合は、css編集を行う以下の方法で作成してください。
記述例
<ul style="list-style-image: url(/file/page.png);">
<li>FC2BLOG</li>
<li>FC2BLOG</li>
<li>FC2BLOG</li>
</ul>表示結果
- FC2BLOG
- FC2BLOG
- FC2BLOG
２．全体のリストに画像をつける方法
ul.hoge {
list-style-image: url(画像URL);
}hoge.li {
list-style-image: url(画像URL);
}いずれかのcss編集を行い、実際にタグを入力する際に、リストタグに簡単な記述を追加する。
<ul class="hoge">
<li>FC2BLOG</li>
<li>FC2BLOG</li>
<li>FC2BLOG</li>
</ul>このように、cssをあらかじめ設定しておけば、毎回タグを記述してリストを作る際に簡単に画像リストを使うことができる。勿論、「hoge」部分を変更し、複数cssに作っておけば、リスト作成時に「ul class=""」の値を入れるだけで複数パターンのリストが作ることができる。
- Next Entries : ダウンジャケット購入＠原宿
- Prev Entries : 公式プラグイン：便利なメールフォーム
Comments:2
Trackback+Pingback:0
- TrackBack URL for this entry
- http://blackcat13numbers.blog31.fc2.com/tb.php/173-c2e22ac2
- Listed below are links to weblogs that reference
- 画像を使ったリストを作成する from TRASH