透過バナーに好きな背景色をつける

スポンサーリンク


今回は、このバナーを題材に、透明画像の背景に色をつける方法。

バナーの場所は「あげはコーナー | パート派遣主婦のぐーたら子育て生活」です。

記事中に登場する、text-alignmarginについての詳しい説明は、下の参考記事をご覧ください。

text-align

背景色を気にしないなら、画像の配置はtext-alignで出来ます。

右寄せ
<p style=”text-align:right“><img src=”/dwm/wp-content/uploads/2013/08/442_1.gif”/></p>

中央合わせ
<p style=”text-align:center“><img src=”/dwm/wp-content/uploads/2013/08/442_1.gif”/></p>

左寄せ
<p style=”text-align:left“><img src=”/dwm/wp-content/uploads/2013/08/442_1.gif”/></p>

透過画像の背景色

今回のバナーは、背景が白く見えていますが、文字、枠、イラスト以外の部分は透明です。
ですから、白以外の背景の場所に置けばその色で見えます。

ということは、画像を入れているpタグの背景色を指定すればいいと思われます。やってみます。

中央合わせで背景をピンク色
<p style=”text-align:center;background:#fef“><img src=”/dwm/wp-content/uploads/2013/08/442_1.gif”/></p>

バナーの左右にまで色がついてしまいました。
原因は画像の横幅よりもpタグのエリアの横幅の方が広いからです。

この記事で使っているバナーの横幅は220ピクセルです。
そこで、pタグのエリアの横幅も220ピクセルに指定します。

中央合わせで背景をピンク色横幅を220ピクセル
<p style=”text-align:center;background:#fef;width:220px“><img src=”/dwm/wp-content/uploads/2013/08/442_1.gif”/></p>

色は横幅にピッタリ収まりましたが、中央合わせにならなくなりました。

text-alignはその枠の中での位置指定です。横幅220ピクセルの場所に220ピクセルの画像を置けばピッタリなので、右寄せも左寄せも中央合わせもできません。寄せるための余った部分がないからです。

しかし、pタグの外に横幅220ピクセルの余り部分があります。
そこで、text-alignではなくmarginを使います。

marginで中央合わせ、背景をピンク色、横幅を220ピクセル
<p style=”margin:0 auto;background:#fef;width:220px;“><img src=”/dwm/wp-content/uploads/2013/08/442_1.gif”/></p>

マウスが乗ったときに色を変える

リンクのためのバナーなら、マウスが乗った時に色が変わった方がわかりやすいでしょう。
hoverを使って実現します。

マウスが乗った時だけ色を変える
<style type="text/css">
p.sample{
  margin:0 auto;
  background:#fef;
  width:220px;
}
p.sample:hover{
  background:#ffe;
}
p.sample a,p.sample a:hover{
  background:transparent;
}
</style>

<p class="sample"><a href="http://dwm.me/archives/887"><img src="/dwm/wp-content/uploads/2013/08/442_1.gif"/></a></p>


関連コンテンツ

スポンサーリンク

「透過バナーに好きな背景色をつける」への14件のフィードバック

  1. うわー。これ分かりやすい!
    でも、このバナー、今うちに上がってないよ?

    あるの、160×40pxのバナーだけ。
    載せた方が、いい?

    ま、いっか。

    あれ?これマウスが乗ったら、じゃなくて常に背景色がつくような
    記述に見える。私の理解が足りない?

  2. あ、色つきもカワイイ~。
    そういえば、前にブログの背景の色変えようと思ったら、
    全然違う場所の色が変って・・・。
    それ以来、色変えのリベンジまだしてないや~。
    ってことを、思い出しました。

  3. 急いで作ってた時思ったんだけど、
    やっぱり、もうちょっと丁寧に切りぬけば
    よかったよ。お花とちょうちょ。

  4. >やっぱり、もうちょっと丁寧に切りぬけば
    >よかったよ。お花とちょうちょ。

    みんな画像をダウンロードせずに直接リンクしてるんだから
    その画像を変えれば全部変わる。

  5. 先にアップしてある古い画像を削除しないと同じ名前にならない。
    それは名前の後に番号が降られるから。

  6. ええええーそうなんだ。
    YWdlaGH35g.gif
    削除してからアップすると、一緒の名前になるんだ。

    じゃあ、一瞬消えるよね?
    まあ、後日落ち着いたら、やってみる。ありがとう。

  7. 説明しただけだ。
    別にバナーを直せとは言っていない。

    自分で気に入らなければやればいい。

  8. うん。作ったときから、気になってるから
    直したいとは思ってるの。
    でも、今、私の手違いでうっかり名前変わっちゃったら
    Tomに手間をかけちゃうから、今はいいかな、と。

    今度落ち着いてやりたいな、と。

  9. Tomさん、こんばんは
    このバナーに限らず、上の部分を変えるといいんですね

    ただ、マウスが乗った時の変え方は少し長いので難しそうですね

    今回のバナーは、しばらくしたら外す予定なので、
    次に何か使うときに参考にさせてもらいますね

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です