Bangパソコンの電源を入れた時、メモリー空間に無限の宇宙が拡がる透過バナーに好きな背景色をつけるスポンサーリンク今回は、このバナーを題材に、透明画像の背景に色をつける方法。パート派遣主婦のぐーたら子育て生活」です。記事中に登場する、text-alignとmarginについての詳しい説明は、下の参考記事をご覧ください。参考記事:背景画像と重ならない文字配置text-align背景色を気にしないなら、画像の配置はtext-alignで出来ます。今回のバナーは、背景が白く見えていますが、文字、枠、イラスト以外の部分は透明です。白以外の背景の場所に置けばその色で見えます。いうことは、画像を入れているpタグの背景色を指定すればいいと思われます。src=”/dwm/wp-content/uploads/2013/08/442_1.gif”/></p>バナーの左右にまで色がついてしまいました。原因は画像の横幅よりもpタグのエリアの横幅の方が広いからです。この記事で使っているバナーの横幅は220ピクセルです。そこで、pタグのエリアの横幅も220ピクセルに指定します。src=”/dwm/wp-content/uploads/2013/08/442_1.gif”/></p>色は横幅にピッタリ収まりましたが、中央合わせにならなくなりました。text-alignはその枠の中での位置指定です。横幅220ピクセルの場所に220ピクセルの画像を置けばピッタリなので、右寄せも左寄せも中央合わせもできません。寄せるための余った部分がないからです。pタグの外に横幅220ピクセルの余り部分があります。そこで、text-alignではなくmarginを使います。src=”/dwm/wp-content/uploads/2013/08/442_1.gif”/></p>マウスが乗ったときに色を変えるリンクのためのバナーなら、マウスが乗った時に色が変わった方がわかりやすいでしょう。hoverを使って実現します。これ分かりやすい!でも、このバナー、今うちに上がってないよ?あるの、160×40pxのバナーだけ。載せた方が、いい?ま、いっか。あれ?これマウスが乗ったら、じゃなくて常に背景色がつくような記述に見える。17:59あ、記事直ってた。透過画像に背景色を付ける記述ね。00:32あ、色つきもカワイイ~。違う場所の色が変って・・・。それ以来、色変えのリベンジまだしてないや~。ことを、思い出しました。09:25急いで作ってた時思ったんだけど、やっぱり、もうちょっと丁寧に切りぬけばよかったよ。