ないブログに表示されています。新しい記事を書く事で広告が消えます。|▲Topリンク画像のホバー時にでる背景色を消す方法リンク文字は下線を付けたり、マウスが乗った時に動くようにしたり、背景色を付けたりと、いろいろ装飾することができます。リンクに下線がついているとリンク画像にも下線が出てしまったりしますが、こういう問題はあちこちで指定の仕方が書かれているので、ちょっと検索するだけで解決します。リンク画像のホバー時の背景色を消す方法はどこにも書いてありませんでした。これは、リンクにマウスが乗った時に背景色が出るように指定していると、リンク画像にもマウスオーバーで背景色が出てしまうという問題です。そこで今回は、この問題の解決策をご紹介します。リンクと画像の基本指定は下の通りです。none;}一番上で、リンクに下線が出ないように指定しています。ホバー時に背景色が出る指定ですが、これはリンク文字とリンク画像両方に継承されるので、このままだとリンク画像にマウスが乗った時にマージンの部分に背景色が出てしまします。transparent;を加えて背景色を透明にしてみましたが、背景色は見えたまま。それならと、背景色をブロックの背景色と同じ白色にしてみると余白部分はバックと同じ色になったのですが、他の問題が出てきました。IE6とIE7は背景色の指定だけでOKになったのですが、他のブラウザだと画像の下に背景色が線のように見えてしまうんですねえ。そこで、モダンブラウザだけ画像を下のほうに動かしてみました。IE8だけまだ下に移動しないといけないようだったので、IE8だけ別指定で画像をもっと下に動かしました。IE6とIE7には画像の回り込みバグがあるので、画像がどんな配置になるかわからないブログのテンプレートには指定してはいけないんですね。背景色をブロックの背景と合わせ、画像の位置をずらすことで、リンク画像にマウスが乗ってもリンク文字に指定した背景色が現れなくなりましたが、自分のブログで実験しているときにおかしなことに気が付きました。マウスを画像に載せたときに、背景色が出ないものと出るものが出てきたんです。不思議に思ってソースを確かめると、背景色が出ない画像と背景色が出る画像の書き方に違いがあるのに気が付きました。/></a>HTMLを行に分けて書くと、aタグとimgタグの間に半角のスペースができるのが原因のようです。これは自分で調整できるからいいとして、もう一つ頭を悩ませた問題があります。ブログのプラグインとして出てくる、携帯用のバーコードです。他の画像は上の指定ですべてOKになったのですが、ユーザー側では変更がまったくできないバーコードには、しっかりと背景色がついてしまう。そこでバーコードの余白を内外ともなくしたところ、IE6とIE7以外は背景色がなくなりました。最後まで背景色が見えてしまうIE6とIE7は、仕方ないのでごり押しすることにしました。下は、忍者ブログのプラグインに入っているバーコード用の指定です。3px;}IE6とIE7でバーコードの背景色を消すために無理やりな指定をしてますが、一応きれいに消えてくれました。向こうから勝手に出てくる画像は苦労しますね。|▲Top半透明フィルターあるブロックを半透明にしたい場合、IE独自仕様のアルファフィルターと、CSS3に入っているフィルターを両方指定すればできます。CSS2で検査されていますが、主なブラウザはすでにCSS3に対応しているので、CSS2に規定されていないopacityを指定しても読み取ってくれる。#FFF;filter:alpha(opacity=75);opacity:0.75;IEのアルファフィルターは、真ん中のfilter:alpha(opacity=75);の部分で、これは不透明度75%になります。IEの半透明フィルターが半透明にならない他のブラウザのCSS3への対応のおかげで、レイヤーを半透明にするのも楽になりましたが、例によってIEでは、これだけでは半透明になってくれません。hasLayoutの値をtrueにする指定を一緒に書き込んでやらなくちゃいけない。hasLayioutについては、colissさんのサイトで説明されていますのでそちらで見てください。colissさんの受け売りではありますが、どのような指定をすればいいかを下に書いてあります。right;position:absolute;writing-mode:tb-rl;zoom:任意の値;高さや幅が指定できない場合、この中で一番使いやすいのはzoomです。一緒に指定してやれば、ぱっと半透明になってくれます。上にくる画像が透明になってしまうしかし、半透明にしたブロックをよく見ると、その上にくる画像も半透明になってしまっています。透明度が高ければ高いほど、画像も透き通ってしまって、これでは見づらいこと甚だしい。これを回避する方法を今まで知らなかったのですが、偶然見つけました。半透明にしたレイヤー(親要素)の上にくる次のレイヤー(子要素)のCSSの中に、文字や画像を不透明にする指定を書き込みます。position:relative;これで、半透明になったブロックの上に文字や画像が来ても、透き通らずにきれいに表示されます。これはIEだけに有効のようで、CSS3の半透明フィルターには効きませんでした。解決策をどこかで見つけたら、メモすることにします。IE以外の半透明フィルターで出た問題プラグイン全体ではなく、それぞれのブロックに半透明フィルターをかけたところ、大きな問題が出ました。それぞれのプラグインの中に納まるものはOKなのですが、カウンターで撃沈してしまった。マウスをカウンターの上に持っていくと下にレイヤーが出てきますが、このレイヤーが次のプラグインの下に潜り込んでしまう。試しに上のpositionを指定してみたり、レイヤーの順番を変えるz-indexを指定してみたけど、どれも効果はなし。う~ん、と唸りながらあちこちを探し回ったけれど、解決策にはぶち当たらなかった。仕方ないので、この問題の解決策としてPNGの半透明画像を使うことにしました。これなら上にくる画像が透明になることもないし、カウンターのレイヤーも下に潜らない。IE6は半透明PNGには対応していないので、IE6だけ半透明フィルターを指定することでIEの問題もするりと回避。見た目ではフィルターなのか画像なのかわからないから、まあいいや。バグ(?)今日は「:first-letter」について忘備録を書きます。これは、見出しや文章の最初の文字を大きくしたり、他の色にできる疑似要素です。}主要なブラウザはこれに対応しているので表示にはまったく問題はありませんが、IE6ではこれに関するバグ(?)があるそうです。{プロパティ:値}という書き方をします。}など、間を空けたり詰めたりして書きますが、普通は表示に影響を与えるものではありません。ところが、IE6ではそれが影響するようなのです。問題になったCSSの書き方は、セレクタ{プロパティ:値}。指定が無視されるそうです。これも指定が無視されて、文字に変化が見られなかった。問題の回避セレクタと{}の間を空けて書く。}と書かないと、IE6はちゃんと実行してくれません。IE7はどんな書き方をしてもOKなのに、まったくIE6ときたら・・・・・・(ため息)いつも詰めて書いている人も、「:first-letter」を使うときは、そこだけでもセレクタと{}の間を空けて書くように注意しましょう。|▲TopIE6とIE7の画像回り込みバグ大抵の有名なIEのバグは勉強したつもりだったのに、知らないバグにぶち当たったのでメモしておくことにしました。今回は、自分で失敗したバグのメモです。/>と指定すると、文字を画像の横に回り込ませることができます。ところがIE6とIE7では、画像のCSSにvertical-alignが指定されていると、回り込みが無効になってしまいます。値はtopでもmiddleでもbottomでも同じで、画像横に上から表示されるはずの文章が、真ん中に一行だけしか表示されません。IE8を含む他のモダンブラウザでは問題なく正常に表示されるし、ブログで画像の回り込み機能を使う人は少ないようなのでバグに気がつかないことが多いですが、IE6とIE7使用の読者から画像の回り込みがおかしく見えると報告があった場合は、使用しているテンプレートのCSS指定が原因である可能性が大です。画像の基本指定に下記のような指定がないかどうか調べます。この指定は、よくCSSの上部にあります。この指定を削除すると、画像の横に回りこむ文章は正常に表示されるようになります。指定をする必要があります。自己紹介:地球の裏側からテンプレートを送りつけています。ただいま進化中なので、勉強慾旺盛です。いつかばっちりなテンプレートを作るのが夢。コンタクト何かありましたら下記のメールフォームをご利用ください。返信をご希望の方はメールアドレスもご記入ください。komomo]ご無沙汰してます。Chromeをご使用の皆さんへ(4)IEプラスαの表示対策忘備録(4)工房(85)未選択(5)IT部門関係の話題(6)このブログへのリンク(1)このブログへのリンクこのブログをリンクしてくださる方用に、バナーを用意しました。詳しくはカテゴリー「このブログへのリンク」をお読みくださいFirefoxを支援しています管理人はFirefoxの愛好者です。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。