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

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

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

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

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

● WordPress プラグイン　WP-Modore

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

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

 link >>  WP-Modore

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

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

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

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

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のサイト様の中でリンクにて紹介されていたものです。

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

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

a{overflow:hidden;outline:none;}

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

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