BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪
トータル今日昨日 Since 29 November '05
ここのブログの記事をご覧のみなさんへ
  ここのブログを見に来てくださってありがとうございます♪m(_ _)m 勝手ながら、ここのブログは2006/08/02に
新ブログ『yozoの気が向いたと記2.0』に、非公開コメントを除く、すべての記事、及びコメント、トラックバックを
移転しております。また、移転以降、スパム対策のため、ここのコメント・トラックバックは受け付けておりません。
ご意見・ご感想は、お手数ですが、新ブログの同じタイトルの記事にて、お聞かせくだされば幸いです。m(_ _)m
新ブログ→yozoの気が向いたと記2.0 http://yozoblog2.blog63.fc2.com/
yozoの気が向いたと記
yozoの気が向いたと記2.0
ぽちっとお願いします♪

yozoの関連リンク

BlogPetのお友達

おすすめブログ紹介

BlogPet背景作家のみなさん

素材屋のみなさん

おすすめBlogGroup


BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪
リスト表示~好きな画像を使って~
 以前リスト表示についてのリストを表示しましょう♪という記事をUPしました。
以前の記事はコチラ
どうせリスト表示を使うのなら、やっぱり行頭マークは自分の好きな画像を使いたいものですよね♪今回はリスト表示に好きな画像を使う方法を紹介します♪
このカスタマイズは、CSSがいじれるブログならどこのブログでも可能です。
このカスタマイズは、ぺっと's Cafeまこさんの記事ここあ俳句ページ♪ を参考にさせていただきました。このブログは、いつもお世話になっているwebでお絵かきまこさんのBlogPet投稿用のブログです。まこさん、どうもありがとうございました m(_ _)m

CSS編集なしで、簡単に
好きな画像を行頭マークにしたい!


という方におすすめ!記事投稿欄に、下のコードをコピペして、
お好みの画像URLに変更して投稿してください。
使用したい画像をアップロードしてください。アップロードの方法の説明はコチラ
使用する画像サイズが大きいと、文字に重なったりすることがありますので、ご注意ください。

<ul style="list-style : url(http://pds.exblog.~画像URL~/□☆○.gif);">
<li>
~箇条書きしたい内容1~</li>
<li>
~箇条書きしたい内容2~</li>
<li>
~箇条書きしたい内容3~</li>
</ul>


http://pds.exblog.~画像URL~/□☆○.gifをお好みの画像のURLに変更してください。使ってみたいという方は、コピペしてくださって結構ですよ♪(そのまま使えるようにしてあります。)

使用例

  • 「その会社 参考すると ありがたく」
      うさも - 2006/06/19 20:31:22

  • 「あのもんで 応援すると 難しく」
      うさも - 2006/06/19 14:18:44

  • 「ラジカセや できますからね 実家かな」
      うさも - 2006/06/19 12:58:31

  • 「そのおかげ なってることが 自分かな」
      うさも - 2006/06/19 09:07:23

  • 「このすねで ありませんので 画面かも」
      うさも - 2006/06/18 16:44:51


細かく画像を変えたいと言う人はこちらのコードを使用してください。
<ul>
<li style="list-style : url(http://pds.exblog.~画像URL~/□☆○1.gif);">
~箇条書きしたい内容1~</li>
<li style="list-style : url(http://pds.exblog.~画像URL~/□☆○2.gif);">
~箇条書きしたい内容2~</li>
<li style="list-style : url(http://pds.exblog.~画像URL~/□☆○3.gif);">
~箇条書きしたい内容3~</li>
</ul>


http://pds.exblog.~画像URL~/□☆○.gif
必要な分だけ用意してください。

使用例

  • 「文章や キリスト教徒 世界だね」
      うさも - 2006/06/18 00:27:53

  • 「感情を 仕事されたし 部分だね」
      うさも - 2006/06/18 00:27:16

  • 「このバトン しておきますね ペットかも」
      うさも - 2006/06/18 00:26:09

  • 「カラオケを 計画すると ボクシング」
      うさも - 2006/06/18 00:23:43

  • 「背景に キリペタされた 模様替え」
      うさも - 2006/06/17 16:35:23

  • 「そのトップ 速報したる サイトかな」
      うさも - 2006/06/17 16:35:14


 この記事で行頭マークに使用した画像は、A Trial Product's 素材置き場様よりダウンロードさせていただきました。
 なお、こちらの素材屋さんのことは、お友達ののんびり前進じたばた生活まゆびさんの記事ブログをヒマワリで飾ってみました♪で知りました。まゆびさん、素敵な素材屋さんを教えてくださってありがとうございました。 m(_ _)m
yozoは左サイドの素材屋さんから必要な分だけ、使用するときにダウンロードさせていただいています。もちろん、素材屋さんの掲示板などに一言、使用報告とお礼のカキコしています。


画像と文字の間がつまってしまった場合

下のように、<li>の中に、style="padding-left:25px;"を追加してください。

<ul style="list-style : url(http://pds.exblog.~画像URL~/□☆○.gif);">
<li style="padding-left:25px;">~箇条書きしたい内容1~</li>
<li style="padding-left:25px;">~箇条書きしたい内容2~</li>
<li style="padding-left:25px;">~箇条書きしたい内容3~</li></ul>

※padding-left:25px;で、文字と画像が重ならないように、文字の左に25pxの間隔をあけています。この数値はご自分で調節してください。


CSS編集は別に苦じゃないという方はここから先を参考にしてください。(笑)
  1. まず、使用したい画像をアップロードしてください。
    アップロードの方法の説明はコチラ


  2. 一番下の余白部分に、下のコードをコピペして追加しましょう。
    必ずバックアップしましょう!
    いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪

    .list1 {
    list-style : url(http://pds.exblog.~画像URL~/□☆○.gif);
    padding-left:20px;
    }
    ※padding-left:20px;で、文字と画像が重ならないように、文字の左に20pxの間隔をあけています。この数値は好みで変更してください。


  3. 「プレビュー」で確認してから、「保存」してください。


  4. 記事を投稿するときに、『箇条書き』したい部分を下のように記入すればOKです。
    <ul class="list1">
    <li>
    ~箇条書きしたい内容1~</li>
    <li>
    ~箇条書きしたい内容2~</li>
    <li>
    ~箇条書きしたい内容3~</li>
    </ul>


<yozoからのお願い>

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「スキン(テンプレート)改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m


ぽちっと応援お願いします♪ m(_ _)m  人気blogランキング

[PR]
by yoblog | 2006-07-12 14:41 | ブログの手引き |TOP▲
<< ネットでわらしべ長者♪ |▲TOPにもどる▲| 俳句を求めて三千里~マルコyo... >>
トップ
2006/08/02 より、『yozoの気が向いたと記2.0』に移転しました。

新ブログはコチラです。
↓↓↓↓↓↓↓
yozoの気が向いたと記2.0

「うさも」が書いたBlogです。
次女うさ「うさみ」もいますよ♪

↓↓↓↓↓↓↓
うさもの気が向いたと記

末うさ「うさめ」のBlogです♪
↓↓↓↓↓↓↓
yozoのおすすめ本


人気ブログランキング - yozoの気が向いたと記
検索
カテゴリ
フォロー中のブログ
以前の記事
最新のトラックバック
データのバックアップとイ..
from yozoの気が向いたと記2.0
BlogPet俳句を求め..
from うさもの気が向いたと記
コレけっこう間違えている..
from 「感動創造カンパニー」城北の..
たまごの「キリぺた」のーと
from それはそれとして。(仮)
うさびのキリぺた帳 11
from のんびり前進じたばた生活
エキサイトのネームカード..
from ととろのおもちゃ箱
エキサイトネームカード作..
from 京ポンで今日もゆく〜
BlogPetのお出かけ
from 果報は寝て待て(-_☆)
部屋バトン
from ROOM-M
エキサイトネームカードを..
from のんびり前進じたばた生活
エントリします!「俳句を..
from 感謝の日記
トッラクバックを学ぶ
from 感謝の日記
うさもちゃんにツッコミ!..
from のんびり前進じたばた生活
不思議の国のうさも
from つなビィ - yozoblog
まゆびさん、ついにBlo..
from つなビィ - yozoblog
次は『と』です@Blog..
from ◇藍真珠のつぶやき◇
高校野球 脳梗塞克服の投..
from ひでさん♪の雑記帳
「俳句を求めて三千里」エ..
from のんびり前進じたばた生活
「俳句を求めて三千里」エ..
from のんびり前進じたばた生活
ぴょんの夏休み前お友だち..
from 夢みるととろ日記
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧