【応用編】リストマークを画像にする

＝ お知らせ ＝
この内容は下記に移転しました。（2009.01.31）
オリジナルデザイン講座 for So-net blog

【基礎編】【準備編】【実践編】から続いています。

【お題】リストマークを画像にする

【完成形】

【準備】
リストマーク用の画像を用意します。
サイズの制限などはありませんが、出来るだけ小さいもの（文字の大きさくらいを目安）にしてください。

今回用意したリストマーク用の画像は、こちら。自作です。

（9×10pixel）

【変更】
リストマーク用画像をブログ内に追加保存し、sidebar-body li を変更します。

（１）リストマークのスタイルに画像を指定する。
sidebar-body liにlist-style-imageを追加し、そこに保存した画像のurlを指定します。

.sidebar-body li {
padding:3px 0;
margin-left:15px;
list-style:square;
list-style-image:url(CCC.gif);
}

画像がきちんと表示出来ていれば、これで完成です。
しかし、サンプルの場合、足跡マークが切れてしまっています。
（２）（３）を参考に、調整してください。

注）「CCC.gif」はファイル名です。
　　画像を保存したときのファイル名をここに当てはめてください。

（２）画像の左端が切れているのでmarginで調整します
sidebar-body liのmargin-leftを変更します。
サンプルでは15px→18pxに変更しますが、これは「だいたい」の数値です。設定する値は使用する画像の大きさ（○×□pixel）によって異なりますので、ご注意ください。

.sidebar-body li {
padding:3px 0;
margin-left:18px;
list-style:square;
list-style-image:url(CCC.gif);
}

（３）画像の下が切れているのでpaddingで調整します
sidebar-body liのpadding-topおよびpadding-bottomを変更します。
例ではpadding-topを3px→1px、padding-bottomを3px→5pxに変更しますが、これは「だいたい」の数値です。設定する値は使用する画像の大きさ（○×□pixel）によって異なりますので、ご注意ください。
ちなみに、サンプルにおいてtopを2px減らし、bottomを2px増やしたのは見た目状の問題で、現状の行間（上下のトータルのpaddingの値：6px）を保持するためです。

.sidebar-body li {
padding:3px 0;　ー（※）
padding-top:1px;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
margin-left:18px;
list-style:square;
list-style-image:url(CCC.gif);
}

尚、paddingの値を大きくしますと上下（左右）の文字間隔が広がりすぎてレイアウトが崩れてしまうので、少しずつ値を変えて画像が切れなくなるところを見つけてください。

※ padding:△ ☆;
△ーtop&bottom　☆ーleft&right
この書き方だと混乱するので、敢えて個別設定方法に書き換えました。

これで完成です。

【注意事項：GIF形式の画像ファイルについて】
用意したリストマーク用の画像は透過処理をしています。
「透過処理をしている」とは「足跡マーク以外の部分を透明にしている」ということで、どのような背景色でも対応できます。
しかし、透明な部分と絵（この画像の場合、足跡マーク）の境目を滑らかにに見せるために
白色でマット（縁取りのような）処理をしているため、この画像は薄い背景色対応になっています。

試しに同じ画像を黒い背景色に乗せると、以下のように境目がギザギザに見えます。

このように、透過処理をされている画像は背景色との相性がありますので、注意してご使用ください。ギザギザに見えるようなら、その画像と背景色は合わないということです。

以上。

たぶん【番外編】に続きます。

【目次】へ

コメント 18

かほりんさん。おはようございます。
やった〜！！肉球だ☆これ素敵！！
実は、昨日丸い形に変えた時に肉球だとかわいいだろうなぁ
って思っていたの。
私の気持ちが届いていたのね！！（笑）うれしい〜♪
番外編も期待してま〜す。
by robinぱぱ (2007-03-11 09:13) 

イェイ！「かほりんスキン教室」続編が更新されていますね。
肉球マークカワイイですね。まさに痒い所に手が届いてるわ。
早速使わせて頂きました♡！ありがとうございます！

前記事のコメントに書いた、「サイドバーのタイトルの頭」の件、
昨夜、寝る前にらめっこして考えていたら、ひらめきました（笑）
なんとかなりそうな感じです。直したらかほりんさんに見てもらわなきゃ！

完成したつもりでも、目に付いてくる場所って増えてきますよね。
だからこそ終わりが無くて面白いのかもしれませんね。
それにしてもかほりんマニュアルは日々進化していてスゴイです＾＾
by yukarin (2007-03-11 09:36) 

＊ robinぱぱさん ＊

ナイス＆コメントありがとうございます！
ままさんの気持ち、届きましたよ〜。(^^)/
やっぱりね、共通カテゴリを「ペット」にしてる以上、肉球は外せないかな〜って思って♪
でも水色の●もアクセントになっててカワイイって思いましたよ。(^^)b
by かほりん (2007-03-11 09:55) 

＊ yukarinさん ＊

ナイス＆コメントありがとうございます！
見ました見ました〜♪
やっぱり肉球カワイイですね。我ながら・・・ですが。(^^)v

「サイドバーのタイトルの頭」の件、上手く出来たら教えてくださいね♪
そのうち「ゆかりん教室」も始まりそうなよ・か・ん！
by かほりん (2007-03-11 10:32) 

こんにちわ♪
肉球～ぜひやってみたいけど・・・
まだ基礎の基礎でーす。
みなさん積極的に頑張られてていい刺激になります。
by miacat (2007-03-11 10:34) 

＊ miacatさん ＊

ナイス＆コメントありがとうございます！
ワンコだけでなく、ニャンコも肉球は必須ですよね！(^^)b
特に今miacatさんのとこでは肉球企画されてますし。ふふふ。
お時間あるときに試してみてください♪
by かほりん (2007-03-11 10:58) 

私、まだ前の記事の方もトライできてないから出遅れてる（＾＾；）
頑張ってみんなに追いつかなきゃ。。。
それにしても肉球なんて、すごい可愛い～♪♪
by モコ (2007-03-11 20:33) 

うわ～
すごい。
どんどん、進化して行ってるよぉ～
でも、肉球マーク。すごくかわいいしgppdです！！！
かほりんさん効果で、みんなどんどんオリジナルにしてるね。
私、ひとり置いてけぼり～（超焦）
いつになることやら・・・・はぅ～
by yukiinu (2007-03-11 22:18) 

さすがかほりんさん！細かいところ完璧ですね♪
私はそういうところがアマイので、ぜひ参考にさせてもらいます♪

ところで今さら過去の記事に書いても迷惑かなと、こちらにコメントごめんなさい<(_ _)>
新しいお洋服！とってもかわいいですね。
特にアディダス＆迷彩好きの私にはたまりません！！
服だけの写真で見るより、フランビー君が着たほうがとってもお洒落ですね。迷彩パンツも賛成です！
by kanamixx (2007-03-12 01:46) 

＊ モコさん ＊

ナイス＆コメントありがとうございます！
肉球はワンニャン飼い主の心をくすぐるようですね。（笑）
モコさんもお時間あるときに是非トライしてみてくださいね！(^^)b
by かほりん (2007-03-12 08:59) 

＊ yukiinuさん ＊

ナイス＆コメントありがとうございます！
肉球、私も思ったよりカワイイなって思って、サンプルではなく正規のブログにつけようかと思ったんですが、このブログには似合わないの。(^^;;
だから皆さんにつけて欲しいわぁ。

ソネブロでは今まで提供してきたスキンにヘッダだけオリジナルに出来る方法を検討中みたいですよ。
オリジナルとしては少し物足りないけど、忙しい方には嬉しいサービスですよね。(^^)b
いつになるのかわかりませんが・・・。
by かほりん (2007-03-12 09:04) 

＊ kanamixxさん ＊

ナイス＆コメントありがとうございます！
大雑把なO型の私ですが、「細かいところ完璧」と言っていただけて、エヘンって感じです。(^^)v

洋服、kanamixxさんの好みでしたか♪
迷彩パンツ、賛成されちゃった。どうしましょ。むふ。（← 悩んでない）
by かほりん (2007-03-12 09:08) 

これはかわいい～♡
すごいです　やってみます！

横で覗いているフランビーくんかわいいです。
by nyoro (2007-03-12 16:30) 

に…肉球が…・・私のブログに♪
かほりんさん、ありがとう！かわいいですよね～。
あ、背景にストライプも入れてみました。
（できなかった原因は画像をブログスキンの編集画面にアップロードして
いなかったからでした。ｆ（＾＾；　お騒がせいたしました。）
この肉球マークって本文タイトルの頭に入れられたらかわいいかなーなんて
思ってるんですけど…。（あぁ！またこんなおねだりを、私ったら）
by バウムクーヘン＠ (2007-03-12 16:59) 

＊ nyoroさん ＊

ナイス＆コメントありがとうございます！
お気に召していただけましたか？(^^)v
お時間のあるとき、やってみてくださ〜い。
nyoroさんのスキンの場合「list-style:none;」になってると思うので、「disc（でもなんでもいい）」に設定する必要があるかもしれないです。
そのときは前レッスンを参考にしてくださ〜い。

ウィンドウをキャプチャしたら「MacBook」の記事のフランビーの写真がチロッと写ったので、消さずに残してみたの。
柱のかげから出てきたみたいでカワイイかな〜って。(^^)
nyoroさんに気付いてもらえて嬉しいです♪
by かほりん (2007-03-12 18:33) 

＊ バウムクーヘン＠さん ＊

ナイス＆コメントありがとうございます！
数種類のリストマークをまた自作しようかと「たぶん番外編に続く」と書きましたが、皆さん肉球で満足されてるみたいなので、続かないかも〜。アハ。
それより、もっと別の部分のステップアップが望まれてるような・・・？（笑）
本文タイトルに肉球か〜。うふふ。
実は計画はしていますが、バウムクーヘン＠さんやyukarinさんところの本文タイトル、色が濃いでしょ〜？
マットの問題で、白っぽくない色のところにどう対応するか、厳しいところなのですよ〜。
・・・お楽しみに！

ストライプ＆肉球、見ました〜♪
最初背景が変更になってることに気付かなかったです。黄色のストライプ、自然な感じでイイですね！
私のグレーのストライプとオソロだし♪♪♪
by かほりん (2007-03-12 18:42) 

「かほりんスキン教室」今何回も読み直してるのよさ
実際いじりながらじゃないとなかなかわからないもんですね
今はパワーないけどいつか必ず挑戦してみたいどす
ん〜〜〜〜〜かわいい・・・・肉球・・・
挑戦し始めたらかえるバージョンも作ってちょん
Mac仲間のよしみっちゅー事でよろしく　あはは
フランピーちょい見えかわいいよ〜
写真の切り抜きマウス？タブレット？じょうずだけどさ〜
マウスだったら根性のかほりんだね〜
フランピーもこもこ大変そうだもん
by けろこ (2007-03-12 19:09) 

＊ けろこさん ＊

コメントありがとうございます！
カエルバージョン？カエルの指って何本かしら〜？（笑）

写真の切り抜きは、根性のマウスだぜ！いぇいっ
モコモコフランビーは大変だけど、テキトーにやっちゃってても上手に見えてるってことかな？
じゃぁタブレットはなくてもいいや♪ららら〜♪
by かほりん (2007-03-12 20:08)