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

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

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

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

/* リンクの基本設定 
------------------------------------------------*/
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で問題が出ないように祈ろう！

Sunday Morning, Sunday Morning 3C

2011年02月01日　配布


プラグイン4とプラグイン5はそれぞれ記事の上と下にあります。
プラグイン4：トップページとそれに続く記事一覧ページで、記事の上に表示されます。
                  広告用に、タイトルはデフォルテで非表示になっています。
                  タイトルを表示させたい場合は、カスタマイズを参照してください。
プラグイン5：詳細記事ページで、記事とコメントフォームの間に表示されます。
                  広告用でタイトルは無しです。


表示確認データはこちらを参照してください。
カテゴリーとアーカイブ、キーワード検索表示ページでは、記事上部に該当記事のリストが表示されます。
「Sunday Morning 3C」は、左にプラグイン1が、右にプラグイン2（折りたたみ式）と3が入っています。
記事の下にランキング用バナー等を設置する箇所があります。バナーや広告を貼り付けたい方はこちらを参照してください。
SEO用です。ブログ管理ページ左側の「便利ツール」にある「検索エンジン登録」をするとSEOの確率が上がります。
コメント投稿者のメールアドレスは表示されません。コメント一覧ページの投稿者名にアドレスのリンクが付きますので、そちらで確認してください。
画像は変更自由です。この場合、ページ最下部の画像著作権者のリンクも変更してください。
素材の加工、他での使用は厳禁です。テンプレートご使用の際には利用規約を一読ください。

ブログパーツおよび広告は、
「Sunday Morning」は、プラグイン4が509px、プラグイン5が529px、他のプラグインは190px以下の物を使用してください。
「Sunday Morning 3C」は、プラグイン4が479px、プラグイン5が499px、他のプラグインは170px以下の物を使用してください。

画像をクリックすると、プレビューが見られます

Sunday Morning


Sunday Morning 3C

春っぽい新作です

大量修正の間に誰かの新作が来ないように祈っていたのですが、ひとつ来てしまいました。
申し訳ないです。
で、大量修正の後に申請した私の新作もお友達になってます。
ひとつだけぽつねんと間にあるよりは、お友達がいたほうが心強いよね？

Webstyle #01 のコメントだけ後で修正したら、一番上に来ちゃいました。
以前に規約だけ修正したらテンプレが移動しなかったので、コメントだけでも移動しないと思ったのだけど・・・
今度から気を付けよう。

さて、日本は日本海側や北が大雪になっていることをNHKワールドが放送していました。
すごい雪で、まるでシベリアみたい（驚）
そんな時に場違いな気はしますが、春っぽい新作です。

影が透過画像なので、これが表示できないIE6は影なしで、上下がくっついています。
トップ画像ですが、右にあるシリアスのグラスの中身は何だろう？と思われた方がいるんじゃないかと思います。
日本ではシリアスにミルクしかかけませんが、ヨーロッパではヨーグルトなんかをシリアスと混ぜることがよくあるんですよね。
だからシリアスが上に乗っかってるんですよ～
例によってこれから新作の詳細記事を書くので、詳細を確認されたい方は少しお待ちください（ぺこり）

今回のテンプレは、リンクにマウスが乗ると背景が薄いピンクになります。
しかし、この仕様にするとリンク画像にもマウスオーバーで背景色がでてしまう。
これですごく苦労しました。
ブラウザによって、背景色の出方が全部違うんだもの（ため息）

そんなに苦労するなら、マウスオーバーの時の背景色をやめりゃあ簡単なんですが、壁が前に立ちはだかると闘志がわくタイプなもので・・・（＾＾；）
それにChristmas #3 も同じ仕様で、こちらの問題もあったので頑張ってみました。

その結果は・・・・・・・・みごとクリア！

この問題で悩んでいる方が多いと思うし、自分でもまた忘れそうなので、後でカテゴリー「IEプラスα表示対策忘備録」に載せときます。