FlexSlider2で左右のボタンがずれる件

  • test-1
  • test-2

 

株式会社オンラインの金沢です。上のスライダーをご覧下さい。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を指定しなおして現象を再現しました。エラーの再現もまた一興ですな。

金沢

 

Pocket
LINEで送る

著者プロフィール

金沢大樹

2年間のアルバイトを経て、平成27年度より社員として株式会社オンラインでWeb制作をしております。
WordPressを得意としており、プラグイン開発の経験もございます。
また、Monacaを使用したスマートフォンアプリ開発や、Visual BasicによるWindowsアプリケーション開発もできます。

コメントを残す

コメントは管理者による承認後に公開されます。

CAPTCHA