いつの間にか、画像をクリックすると二重表示されるようになっていたこのサイト。
原因を探っていくと、JavaScript縮小化設定とプラグインの2つが原因であることが分かりました。
今回は、画像の二重表示の解決方法をご紹介します。
画像が二重に表示される
画像をクリックすると下のように二重表示されるようになりました。
画像を閉じるには×を二回押さなければなりません。今までは一回で閉じれてたのに…。
始めはCocoonのアップデートが原因か？と思いましたが、アップデート内容にそれらしきものはなく。
ちょっと前まで普通に表示されていたということは、最近変更した設定が原因じゃないかと推測しました。
原因①「JavaScript縮小化」設定
つい最近いじった設定といえば、Cocoon設定内にある「JavaScript縮小化」。
当サイトでは11月頃から、行数表示がされるシンタックスハイライター「Highlighting Code Block」というプラグインを使っています。
（行数表示は必要不可欠…。）
しかし、このプラグインをそのまま有効化しても、Cocoon側のハイライターが優先され行数表示がされないので、設定を変更しました。
「Cocoon設定」→「高速化」→「JavaScriptを縮小化する」のチェックを外しています。
チェックを入れ直すと二重表示は解消されました。
なので、この設定をいじったことが二重表示の一番の要因ですね。
もちろん、このプラグインを使い続けたいので、「JavaScriptを縮小化する」設定のチェックは外したままにしておきます。
原因②画像拡大表示プラグインの有効化
そもそもの話、なぜ二重表示になったのかというと、「Easy FancyBox」という画像拡大表示プラグインをインストールし、有効化していました。
Cocoonには画像拡大表示機能が標準で備わっているので、今となってはもう必要のないプラグインなのですが、このプラグインとCocoonの機能が重複し、二重表示になったのでした。
ではお役御免ということで、プラグインを思い切って削除しましょう。
「プラグイン」→「インストール済みプラグイン」→「Easy FancyBox」の停止→削除。
改めてサイトを確認すると、
無事に二重表示が解消されました！
まとめ
今回は、画像が二重表示になった場合の解決方法をご紹介しました。
根本的な原因は、テーマ側に画像拡大表示機能があるにも関わらず、同じ機能を持つプラグインを有効化したままにしていたことでした。
今回のことがなかったら、たぶんずっと気付かずに不要なプラグインを有効化したままだったので気付けて良かったです(笑)
プラグインの削除はサイトの軽量化にもなりますし、定期的にプラグインを見直していこうと思いました。
コメント