Home > ブログ > WordPress プラグインWP-ModoreとIE6、Firefoxへの修正

WordPress プラグインWP-ModoreとIE6、Firefoxへの修正

WordPressロゴ

ども。みなさん、おはようございますw
夢中でブログをいじっていたら、朝になってしまいました。

先日、サイトをリニューアルして以来、細かいところの修正などが残っていました。
そのへんをいじっていたのですが、まぁ~とにかくIE6でひっかかりました><

IE6は無視しようか、とも思ったのですが、うちのサイトではいまでも10~15%くらいの方がIE6のようです。
この数値では、確認を省略するのはなかなか辛いところです。

それはさておき、今回の修正では、いくつか情報も得たので、ここで公開してみたいと思います。



WordPress プラグイン WP-Modore

先日、導入してみましたWP To Topという、ページのTOPへ戻るボタンを作るプラグインなのですが、、、
フィギュアレビューで使用しているテーマでIE6がかなりキビシイ動作をしているのを確認して、使用をやめました。

なんとか、使えそうな気もしたのですが、スクロールバーが2本出たり、画像表示のLightbox2の動作が微妙だったりと影響が結構ありましたので、残念ながら外しました。
他には無いかな~と探していたところ、同じようなプラグインがありましたので、そちらを利用させていただくことにしました。

 link >>  WP-Modore

なんともわかりやすい名前ですが、、、w

試しに導入してみたところ、Firefox2、3.5、IE8、Chrome、Safari4、Opera10でメインページ、フィギュアレビューページともに正常な表示を確認しました。
ただ、残念ながらIE6では、右ではなく下に出てしまうようです。

それでも、ちゃんと機能はするようなので、このまま利用させてもらおうと思いました。
フィギュアレビューページには、いちおうTOPへのページ内リンクも下に入れておきましたがw

ページ内リンクも良いのですが、プラグインを使うと、ちゃんと巻き戻すようにスクロールして戻るのが気持ち良いのです^^

IE6の方には、だいぶ見づらかったのではないかと思います。
申し訳ありませんでした。



IE6の画像リンク枠の表示

これも、気になっていたのですが、フィギュアレビューの写真は、大きい写真へのリンクになっているのですが、その枠が指定した色で表示されていなかったのです。
確認した限りでは、やはりIE6の現象でしたが、、、

どうも、CSSでの指定に工夫が必要なようです。
Firefoxなどでは、、、

a:link {color:#ffffff;}

こんな感じの記述で画像リンクの枠の色が変わります。
ですが、IE6では変わらず、デフォルトの青い枠になってしまいました。

a:link img {border-color:#ffffff;}

こんな感じに『 img 』を付けて、『 border-color 』にすると良いようです。
ただ、なぜか『 a:hover 』がちゃんと反応せず、色が変わりません。

原因がわからず、色々やってみたのですが、残念ながら改善しませんでした。
仕方無いので、パッと見は他のブラウザの見え方に近くなったので良しとしておきました。

また、機会を見て修正してみたいと思います。
今回の修正で、IE6の表示がだいぶ改善できました。



Firefox リンクをクリックしたときに横に伸びる点線

そして、最後は、先にご紹介したWP-Modoreのサイト様の中でリンクにて紹介されていたものです。


firefoxlink.jpg
↑こんな感じに、クリックすると点線がニュッと長く伸びることがあります。
これが、実害は無いのですが、意外と気になるところでした。

 link >>  リンクをクリックしたときに横に伸びる点線を消す方法(Firefox) – IDEA*IDEA ~ 百式管理人のライフハックブログ
(IDEA*IDEA ~ 百式管理人のライフハックブログ 様

上記サイト様にてご紹介のあった方法を試してみました。

a{overflow:hidden;outline:none;}

こんな感じで、CSSに指定したところ、Firefoxで飛び出していた点線が出なくなりました。
IEでは元々出なかったようです。

仕方無いかな、と思いつつ気になっていたところなので、直すことが出来て良かったです。
気になる方は、試してみると良いと思います。

コメント:4

のいぢ 09-10-04 (日) 16:00

どうもですーー>ω<
参考になっていますー!
私もCSS,HTML勉強中でいずれはRioさんみたいなビックなページを作りたいと思っているのです!

Rio 09-10-04 (日) 18:17

コメントどももです^^
少しでも参考になって良かったですw
うちは、見様見真似でチマチマやっているだけですので(/ω\)
ブログいじりもそろそろ一段落な感じですが、また何かあったら記事に書きますね^^

スパ 09-10-04 (日) 23:13

IE6でのテキスト以外のリンクカラーですが,CSSだけでは不可能だった気が。
JS使ってもいいのなら,csshover.htcでググってみてください。
ちなみにうちのサイトでも以前は使っていましたが,移転を機にIE6はあきらめました(^^;

Rio 09-10-05 (月) 14:50

おぉw 情報ありがとうございます\(^o^)/
CSSだけでは、不可でしたか、、、
JSは、あまり使ったことがないのですが、勉強を兼ねてやってみたいと思います^^
IE6は、ホント色々引っ掛かります><
Windows7がXPに代わって普及すれば、IE6も減るのかな~と思ったりします。

コメントフォーム
入力情報を記憶させますか?

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

トラックバック:0

このエントリーのトラックバックURL
http://kimagureman.net/archives/9728/trackback
Listed below are links to weblogs that reference
WordPress プラグインWP-ModoreとIE6、Firefoxへの修正 from Kimagureman! Studio ~趣味全開! 気まぐれ更新日記~

Home > ブログ > WordPress プラグインWP-ModoreとIE6、Firefoxへの修正

ショップ Links
伊賀屋人形店
リンク
Blog Parts
にほんブログ村 ゲームブログ 艦隊これくしょんへ
にほんブログ村 コレクションブログへ
霜月はるかのFrostMoonCafe+
霜月はるかのFrostMoonCafe+
わぷー
ja.wordpress.org 公式キャラクター『わぷー』
ブログを見に来てくれた人たち
フィード

Return to page top

back to top