リンク画像のホバー時にでる背景色を消す方法

リンク文字は下線を付けたり、マウスが乗った時に動くようにしたり、背景色を付けたりと、いろいろ装飾することができます。
リンクに下線がついているとリンク画像にも下線が出てしまったりしますが、こういう問題はあちこちで指定の仕方が書かれているので、ちょっと検索するだけで解決します。

しかし、リンク画像のホバー時の背景色を消す方法はどこにも書いてありませんでした。
これは、リンクにマウスが乗った時に背景色が出るように指定していると、リンク画像にもマウスオーバーで背景色が出てしまうという問題です。
そこで今回は、この問題の解決策をご紹介します。

リンクと画像の基本指定は下の通りです。

/* リンクの基本設定 
------------------------------------------------*/
a { text-decoration: none; }

/* 通常のリンク */
a:link { color: #BB5282; }

/* 訪問したリンク */
a:visited { color: #BB5282; }

/* マウスが乗ったときのリンク */
a:hover { background-color: #FCE1ED; }

/* マウスをクリックしたときのリンク */
a:active { color: #D1272F; }

/* 画像の基本指定 
-----------------------------------------------*/
img {
	margin: 2px;
	border: none;
}

一番上で、リンクに下線が出ないように指定しています。
ホバー時に背景色が出る指定ですが、これはリンク文字とリンク画像両方に継承されるので、このままだとリンク画像にマウスが乗った時にマージンの部分に背景色が出てしまします。

そこで、画像の外余白のmarginを内余白のpaddingに変更し、上の指定にbackground-color: transparent;を加えて背景色を透明にしてみましたが、背景色は見えたまま。
それならと、背景色をブロックの背景色と同じ白色にしてみると余白部分はバックと同じ色になったのですが、他の問題が出てきました。

なぜかIE6とIE7は背景色の指定だけでOKになったのですが、他のブラウザだと画像の下に背景色が線のように見えてしまうんですねえ。
そこで、モダンブラウザだけ画像を下のほうに動かしてみました。
が、IE8だけまだ下に移動しないといけないようだったので、IE8だけ別指定で画像をもっと下に動かしました。

img {
	padding: 2px;
	border: none;
}

a img:hover { background-color: #FFF; }

/* IE6 */
* html a img { background-color: #FFF; }

/* Firefox, Opera, Google Chrome, Safari */
html>/**/body a img { vertical-align: text-bottom; }

/* IE8 */
html>/**/body a img { vertical-align /*\**/: bottom\9; }

ここで気を付けないといけないのは、IE6とIE7では画像にvertical-align を指定しないこと。IE6とIE7には画像の回り込みバグがあるので、画像がどんな配置になるかわからないブログのテンプレートには指定してはいけないんですね。

さて、背景色をブロックの背景と合わせ、画像の位置をずらすことで、リンク画像にマウスが乗ってもリンク文字に指定した背景色が現れなくなりましたが、自分のブログで実験しているときにおかしなことに気が付きました。
マウスを画像に載せたときに、背景色が出ないものと出るものが出てきたんです。

不思議に思ってソースを確かめると、背景色が出ない画像と背景色が出る画像の書き方に違いがあるのに気が付きました。

/* 背景色が出ない画像 */
<a href="#"><img alt="" src="/abc.jpg" /></a>

/* 背景色の出る画像 */
<a href="#">
<img alt="" src="/abc.jpg" />
</a>

HTMLを行に分けて書くと、aタグとimgタグの間に半角のスペースができるのが原因のようです。これは自分で調整できるからいいとして、もう一つ頭を悩ませた問題があります。
ブログのプラグインとして出てくる、携帯用のバーコードです。

他の画像は上の指定ですべてOKになったのですが、ユーザー側では変更がまったくできないバーコードには、しっかりと背景色がついてしまう。
そこでバーコードの余白を内外ともなくしたところ、IE6とIE7以外は背景色がなくなりました。
最後まで背景色が見えてしまうIE6とIE7は、仕方ないのでごり押しすることにしました。
下は、忍者ブログのプラグインに入っているバーコード用の指定です。

div.qrcode_image a img {
	margin: 0;
	padding: 0;
}

/* IE6 */
* html div.qrcode_image a:hover img {
	margin-right: -4px;
	margin-bottom: -3px;
	padding-right: 4px;
	padding-bottom: 3px;
}
	
/* IE7 */
*:first-child+html div.qrcode_image img:hover {
	margin-right: -4px;
	margin-bottom: -3px;
	padding-right: 4px;
	padding-bottom: 3px;
}

IE6とIE7でバーコードの背景色を消すために無理やりな指定をしてますが、一応きれいに消えてくれました。
向こうから勝手に出てくる画像は苦労しますね。
RC版が公開されたIE9で問題が出ないように祈ろう！

半透明フィルター

あるブロックを半透明にしたい場合、IE独自仕様のアルファフィルターと、CSS3に入っているフィルターを両方指定すればできます。
現在のW3CのCSS Varidater はCSS2で検査されていますが、主なブラウザはすでにCSS3に対応しているので、CSS2に規定されていないopacityを指定しても読み取ってくれる。
例： background-color: #FFF;
      filter:alpha(opacity=75);
      opacity:0.75;
IEのアルファフィルターは、真ん中のfilter:alpha(opacity=75);の部分で、これは不透明度75％になります。

IEの半透明フィルターが半透明にならない

他のブラウザのCSS3への対応のおかげで、レイヤーを半透明にするのも楽になりましたが、例によってIEでは、これだけでは半透明になってくれません。
hasLayoutの値をtrueにする指定を一緒に書き込んでやらなくちゃいけない。

hasLayioutについては、colissさんのサイトで説明されていますのでそちらで見てください。
colissさんの受け売りではありますが、どのような指定をすればいいかを下に書いてあります。

• display:inline-block;
• height:実際の値;
• width:実際の値;
• float:left または right;
• position:absolute;
• writing-mode:tb-rl;
• zoom:任意の値;

高さや幅が指定できない場合、この中で一番使いやすいのはzoomです。
なので、IE対策ではよくzoom:1 が使われます。
半透明フィルターも、このzoom:1 を一緒に指定してやれば、ぱっと半透明になってくれます。

上にくる画像が透明になってしまう

しかし、半透明にしたブロックをよく見ると、その上にくる画像も半透明になってしまっています。
透明度が高ければ高いほど、画像も透き通ってしまって、これでは見づらいこと甚だしい。
これを回避する方法を今まで知らなかったのですが、偶然見つけました。

IEは問題解決
半透明にしたレイヤー（親要素）の上にくる次のレイヤー（子要素）のCSSの中に、文字や画像を不透明にする指定を書き込みます。

position:relative;

これで、半透明になったブロックの上に文字や画像が来ても、透き通らずにきれいに表示されます。
ただ、これはIEだけに有効のようで、CSS3の半透明フィルターには効きませんでした。
また解決策をどこかで見つけたら、メモすることにします。

IE以外の半透明フィルターで出た問題

プラグイン全体ではなく、それぞれのブロックに半透明フィルターをかけたところ、大きな問題が出ました。
それぞれのプラグインの中に納まるものはOKなのですが、カウンターで撃沈してしまった。
マウスをカウンターの上に持っていくと下にレイヤーが出てきますが、このレイヤーが次のプラグインの下に潜り込んでしまう。
試しに上のpositionを指定してみたり、レイヤーの順番を変えるz-indexを指定してみたけど、どれも効果はなし。
う～ん、と唸りながらあちこちを探し回ったけれど、解決策にはぶち当たらなかった。

仕方ないので、この問題の解決策としてPNGの半透明画像を使うことにしました。
これなら上にくる画像が透明になることもないし、カウンターのレイヤーも下に潜らない。
IE6は半透明PNGには対応していないので、IE6だけ半透明フィルターを指定することでIEの問題もするりと回避。
見た目ではフィルターなのか画像なのかわからないから、まあいいや。

IE6の：first-letter バグ（？）

今日は「：first-letter」について忘備録を書きます。
これは、見出しや文章の最初の文字を大きくしたり、他の色にできる疑似要素です。
例：#TopTitle:first-letter { color:#000; }
主要なブラウザはこれに対応しているので表示にはまったく問題はありませんが、IE6ではこれに関するバグ（？）があるそうです。

IE6の疑似要素バグ（？）

CSSは、セレクタ　｛プロパティ：値｝という書き方をします。
人によっては、セレクタ｛プロパティ：値｝や、セレクタ　｛　プロパティ：値　｝など、間を空けたり詰めたりして書きますが、普通は表示に影響を与えるものではありません。
ところが、IE6ではそれが影響するようなのです。

問題になったCSSの書き方は、セレクタ｛プロパティ：値｝。
この書き方だと、疑似要素の：first-letter の指定が無視されるそうです。
そこで、私はセレクタ｛　プロパティ：値　｝で試してみました。
これも指定が無視されて、文字に変化が見られなかった。

問題の回避

セレクタと｛｝の間を空けて書く。
CSSの指定は、セレクタ　｛プロパティ：値｝かセレクタ　｛　プロパティ：値　｝と書かないと、IE6はちゃんと実行してくれません。
IE7はどんな書き方をしてもOKなのに、まったくIE6ときたら・・・・・・（ため息）
いつも詰めて書いている人も、「：first-letter」を使うときは、そこだけでもセレクタと｛｝の間を空けて書くように注意しましょう。

IE6とIE7の画像回り込みバグ

大抵の有名なIEのバグは勉強したつもりだったのに、知らないバグにぶち当たったのでメモしておくことにしました。
今回は、自分で失敗したバグのメモです。

画像の回り込みバグ（IE6とIE7)

画像にalign属性で
<img align="left" />　や　<img align="right" />
と指定すると、文字を画像の横に回り込ませることができます。
ところがIE6とIE7では、画像のCSSにvertical-alignが指定されていると、回り込みが無効になってしまいます。値はtopでもmiddleでもbottomでも同じで、画像横に上から表示されるはずの文章が、真ん中に一行だけしか表示されません。

IE8を含む他のモダンブラウザでは問題なく正常に表示されるし、ブログで画像の回り込み機能を使う人は少ないようなのでバグに気がつかないことが多いですが、IE6とIE7使用の読者から画像の回り込みがおかしく見えると報告があった場合は、使用しているテンプレートのCSS指定が原因である可能性が大です。

バグの回避

画像の基本指定に下記のような指定がないかどうか調べます。
この指定は、よくCSSの上部にあります。

img { vertical-align: middle; }　または
img { vertical-align: baseline; }　など

この指定を削除すると、画像の横に回りこむ文章は正常に表示されるようになります。
もしこの処理でテンプレートに使用されている画像や記事内の画像（たとえば拍手とか）がずれる場合は、その部分にだけvertical-align の指定をする必要があります。