広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

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

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

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

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

text-align

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

右寄せ
<p style="text-align:right"><img src="http://fanblogs.jp/ayzfqir5/file/442/YWdlaGH35g.gif"/></p>

中央合わせ
<p style="text-align:center"><img src="http://fanblogs.jp/ayzfqir5/file/442/YWdlaGH35g.gif"/></p>

左寄せ
<p style="text-align:left"><img src="http://fanblogs.jp/ayzfqir5/file/442/YWdlaGH35g.gif"/></p>

透過画像の背景色

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

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

中央合わせで背景をピンク色
<p style="text-align:center;background:#fef"><img src="http://fanblogs.jp/ayzfqir5/file/442/YWdlaGH35g.gif"/></p>

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

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

中央合わせで背景をピンク色横幅を220ピクセル
<p style="text-align:center;background:#fef;width:220px"><img src="http://fanblogs.jp/ayzfqir5/file/442/YWdlaGH35g.gif"/></p>

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

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

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

marginで中央合わせ、背景をピンク色、横幅を220ピクセル
<p style="margin:0 auto;background:#fef;width:220px;"><img src="http://fanblogs.jp/ayzfqir5/file/442/YWdlaGH35g.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://fanblogs.jp/ayzfqir5/archive/443/0"><img src="http://fanblogs.jp/ayzfqir5/file/442/YWdlaGH35g.gif"/></a></p>

新ブログ「Big Bang」で続きを読む