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

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

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

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

/* リンクの基本設定 
------------------------------------------------*/
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プラスα表示対策忘備録」に載せときます。

Webstyle #01 がグレードアップしました

今回の大量修正にあたって、Webstyle ＃01シリーズをレベルアップさせました。

このシリーズは無知時代の作品に当たり、今までにもだいぶ修正を重ねてきましたが、今回は徹底的に修正することに決心！
修正を始めたところで、検索ページに出てくるリストでアホをしていたのを発見してぎゃ～っと叫んでしまいましたが（＾＾；）、今度は完璧に修正できたと思います。

まず、トップメニューがあまりにぴらぴらしてイラつくので、リストが出てくるスピードを遅くしました。他のスクリプトに変更すりゃいいのかもしれませんが、メニュー部分はすごく手間がかかるので気力ありません。

次に、コメントフォームのテーブルタグを定義リストに替えました。
最近ではどこでも、フォームが定義リストで作られてるんですよね。

それから、今回はCSSも現在の仕様にレベルアップしています。
なんだか大晦日の大掃除をしたような気分ですが、外からはどこを掃除したのかわからないのがミソ（笑）

しかしそれ以外に、外からはっきりわかる修正が入っています。
最近の作品にはだいたい入っていますが、プラグイン4が記事一覧ページでは記事の上に、プラグイン5が記事詳細ページのでは記事の下に出ます。

これらのプラグインは広告やお知らせを念頭に置いていますが、プラグイン5は他にも使用方法があります。ここのブログにも設置してある、関連記事プラグインなんかを貼りつけるのに最適なんですよね。

ぐっと使いやすくなりましたので、現在Webstyle #01 シリーズをお使いの方は、ぜひアップグレード版をダウンロードしてください。

ブログテンプレートのプライバシーポリシー

少し前に新作を申請した時、忍者側からある指摘を受けました。

私のすべてのテンプレートは、コメント投稿者のメールアドレスがコメントで非表示になるけれど、コメント編集ページにはばっちり載ってしまっていると。
フォームのメールアドレス記入欄に（非公開）と書いてあるのだから、編集ページに投稿者のメールアドレスが出てしまうのは問題だというのが忍者側の見解でした。

これは盲点でしたね。
コメントフォームにメールアドレスを記入する人がほとんどないので、うっかりしていました。
コメント投稿者のプライバシーを守るために、わざわざコメントにアドレスが出ないようにしてあるのに、編集ページにばっちり載ってしまっていたら意味がない。
早速全テンプレートを修正することにしたのですが、そこで疑問が・・・

最近ではどこの会社のサイトでも、ページの下に必ず「プライバシーポリシー」のページへのリンクが貼ってあります。
忍者にも「プライバシーポリシー」があり、サービス利用者の個人情報の秘密を守る旨が書いてあるのに、なぜブログでは誰でも編集ページに入れて、コメント投稿者のメールアドレスが一般に公開されているのだろう？

この質問に忍者側が答えてくれました。
あちらでもそこのところを懸念して、他のブログサービスの状況を調査してみたようです。
この結果の答えとして、いろいろな変更はブログサービスを利用している人たちに大きな混乱を起こすし、ブログ側の仕様として一律に同一の機能を搭載するよりはテンプレート側の自由度を高くしたいという視点から、テンプレート側で対処するように依頼されました。

しかし、ここでどうしても考えてしまいます。
私はブログでの個人情報の秘密保持を優先してテンプレートを作っているけれど、そこまで考えている作者はごくわずかなんじゃない？

そこで、ブログのテンプレート作者さんたちにお願いです。
テンプレートにもプライバシーポリシーを適用しましょう。
コメント投稿者のプライバシーが守れるように、テンプレートで対処しましょう。
スパムコメントにメールアドレスがついていることもあるし、スパム防止にも効果的だと思います。

FC2も忍者と同じで、コメントと編集ページで投稿者のメールアドレスがばっちりわかってしまいます。FC2の作者さんたちにも、ぜひ対応を考えて欲しいです。


作品修正が完了しました
現時点でまだ５点が申請中ですが、全作品の修正が終わりました。
数が多いので、先週に出た他の作者さんたちの新作が４ページ目になってしまった（大汗）
本来ならあるはずの1ページ目のご利益を奪い取ってしまい、まことに申し訳ないです。
大量修正作品の合間に何もこなかったのが、せめてもの慰めですね・・・