Fancybox for WordPressを導入する機会があったんですが、retinaディスプレイで確認するとウィンドウを閉じるボタンや影の部分に気になる線が。。。

対策すると同時にこのblogにも入れておきました。単純に別ページが開くだけだったので。

以下、私のとった対応策

閉じるボタン_デフォルト

ほら、ボタンの左に線がある。 この線が四角にあったりするんです。

そもそも元の画像はどうなっているのだろう
プラグインの中を漁ってみると”っぽい”画像があります。

ボタン類画像 元

※真ん中にガイド線をいれてあります。

場所はpluginsディレクトリ内

fancybox-for-wordpress/fancybox/fancybox.png

こいつです。

このファイルを用途によってスタイルで位置を調節して表示させています。

閉じるボタンのスタイル

閉じるボタンの場合、a要素の背景になっていますね。

いろいろ対策はあるとおもうのですが、私は画像を直接手入れしました。

ボタン類画像 元

対応前 ※さっきの画像同様、真ん中にガイド線をいれてあります。

このウィンドウがロードしてるときにでるクルクルの灰色の部分がちょっと見えちゃってるんじゃないでしょうか。

なので、私はこのクルクルを少し小さくしました。

ボタン類画像 変更後

変更後 ※これも真ん中にガイド線をいれてあります。

これで

閉じるボタン 編集後

すっきり!