Home > スポンサー広告 > 画像を使ったリストを作成する


スポンサーサイト

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

 Comments:-

2008-04-29 (火) 16:17

このコメントは管理人のみ閲覧できます

TomomiX URL 2008-05-02 (金) 01:11

どうもありがとうございました。
早速確認してみます。

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/173-c2e22ac2
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > 画像を使ったリストを作成する

Home > FC2blog Tips > 画像を使ったリストを作成する


画像を使ったリストを作成する

リストは、cssや画像を指定せずに記述すると、「●」か「○」のようなリストになってしまう。前回はリストマークを変えたり、ナンバー形式にする説明をしました。
●記事に箇条書きなどのリストを付ける

ここでは、そのリストを画像にする方法をします。方法は2種類。

1.個別でリストに画像をつける方法
記述例
<ul style="list-style-image: url(/file/page.png);">
<li>FC2BLOG</li>
<li>FC2BLOG</li>
<li>FC2BLOG</li>
</ul>
表示結果
  • FC2BLOG
  • FC2BLOG
  • FC2BLOG
都度、リストに別々の画像アイコンを使うときに有効かと思います。これを毎回入れるのが、面倒くさく勝手に入るような設定にしたい場合は、css編集を行う以下の方法で作成してください。

2.全体のリストに画像をつける方法
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=""」の値を入れるだけで複数パターンのリストが作ることができる。
スポンサーサイト

 Comments:2

2008-04-29 (火) 16:17

このコメントは管理人のみ閲覧できます

TomomiX URL 2008-05-02 (金) 01:11

どうもありがとうございました。
早速確認してみます。

Comment Form

 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

Home > FC2blog Tips > 画像を使ったリストを作成する

Recent Comments
Recent Trackback
Feeds

↑Page Top

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