人気ブログランキング | 話題のタグを見る
<< Firefox 1.0.3日本... 春の流れ星 >>
 

投稿欄のリストをおしゃれに


はじめに

春になってブログを始める方や、ベテランさんなどいろいろな方がいらっしゃると思います。そんなみなさんは、いろいろ工夫してブログライフを楽しんでいるかと思います。今日はそんな方々のために、投稿欄のリストのおしゃれについて記事にしたいと思います。

みなさんは、リストを利用しますか?
私は、要点を箇条書きにする時にリストを使います。
そう、今日のポイントでリストを使っていますね。でもデフォルトだとちょっとおしゃれじゃないですよね。(図1参照)
そこで図2に示すように、ちょっとおしゃれにしました。

ちょっとだけのことなのに、投稿欄が春らしくなりました。

では、始めましょうか。




  • リスト1
  • リスト2
  • リスト3



図1 いつものリスト




  • リスト1
  • リスト2
  • リスト3



図2 リストをおしゃれに


投稿欄の指定

まず投稿欄にリストの指定をします。ulタグの後にクラスをしています。ここで指定したクラスと同じ名前をCSS編集でも使用して下さい。私はクラス名にflower1と付けました。


投稿欄の指定
<ul class=flower1>
<li>リスト1</li><li >リスト2</li><li>リスト3</li>
</ul>


CSS編集

CSS編集部分に投稿欄で指定したクラス名と同じ名前を用いて指定を行います。リストのイメージを指定する方法はいくつかありますが、今回はlist-style-imageを使用しました。


CSS編集

ul.flower1{
list-style-image:url(イメージのURLアドレス);
}


今日のポイント
  • list-style-imageでリストのイメージを指定します。


  • 今回はulに対してlist-style-imageを指定しましたが、liに指定するとリストのイメージをいろいろと変えることが出来ます。

  • 以下のように指定すると、投稿欄のリスト全てに適応が出来ます。


    CSS編集
    .POST_BODY ul{
    list-style-image:url(イメージのURLアドレス);
    }




参考になる記事

初めての方も多いと思いますので、スキン編集の基本的なことが書いてある記事のリンクをアップしておきます。
ブログ作成マニュアル
イメージファイルのアップの方法


難易度:★
ぽっと

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-04-17 11:00 | │├投稿欄
<< Firefox 1.0.3日本... 春の流れ星 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。