【Simplicity2】Simple Colorboxが正しく動作しない不具合

画像がクリックされた時にポップアップで表示するプラグイン「Simple Colorbox」を使用しています。

simple-colorbox1

Simplicity2のCSSの影響で正しく動作しない不具合があったため、その内容と修正方法を記録しておきます。

なお使用しているSimplicity2のバージョンは2.1.0、Simple Colorboxのバージョンは1.6.1です。

こちらはバージョン2.2.1で修正済みです。
Simplicityを2.2.1にバージョンアップしました。 今回の主な変更点は以下。 ボタン拡張クラス追加 続きはWEBで的な検索ボックス拡張をクラス追加 button:activeあたりのスタイルは不要と思い削除(参考ページ)
スポンサーリンク

症状

左下にある画像の切り替えボタンを押そうとするとボタンが移動してしまい、押すことができなくなります。

simple-colorbox2

原因

原因は「simplicity2/style.css」の1243行目あたりの以下のCSSです。

Simple Colorboxではpositionにabsoluteが設定されており、topにはなにも設定されていません。

上記のCSSでボタンが押された際の指定「active」においてtopに1pxが設定されるため、ボタンを押した瞬間にボタンが

に移動してしまいます。

解決策

解決方法は簡単で、topを初期値に戻すように上書きするだけです。

子テーマのstyle.cssなどに記述します。

まとめ

active要素はデバッガーでも探しにくいので、修正に少し時間がかかってしまいました。

同じような症状で困っている方は参考にしてみてください。