MS Access Tips/Sample and VBA and Blog customize etc...

jQueryでドロップシャドウ その2

jQueryでドロップシャドウ でドロップシャドウ(グロー)効果をタイトルに付けたのですが、タイトルだけならスクリプトで付けなくても、そのような画像を用意した方がきれいだし、プラウザによる表示の差異もなくていいですね。動的に生成されるテキストなどに使ってこそスクリプトの意味があるわけです。そこで、記事タイトルにドロップシャドウ効果を適用してみました。

しかし、いざ適用させてみると、プラウザによる表示の差異に悩まされました。自分への備忘録も兼ねて、その顛末を報告しておきます。

難易度:

とりあえず設置

まず、FC2ブログの管理画面よりテンプレートの編集で、HTMLとスタイルシートに下記のコードを追加しました。jquery.js dropshadow.js の設置に関しては前回の記事を参考にしてください。

記事タイトル表示部分を<span> ~ </span> で囲みます。当ブログでは、h3要素になってます。

メイン部分の最後か、サイドメニューの前辺りに、dropShadowスクリプトを挿入します。ここでは、<!--/trackback_area-->の後に挿入しました。 headブロック内で、読み込み時のイベントで記述するが簡単なのですが、ページすべての読み込みが完了するまでは実行されないので、この位置に挿入するようにしました。(サイドメニューに重いブログパーツをいっぱい置いておりますので・・・汗)

スタイルシートは、

IE7(Sleipnir)でうまく表示されいるのを確認。
DropShadow01.png

FireFox, Google Chrome で位置がずれる。

さて、念のために、FireFox で確認。微妙に効果の付き方がことなるが問題なさそうと安心したのだか、スクロールさせて下の方のタイトルをみると影が大きくずれている。Google Chrome や IE8(IETEster) で確認しても同様に位置がずれる。
DropShadow02.png

いろいろ、調べてみると、position:relativeを指定した親要素で囲んでやるといいらしい。そこで、このブログでは、h3要素が親になるので、スタイルシートに下記のコードを追加。

正しい位置に表示されるようになった。
DropShadow03.png

今度は IE6 で位置がずれる。

IETester てIE6での表示を確認すると、影が右方向へ少しずれている。
DropShadow04.png

position:relativeを指定する前は正常に表示されていたのでこれが原因と思われる。IE6 は jQueryスライドメニュー再設置 で不具合対策でCSSハックでスライドメニューを非表示にしているのが影響ししているのかもしれない。そこで、しかたがないので、また、CSSハックでIE6には、position:relative が設定されないように変更。

正常位置に表示されるようになった。
DropShadow01.png

IE7 でスムーズスクロールに不具合

これで安心と思っていたら、IE7で、上部のタイトルリストをクリックしてスクロールすると正常位置よりずれた位置に移動する。スルスルっと気持ちよくページスクロール で設置したスクリプトとの相性がよくないようだ。幸い、FireFox等の他のモダンプラウザでは問題なく正しい位置にスクロールするので、またもや、CSSハックで、IE7以下には適用されないように変更。

これでなんとか、プラウザ間の微妙な効果の差以外は、ほぼ不具合無くいけそうだ。しかし、WEBデザインで各プラウザに問題なく対応させるということは大変ですね。早く統一された仕様になって欲しいものです。今回、この記事で記録しておかなかったら、後から見たらなんでこんなcssにしたのか意味不明になりそうですね。


拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/145-a5bd0eb6
該当の記事は見つかりませんでした。