以前リスト表示についての
リストを表示しましょう♪という記事を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編集は別に苦じゃないという方はここから先を参考にしてください。(笑)
- まず、使用したい画像をアップロードしてください。
- 一番下の余白部分に、下のコードをコピペして追加しましょう。
必ずバックアップしましょう!
いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪
.list1 {
list-style : url(http://pds.exblog.~画像URL~/□☆○.gif);
padding-left:20px;
}
※padding-left:20px;で、文字と画像が重ならないように、文字の左に20pxの間隔をあけています。この数値は好みで変更してください。
- 「プレビュー」で確認してから、「保存」してください。
- 記事を投稿するときに、『箇条書き』したい部分を下のように記入すればOKです。
<ul class="list1">
<li>~箇条書きしたい内容1~</li>
<li>~箇条書きしたい内容2~</li>
<li>~箇条書きしたい内容3~</li>
</ul>
<yozoからのお願い>
私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「スキン(テンプレート)改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
ぽちっと応援お願いします♪ m(_ _)m