株式会社オンラインの金沢です。上のスライダーをご覧下さい。jQueryプラグイン「FlexSlider2」によるスライドショーです。

スライダーの上にマウスカーソルを合わせたときに表れる、「＜」と「＞」のボタンがずれて切れてしまっていることがわかると思います。当ホームページでFlexSliderを使い始めたときに、このような現象が起きてしまい対処に苦戦しました。普通にスライダーを起動させただけでしたので原因はわからず、調べてもなかなか出てこず困惑しました。

ようやくあぶりだした原因は、bodyタグに適応させていたCSSの「line-height: 1.6」でした。ボタンであるaタグ内に生成した擬似要素「::before」の高さが大きくなってしまい、aタグからはみ出しておりました。スライダーのdivに「line-height:1」と指定し直すことで、解決しました。

ちなみに、こちらのページで表示中のスライダーは自作プラグインを用いております。管理画面でFlexSliderを編集でき、ショートコードで表示させれるプラグインです。

※追記 WordPress公式ディレクトリにリリースしました。詳しくはこちら

上記の理由からプラグインが生成するスライダーは、全体のdivタグに「line-height:1」を直書きしてしまっています。従って、この記事内にscriptタグでjQueryを使ってCSSを指定しなおして現象を再現しました。エラーの再現もまた一興ですな。

金沢