[フリー素材] サイドバーのリストアイコン画像(キラキラ) | アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開!

アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開!

カスタマイズ,アクセスアップ,カスタム,スキン,依頼,料金,スキン作成,スキンのデザイン,オリジナル,CSSの編集,HTML,JavaScript,ヘッダー,ヘッダーデザイン,広告,非表示,フリープラグイン,フリースペース,メッセージボード,改造,オリジナルデザイン

サイドメニューのリストマーク(リストアイコン)画像のキラキラバージョンを作りましたキラキラ☆
素材とCSSを使って、ブログをカスタマイズしてみましょう。

リストアイコン(きらきら)
31323334353637

41424344454647

51525354555657

61626364656667


【設置方法】
1リストアイコンの設置(編集)方法は下記をご参照ください。
やじるしサイドバーにリストマークを付ける方法 ※CSS編集不可スキンでもOK


2画像部分のタグは、下記を参考にしてください。

※今回は前回のシンプルバージョンの gif ファイルと違って png ファイルですので、
シンプルバージョンからの書き換えの場合は、お気をつけください。

background-image:url(画像URL);


やじるし 画像URLの部分を下記のURLに変更し、数字部分をお好みの番号に変更する。

background-image:url(http://amemari.cocolog-nifty.com/listIco/listIco31.png);




【おまけ】
素材を使って、ラインを作ってみましょう。






記事の中に下記のコードを挿入してください。
赤文字の数字部分は、上記同様お好きな素材の番号を入れてくださいね。

<div style="background-image:url(http://amemari.cocolog-nifty.com/listIco/listIco31.png);background-repeat:repeat-x;padding-bottom:15px;"></div>




【お願い】
こちらの画像をご使用になる場合は、コメントとして残してくださいねaya
今後の素材制作のためにご使用の番号も書いていただけると助かります。

リンクもフリーなので貼っていただけると嬉しいですハート
やじるしリンクのお願い

お分かりになる方は、素材を持ち帰り、ご自身で管理してください。
画像がいつまであるか責任を負いかねますので。。。汗②


-------------------------------------
追記(2009/11/29)
【IE6での表示の場合】
だるがり~タ☆さんからご指摘いただきました IE6 での表示についてのお詫びです。

PNGの透過データを使用しておりますため、
IE6 での表示の場合は、画像の背景がグレーになってしまいます。
これは IE6 での通常の仕様となります。

画像が細かいため、わざとGIF透過画像を使用せず、PNG透過画像にしております。
IE7 以上、もしくは Firefox では問題ありませんが、あらかじめご了承のうえ、ご使用ください。


by ブログデザイナー@あめまり