Big Bang

パソコンの電源を入れた時、メモリー空間に無限の宇宙が拡がる

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

| 14件のコメント

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

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

記事中に登場する、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. 心姫さん。これすっごく便利だよ。

    「スタイルシートコンバータ」スクリプト
    指定のスタイルシートを適用したらどうなるかをシミュレートするスクリプト

    上の窓に自分のURL入れて、
    下の窓にCSSコピペするの。
    で、送信すると、CSS変えたページがすぐみられる。

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

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

  7. だって、画像の名前、変わっちゃうじゃん。

  8. 変わらない。
    元の名前が同じなら、必ず同じになる。

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

  10. 同じ名前のものが複数あると、番号がつく。Windowsも同じ。

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

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

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

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

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

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

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

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

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

コメントを残す

Top