素材とCSSを使って、ブログをカスタマイズしてみましょう。
|
【設置方法】
リストアイコンの設置(編集)方法は下記をご参照ください。
サイドバーにリストマークを付ける方法 ※CSS編集不可スキンでもOK
画像部分のタグは、下記を参考にしてください。
※今回は前回のシンプルバージョンの 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>
【お願い】
こちらの画像をご使用になる場合は、コメントとして残してくださいね
今後の素材制作のためにご使用の番号も書いていただけると助かります。
リンクもフリーなので貼っていただけると嬉しいです
リンクのお願い
お分かりになる方は、素材を持ち帰り、ご自身で管理してください。
画像がいつまであるか責任を負いかねますので。。。
-------------------------------------
追記(2009/11/29)
【IE6での表示の場合】
だるがり~タ☆さんからご指摘いただきました IE6 での表示についてのお詫びです。
PNGの透過データを使用しておりますため、
IE6 での表示の場合は、画像の背景がグレーになってしまいます。
これは IE6 での通常の仕様となります。
画像が細かいため、わざとGIF透過画像を使用せず、PNG透過画像にしております。
IE7 以上、もしくは Firefox では問題ありませんが、あらかじめご了承のうえ、ご使用ください。
by ブログデザイナー@あめまり