プラグイン

Rinkerのボタン表示が大きい!Lazy Loadとの相性がよくなかった

ようやくAmazonの承認がおりて、Rinkerが使えるようになりました。

半日かけて過去に書いた記事の商品紹介の貼り替えが終わりました。

と、喜んでいたのもつかの間、記事を読み返していたらすごい違和感が・・・。

Rinkerのボタン表示がやたら大きい

何かやらかしてしまいましたか?

超初心者の私は焦りました。

ググって調べましたが、答えにたどり着けませんでした。

 

心当たりがあるとすれば、ここ最近、ブログの高速化に対応しようと、設定を変えたりプラグインを追加していたり。

とにかく、変更したところをたどることにしました。

 

【現象】Rinkerで表示されるボタンがやたら大きい

 

どうみても、アイコンの形が大きいですね。

クリックしやすいように、なんでしょうか。

違いますよね。

全然スマートではありませんね。

 

【PCでの表示】

 

【スマートフォンでの表示】

 

吹き出しも記事によっては、白くなっていたのですが、これは記事単位で修正したら、きちんと表示されるようになりました。

記事をアップしたときはスマートフォンでも確認をするので、どうして消えてしまったのかは、今のところ解決できていません。

また発生するかもと思うと、ちょっと怖いです・・・。

 

XSERVERのmod_pagespeed設定をオフにしてみる

 

エックスサーバーのマニュアルの注意事項に、WEBサイトの表示が崩れることがまれにありますと記載がありました。

オンからオフへ変更してみましたが、表示は大きいままでした。

原因はここではないようです。

mod_pagespeed設定

ファイルを圧縮してデータ転送量を減らしたり、同じ種類のファイルをまとめることによって、ページのロード時間を短縮して、WEBサイトの表示速度を改善します。

ご利用時の注意事項

「mod_pagespeed設定」を有効にすると、最適化処理の影響でメモリ使用量やCPU負荷が若干上昇したり、一部画像ファイルの画質が低下する場合があります。
また、ブラウザやサーバーコンテンツの内容によっては、本機能を有効とした際にWebサイトの表示が崩れるなど、 異なる動作となる場合が稀にあります。その場合、本機能を無効に設定してください。

引用:XSERVERマニュアル

 

プラグインのLazy Loadを停止してみる

 

追加したプラグインは「Lazy Load」でした。

有効化から停止へ変更したところ、ボタンの表示が違和感のない大きさになりました

よく見ると、最終更新は2年前

更新されていないプラグインは注意が必要ですね。

 

 

Lazy Load(レイジーロード)

画像を遅延表示させるプラグインです。

ページを表示した時点では画像を読み込まず、スクロールしてユーザーの見える位置まで来てから画像の読み込みを始めます。

 

ボタンの大きさがきれいになりました

 

【PCでの表示】

 

【スマートフォンでの表示】

最後に

 

プラグインを入れたあとは、必ずサイトを確認しましょう

この文章は何度も読んでいたはずでした。

でも私がチェックしていたのは、文字の表示がおかしくないか、取り込んだ画像がきちんと反映しているか、この2点に気を取られていました。

 

mana
mana
まだまだ甘いですね・・・反省です

 

「Lazy Load」を無効にしたことによって、サイトの表示が遅くなってしまいました。

離脱率を少しでも下げたい私は、同じようなプラグインを探して、導入してみました。

サイトを高速化してくれるWPプラグイン「a3 Lazy Load」の設定方法RINKERというプラグインを使って商品紹介をする際、画面に表示されるボタンの大きさがおかしくなるという不具合が発生し、「Lazy Lo...

 

おかげで気持ちの悪い違和感がなくなり、スッキリしました。

古いプラグインを導入するときは、念入りに確認が必要ですね。

大事なことなのでもういちど言います。

古いプラグインを導入するときは、念入りに確認が必要です!!

自戒をこめて。