--年--月--日

スポンサーサイト

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

リスト表示?好きな画像を使って?

 以前リスト表示についてのリストを表示しましょう♪という記事を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ランキング

スポンサーサイト

メイン

≪New ネットでわらしべ長者♪ | Top | 俳句を求めて三千里?マルコyozo&うさも編?@後姿ラブリー同盟 Old≫

トラックバックURL


コメント

こんにちはー。おお。yozoちゃん。またカスタマイズ(?)だねー♪
ちょっとかわいくて気になるのがサボテン君。
ダンスしてるよー♪
きのこちゃんも。。。かわいいねー♪
こうすればかわいくて見やすいんだねー♪
なるほどーーーー♪
もし使うことがあったら、覚えておいて、是非参考にさせてもらうねー♪
いつも勉強になります♪
ありがとうのクリックしてかえりまーす☆

コメント

>enuちゃん、こんばんはー♪
>こんにちはー。おお。yozoちゃん。またカスタマイズ(?)だねー♪
そうなんですよ。このカテゴリーの前回記事の続編です。(笑)
画像をやっぱり使いたいですもんね♪今回ちょっと遊んでみました。
ここの記事タイトルに使うつもりで、お借りした画像を使ってみました。
>もし使うことがあったら、覚えておいて、
>是非参考にさせてもらうねー♪
そのときは、いつでも見に来てくださいね。楽しいですからねー♪
((*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪
メチャクチャわかりやすかったです!
なんだかリスト用アイコンとか作りたくなってしまうような・・・(笑
どっちに転んでも細かい作業が好きなようです(・ω・;A)アセアセ…
これはサイドバーにも全く同じ方法で応用できるのですかね?
リンク先とかのリストをオリジナルアイコンにしても
可愛いだろうなぁととてもワク((o(・ω・。o)(o。・ω・)o))ワクしました♪
ひとまずすぐに・・・というわけにはいかないけれど、是非やってみたい
カスタマイズでした!
素敵な記事、ありがとうございましたー(。・ω・。)ゞピッ♪

コメント

>モンビッケさん、こんばんはー♪
>メチャクチャわかりやすかったです!
ありがとーございまっす♪お役に立てそうでうれしいですよ m(_ _)m
>なんだかリスト用アイコンとか作りたくなってしまうような・・・(笑
おっと・・・ここだけの極秘情報ですね(笑)
こっそり楽しみにしておきますよ。速攻でもらいにいきますけど(爆)
>これはサイドバーにも全く同じ方法で応用できるのですかね?
list-style
padding-left:△☆px;
と記入すればOKだと思いますよ。
少しずついじってみて慣れていけば簡単ですよ。(*^-゚)vィェィ♪

コメント

yozoさん、こんばんは。
いつもながら。わかりやすい記事ですね!
CSS編集は難しいので(苦笑)なかなか成功していないてるひですが
この記事を参考にさせていただいて、サイドバーのリンク集の行頭の
マークを、かわいいものに変えてみました♪
テーマや新着コメントの行頭マークは、CSSをいじらないと変更は
できないので、もう少し勉強してから、チャレンジしてみたいと思います!

コメント

>てるひさん、こんばんはー♪
>いつもながら。わかりやすい記事ですね!
ありがとーございまっす♪お役に立ててうれしいですよ。m(_ _)m
>行頭のマークを、かわいいものに変えてみました♪
わぁ♪ちょっとお邪魔させていただきますねー♪ヽ(^◇^*)/ ワーイ
・・・・・・・・只今、てるひさんのブログにお邪魔しています・・・・・・・・
うまくできてますね♪オメデト♪(*⌒ー⌒)o∠★:゚*PAN!
かわいいさくらんぼのペアがとってもいい感じですよ。(*^-゚)vィェィ♪
>テーマや新着コメントの行頭マークは、CSSをいじらないと
>変更はできないので、もう少し勉強してから、チャレンジして
>みたいと思います!
はい♪失礼ながらソースを見させていただきました。
サイドバータイトルのクラスがソースから見えないですね。
ただ、以前におっしゃってたスクロールバーは、フリースペース全体には
つけることができそうですね。今気がつきましたよ(苦笑)
.freespace{}として設定すればできると思います。って関係ないことを
自らレスしちゃいましたね。(苦笑) v(。・ω・。)ィェィ♪

コメント

こんばんはー。
をー。行頭マークを画像に変えるだけで
「箇条書き!」って固い感じがなくなって
ますます使い勝手が良さそうになりましたねー!!
お役立ち情報、どうもありがとうございましたぁ。

コメント

yozoさん、こんばんは~♪
この間の応用編ですね^^
見やすいうえに
画像にするととても可愛いね(^O^)
画像も楽しめちゃいます♪

コメント

待ってました(^^)
画像付リストですね。
前のリストではととろのブログはcssでは反映されなかったのでこのタグによる方法が活用できそう♪
前と同じくサイドバーでも使えるんだ。これを使う日が楽しみです。
えっと、次のリクエストは~何にしよう(笑)

コメント

yozo様、ご紹介どうもでした♪
ちょっと一言。。。m(_ _;)m
ブログのの場合テンプレートと画像の大きさで、レイアウトがグダグダになる可能性があります。
この場合はマージン設定が必要だと思うのです。
・・・それで苦労したので( ̄◇ ̄;)ッ
ついでに。
>.freespace{}として設定すればできると思います。
出来ますけど。
てるひさんってウェブリでしたよね。
グダグダ2なっちゃうんですよねー☆
注意点でしたっ。
。。。。。毎度茶々いれてゴメンナサイ。
あとでこのコメント消しといてね(汗;)

コメント

yozoさん、こんばんわ\(^0^)/
番号じゃなくて、アイコンとかでも使用できるんですね。いつもながら、凄いです。
CSSをいじらなくていいのが魅力的です。今度、やってみようと思います。

コメント

>ばばるさん、こんばんはー♪
>をー。行頭マークを画像に変えるだけで「箇条書き!」って固い
>感じがなくなってますます使い勝手が良さそうになりましたねー!!
そうでしょ。なんか楽しくなってきましたよ。おもしろそうな画像を借りてきて、遊びながら説明を考えていましたよ。(笑)(゚ー゚)(。_。)ウンウン
>お役立ち情報、どうもありがとうございましたぁ。
あはは・・・お役に立てて何よりです。
喜んでいただいてうれしですよー♪(^ー^* )フフ♪

コメント

>ゆうゆさん、こんばんはー♪
>この間の応用編ですね^^
そうなんですよ。やっぱり自分の好きな画像を使いたいですもんね。
CSSを一緒に書き込む形のタグ形式が使い良さそうなので、
簡略しましたよ。o(*^▽^*)oエヘヘ!
>見やすいうえに画像にするととても可愛いね(^O^)
そうでしょ。なんかこのアクセントの画像を色々と試してみたくなりますよね。この記事を書くときもさんざん遊んでしまいましたよ(・Θ・;)アセアセ…

コメント

>ととろさん、こんばんはー♪
>画像付リストですね。
そうなんですよ。CSS埋め込みタグを使って楽に設定しようと思って
考えましたよー♪o(゚▽゚o)(o゚▽゚)oニパニパッ
>前のリストではととろのブログはcssでは反映されなかったので
>このタグによる方法が活用できそう♪
あらら・・・たぶん、デフォルトでCSSにulやolの定義をしているのかもしれませんね。クラスを新しく作ってやれば大丈夫だと思いますよ。
(この記事のCSS編集の方をみてくださいね。)
>前と同じくサイドバーでも使えるんだ。これを使う日が楽しみです。
CSS編集で.module-header{}かなぁ~?(゚ー゚;Aアセアセ
(このクラスでいいか確認してくださいね。)
このlist-styleを使えば出来ると思いますが・・・?
だめだったらごめんなさいね。(笑っとく)(*^-^)ニコ
>えっと、次のリクエストは~何にしよう(笑)
あらら・・・?お応えできるかなぁ~?( ̄ー ̄; ヒヤリ

コメント

yozoさん、こんばんは♪(='▽')
トラバありがとうございました。<(_ _)>
いろいろなアイコンを使ってますね♪
どれもこれも可愛いアイコンです♪(゚-゚*)(。。*)ウンウン
それにしてもこうしてひとつひとつに画像を設定できるとは知りませんでした!!
なるほど~♪勉強になりました。
機会があったら使ってみます♪
こちらからもトラバさせていただきました♪<(_ _)>

コメント

>柴成@・・・・思いつかない!さん、こんばんはー♪
あらら・・・今回は思いつきませんでしたか?それは残念♪(笑)
>この場合はマージン設定が必要だと思うのです。
確かに。現にpadding-leftが必要なことは大いにありますし、margin-leftまで必要なケースもあると思いますね。悩んだのですが、質問の例をあげて、追記しようかな?って考えましたよ。文字と同じ大きさの画像なら、まずデフォルトでいけるでしょうし・・・なんてことを考えたわけなんですよ♪ちょっといい加減だったかも(苦笑)
確かにソース見たら、全体のdiv class="freespace"しかなかったんですよね。JS以外の部分にしかスクロールバーが設置できないので、手書きリンクリスト&バナーリストくらいにしか使えないってことですね。すぐにてるひさんにお伝えしておきますねー♪m(_ _)m
>。。。。。毎度茶々いれてゴメンナサイ。
あはは・・・そんなことないですよ。yozoのフォローをいつもしてくださっているんですからね。本当に助かりますよ。またご迷惑でしょうが、忌憚なくバシバシ指摘してくださいね m(_ _)m

コメント

>ネーちゃんさん、こんばんはー♪
>番号じゃなくて、アイコンとかでも使用できるんですね。
>いつもながら、凄いです。
お好きな画像をアップロードして、楽しめますよね。
手軽さを第一に考えましたよ♪(@⌒ο⌒@)b ウフッ
>CSSをいじらなくていいのが魅力的です。
>今度、やってみようと思います。
そうでしょ。実はstyle=のところがCSSコードなので、こっしょりCSSをいじっていることになってるんですよ。(苦笑)でも、タグみたいなものですから、手軽に使えますよね。試してみてくださいね。(^○^)

コメント

>まゆびさん、こんばんはー♪
こちらこそ、トラバ返してくださってありがとーございまっす m(_ _)m
>どれもこれも可愛いアイコンです♪(゚-゚*)(。。*)ウンウン
ふふふ・・・まゆびさんに教えていただいたA Trial Product's 素材置き場様から楽しそうなアイコンをダウンロードさせていただきましたよ♪
>それにしてもこうしてひとつひとつに画像を
>設定できるとは知りませんでした!!
ちょっとしたclassの応用ですよね。CSSはコードを持ち回りできるのが、とても便利ですよね♪機会があれば使ってみてくださいね。
classの持ち回りの考え方は、とても応用がきくと思いますよ♪('-'*)フフ

コメント

yozoさん、こんばんわ♪(゚▽゚*)
行頭マークを画像にするって、チョットだけ考えてたんですよ。
CSSでなく手打ちのタグならわかったんですけど、いちいちメンドーだな・・って思ってたんですよね。
ホント、痒いトコロに手が届く記事でした。
以前の記事に追記・TBさせていただきたいと思います!(゚ー゚*)

コメント

>Pavさん、おはよーございまっす♪
こちらにもトラバありがとーございまっす m(_ _)m
>行頭マークを画像にするって、チョットだけ考えてたんですよ。
ふふふ・・・チョットお役にたちましたか(笑)
とりあえず、どうせ箇条書きにするんなら、自分の好きな画像を
使いたいですよね♪(゚-゚*)(。。*)ウンウン
>ホント、痒いトコロに手が届く記事でした。
褒めていただいて、うれしいですよ♪(o^-^o) ウフッ

コメント

yozoさん、こんにちは。
文鳥の画像がとっても可愛くて私もやってみました。
私にはとても難しくてすごく時間かかりましたがなんとか1個だけ出来ました!
(今日はこれで精一杯ですぅーー)
記事の下の方にお断り入れたんですがあれでよかったでしょうか?
なにか問題あったら教えてもらいたいのですが。。。
よろしくお願いします!

コメント

>aiwhasさん、こんにちはー♪
やってみてくださったのですか?ちょっとお邪魔させていただきまーす♪
・・・・・・・・只今、aiwhasさんのブログにお邪魔しています・・・・・・・・
オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
ばっちり出来ていましたよ。文鳥ちゃんかわいいですねぇ~♪
『ただ、ちょっと文鳥ちゃんと文字の間の調節をしたいですよね。
style="list-style
となるように padding-left:25px;を入れれば文鳥ちゃんと
文字の間隔を調整できますよ。25は適当に変更してみてくださいね 』
>なんとか1個だけ出来ました!
あのまま、必要なら行を増やすだけですよ。ばっちりできてます!
yozoはちっとも質問受けしてません。aiwhasさんの実力ですよ。
自信持ってくださいね。ここに明言しておきます。
>記事の下の方にお断り入れたんですがあれでよかったでしょうか?
紹介してくださってありがとーございまっす♪m(_ _)m
また、A Trial Product's 素材置き場様の紹介リンクもとても丁寧でいいと思いますよ。安心してくださいね ♪♪v(⌒o⌒)v♪♪イエーイ

コメント

yozoさん、おばんです~。
先ほどはコメントくださってありがとうございました♪
2回時間とってやってみたんですが文鳥と文字の間を開けるのがやっぱり出来ないんです。
数字大きくしても文鳥ごと右に移動するだけなんです。
記号とかスペースとか間違って使ってるのかなぁ。。。
どうしても上手くいかないのでもう一度教えてくださーーい。
お時間あるときでいいのでよろしくおねがいしまーす☆

コメント

>aiwhasさん、こんばんはー♪
>2回時間とってやってみたんですが文鳥と文字の間を
>開けるのがやっぱり出来ないんです。
そのようですね。yozoも今aiwhasさんのソースのリストの部分をコピーさせていただいて、試してみました。同じようにpaddingが効きませんでした。padding-left:25pxを<li style="padding-left:25px;">となるように入力すると効くようです。yozoのやり方は、CSS編集のやり方でしたので、タグの場合は一つ一つstyle="padding-left:25px"を繰り返さないといけないようです。ごめんなさいね。余計な時間をとらせましたね。記事に注意事項として付記させていただきます。m(_ _)m

コメント

yozoさん、こんにちは♪
産直に行ってついいっぱい買い込んでしまって仕込みにすっかり時間取られてしまいました(;^_^A 。
ひと段落したのでさっそくやってみましたー♪
ちゃんとできました!(= ̄▽ ̄=)Vやったあ~!
慣れるまでしばらくもたもたしそうですが頑張ってここの手順を見なくても出来るようになりたいです!
今日は暑いですねー。こちらも今日は32度まで上がったみたい。
大阪はもっと暑いのでは? がおってませんか~(笑)。
お互い体調に気をつけて夏を乗り切りましょう☆
ホントにありがとうございました♪

コメント

>aiwhasさん、こんにちはー♪
>産直に行ってついいっぱい買い込んでしまって
>仕込みにすっかり時間取られてしまいました(;^_^A 。
得意の産直ですか♪さぞかしたくさん仕入れてきたのでしょうね。
どんなのができるのか楽しみデース ワクo(゚ー゚*o)(o*゚ー゚)oワク
>ちゃんとできました!(= ̄▽ ̄=)Vやったあ~!
やったぁ~♪オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
二度手間させてしまいましたね。申し訳ありませんでしたm(_ _)m
>慣れるまでしばらくもたもたしそうですが頑張って
>ここの手順を見なくても出来るようになりたいです!
何度でも見てくださっていいですからね。でもこれはいろいろ画像をつかいたいでしょうからね。すぐ慣れてしまうと思いますよ♪(゚д゚)(。_。)ウン!
>大阪はもっと暑いのでは? がおってませんか~(笑)。
暑いっすよぉ~♪35度くらいです。体感は体温よりも高くて、運動は×ってところですよ。もう、おもいっきり、がおってますよぉ~♪(苦笑)
お気遣いありがとーございまっす m(_ _)m
お互いに体調に気をつけましょうね。d(@^∇゚)/ファイトッ♪

コメント

yozoさん、おはようございます♪
久々にコメントさせていただきます。
この記事とても参考になりました!7/6の「リストを表示しましょう♪」の記事と一緒にコピペさせて貰いました☆
いずれ使用した時には使用報告させて頂きますので、どうぞよろしくお願いします☆彡

コメント

>ろんちゃんさん、おはよーございまっす♪
>この記事とても参考になりました!7/6の「リストを
>表示しましょう♪」の記事と一緒にコピペさせて貰いました☆
 どうぞ♪どうぞ♪遠慮なく使ってくださいね。一度使って便利さを知っちゃうと、やめられなくなりますよ。それと自分の好きな行頭マークをつけるととても楽しくなりますからね。また出来ましたら連絡くださいね。すっ飛んでいきますよー♪パチッ☆-(^ー'*)bオッケー♪
 本日は、コメントありがとーございまっす♪『気が向いたと記』ですから、いつでも遊びに来てくださいね。 m(_ _)m

コメント

yozoさん、こちらこそありがとうございます m(_ _)m
今後ともどうぞよろしくお願いいたします☆彡

コメント

>ろんちゃんさん、こんにちはー♪
ご丁寧にありがとうございまっす。 m(_ _)m
こちらこそ、今後ともよろしくお願いしまーす  (*^-^)ニコ

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


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