<< 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アドレス);
    }




参考になる記事

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


難易度:★
ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-04-17 11:00 | │├投稿欄 | Trackback(1) | Comments(6)
トラックバックURL : http://potto.exblog.jp/tb/1853123
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from ミエランダム at 2005-07-04 16:18
タイトル : 箇条書きに可愛いアイコンを **スキン編集**
またまたスキンをいじる。 いつもお世話になっているぽっとの陽だまり研究室さんのお蔭で、 素っ気無い箇条書きの行頭文字を、可愛いアイコンに変更できました♪ CSS欄に ul.クラス名{ list-style-image:url(イメージのURLアドレス); }(赤色のとこは任意の名前)を加えただけでこんなに可愛く変身。 [変更前]リスト1リスト2リスト3 [変更後]リスト1リスト2リスト3 次は何を変更しようかな・・・。... more
Commented by smhchie at 2005-04-26 18:52
ぽっとさんに質問です。ぽっとさんのように、「top」「next」「back」をかわいいイラストに変えたいのですが、どう設定すればいいのかわかりません。素材は用意してあるので後は設定なんです。教えて頂けませんか?
Commented by potto37 at 2005-04-26 22:39
私の記事ですが、以下のアドレスを参考にして下さい。
ただし、素材によっては調整が難しいこともあります。
またブラウザをIEだけではなく、Firefoxなどでもチェックをする必要があります。

次のページへ”のおしゃれ方法について
http://potto.exblog.jp/1468561/
Commented by smhchie at 2005-04-27 16:44
ん~・・・・私には難しかった(×_×)じっくり、何度も読み返してまたチャレンジしてみます・・・(; ;)でも、ぽっとさんのおかげで、私の質素なフブログが少しずつそれらしくなってきました!コメント欄のネコちゃんもかわいい♡ひとつずつじっくり、ゆっくりマスターしたいです♪
Commented by potto37 at 2005-04-28 00:00
smhchieさん、こんばんは。
結構、難しいかもしれませんね。忘れた頃に試すと、
意外とちょっとしたことで出来てしまうことがあるので
またチャレンジして下さいね。

smhchieさんのサイトも、可愛らしくなりましたね。
ゆっくり楽しんで下さいね。
Commented by smhchie at 2005-04-28 02:36
私なんぞのブログに来て頂いてありがとうございます♪私としてはあれが限界です^^;もっと、ぽっとさんのようにかわゆい感じにしたいんですけど、まだまだです。パソコンは仕事で売り上げ表を見るくらいしかなかったけど、まさか30過ぎてこんなにハマってしまうとは思いませんでした!ぽっとさんを知らなければそのまま私はグ~ダラおばはんでしたっよ^^;ぽっとさんに感謝です♪また、いろいろと質問ばかりしてしまうと思いますが、よろしくお願いします・・・。
Commented by potto37 at 2005-04-28 22:58
smhchieさん、こんばんは^^
気分に合わせて洋服を着替えるように、ブログのスタイルを変えるのも面白いですね。最近忙しくて、すぐには質問に答えられないかもしれませんが、こちらそこ よろしくお願いします。
<< Firefox 1.0.3日本... 春の流れ星 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。