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

スポンサーリンク

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

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

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

参考記事：背景画像と重ならない文字配置

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タグのエリアの横幅の方が広いからです。

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

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

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

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

しかし、pタグの外に横幅２２０ピクセルの余り部分があります。
そこで、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のバナーだけ。
    載せた方が、いい？

    ま、いっか。

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

    返信

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

    返信

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

    返信

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

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

    返信

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

    返信

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

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

    返信

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

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

    返信

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

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

    返信

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

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

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

    返信

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。