【スマホ画面】スクロールするとサイドバーの下部(タグクラウド・最近の投稿・アーカイブ)が透明に重なって表示されてくる・・



  • いつもお世話になります。
    度々質問しご迷惑おかけします・・

    パソコン画面では問題ないのですが、スマホ画面をスクロールすると、サイドバーの下部(タグクラウド・最近の投稿・アーカイブ)が二重に透明に重なって表示されるので、記事がほとんど読めないという症状に悩んでいます。

    これが全部の記事じゃなく、一部の記事で起こっていることだったので、

    1. その記事のすべてのコードを、テキストエディターでコピーして貼り付けしなおし
    2. 外観のカスタマイズで、ウイジェットのサイドバーを管理する画面で、、一度(タグクラウド・最近の投稿・アーカイブ)を削除し、もう一度追加しなおして公開

    上記2つをおこなうと、その透明二重表示はなくなったので、ひとまず安心していました。

    ところが、そのあとにいくつかの記事において、
    「あわせて読みたい」で記事をリンクさせていた箇所を、ブログカードに変更したところ、上記と同じ症状「二重に透明に重なって表示」がまた見られるようになったので、なにか原因は他にあるのかと思い、質問させていただきました。

    また上記1.2を同じように行って、現在はフツーにみられるようになっているはずですが・・
    何か記事を編集するたびに、二重表示が起こるなんてことありますでしょうか?

    1_1559864707397_honeylog記事 スマホスクロールしたときの画面.png 0_1559864707396_honeylog記事 スマホ最初の画面.png

    ※ブログカードにつけなおしをおこなったときは、たまに表示が崩れたりしたので、改行をしてつけ直しブログカード表示はうまくされているはずです。

    ※ブログカードをつけなおす前から、この症状が出ていた記事は、seesaaブログで私が書いていた記事を移行してきたものです。
    でも、その移行記事全部にこの症状が出ていたわけでなく、その中の一部です。

    なにか、アドバイス頂けることがございましたら、教えてくださると幸いです!

    よろしくお願いします!


    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン : WordPress 5.2.1 (jin-child テーマ)
    ご利用のサーバー名 : スターサーバー
    PHPのバージョン : PHP7.2.6
    OS : windows10
    ご利用のブラウザ : chrome
    該当サイトのURL : https://honeytaste.me


  • administrators

    @Jude さん

    いつもお世話になっております。
    りょうたです。

    僕の方でもサイトをスマホから数記事確認いたしましたが表示の崩れは見られませんでした。
    普通はそんなこと起こらないので何かしらの原因はあるかと思います。

    また、誠に勝手ながらpageinsightでスマホの表示速度を確認いたしましたところ、モバイルの数値が「40」とかなり低い数値になっておりました。
    このことからおそらくページの読み込みが遅いため不必要なものまで表示されてしまっている可能性がございます。

    また、キャッシュプラグインの可能性もございますのでautoptimizeのプラグインのキャッシュを削除し、停止した状態で問題が解決するかもご確認いただけますと幸いでございます。
    お手数お掛け致しますが、宜しくお願い致します。



  • お世話になります。

    autoptimizeを止めてみても、この現象は直りませんでした。

    現在

    【海外アラフィフ・出会い】相手は27歳ドクター!ギャップを埋める深い理解【二度惚れ注意】
    https://honeytaste.me/adept-understanding-filling-the-gap/

    この記事は、二重の状態でみえます。
    他の人のスマホで見ても同じ現象です。

    ここで、カスタマイズし直したり、プラグイン全停止をしても一時的には直るのですが、またいつのまにか元に戻ってしまうのです。

    お手数ですが、今一度上記の記事を見ていただけないでしょうか?

    因みにスマホ画面の読み込みスピードが、少し前からガクンと下がったことは知っていたのですが、いろいろためしても変わらず、、
    パソコン画面の読み込みスピードが悪くなければ気にすることはないという記事を読んだことがあったので、放置してました。

    「Pagespeed Insightsがモバイルだけ遅い! 対策は不要です」
    https://www.google.com/amp/s/baacash.com/pagespeed/%3Famp=1

    最悪、サイドバーにタグクラウド、最近の投稿、アーカイブの表示止めればいいのですが、できたら表示はし続けたいなと。

    大変お手数おかけしますが、宜しくお願いいたします。



  • すみません、、
    全ての記事にスマホ二重表示の症状が出てしまったので、プラグインを停止して、表示を正常化してしまいました。
    二重表示の状態を見ていただきたかったのですが、我慢できませんでした・・

    プラグインを一つずつ停止して分かったことは、WP Fastest Cacheを停止すると、表示がなくなったということです。
    でも、またしばらくすると元に戻ってしまうのです。

    また、サイドバーのタグクラウド、最近の投稿、アーカイブ表示を一度削除すると、二重表示はなくなるのですが、また設定を戻すと二重表示が復活してしまう。。

    これは、わたしが見ているスマホのキャッシュが、二重表示がなくなったときのことを、一旦は覚えているけど、またWP Fastest Cacheの影響を受けて、再度二重表示が始まってしまうということなのでしょうか・・

    この繰り返しをずっと続けているのに疲れたので、原因を知りたいのですが・・

    とりあえず、WP Fastest Cacheをやめておいて、しばらく様子をみるしかないのか、また何か方法がありそうでしたら、お教えくださると幸いです!

    お手数おかけいたします。
    よろしくお願いいたします。



  • 度々すみません。

    ご指摘通り、モバイルの読み込み速度が落ちてきていたのは、アドセンス広告を入れるようにしてからと、トップページにピックアップコンテンツを入れるようになったころからだと認識しています。(ただ当初lはLighthouseで測定して、普通の速度だったので問題視はしていなかったのですが)

    とりあえず、アドセンス広告をやめて、ピックアップコンテンツもやめ、キャッシュ系のプラグインを復活させたら、
    PageSpeed Insightsのモバイル速度は55程度
    Test My Siteno表示速度は、4G接続で 1.5 秒普通
    になり、いまのところ二重表示は出ない状態になっています。

    ほんとうは、アドセンス広告も、トップページのピックアップコンテンツも復活させたいのですが、読み込みを速くするように改善してからでないと、また二重表示になってしまうのかもしれない・・
    (アドセンス広告を入れると、PageSpeed Insightsの審査の「オフスクリーン画像の遅延読み込み」などの画像読み込みの項目で、
    https://s0.2mdn.net/simgad/7519710301851354524
    https://s0.2mdn.net/simgad/4058432112286205125
    などhttps://s0.2mdn.netからはじまる、700㎅ほどの大きな画像を測定して、速度が異様に遅くなってしまいます)

    もうすこし良くなる方法を探してみます。

    よろしくお願いいたします。


  • administrators

    @Jude さん

    こんにちは!りょうたです。

    うーん、、ここまで遅くなるのはやはりご指摘の通り、
    画像の大きさが問題かと思います。。

    読み込み遅延のプラグインを導入しつつ、表示させる画像の大きさを変更していくことが重要かもしれません。。
    何かまたご不明点があればおっしゃっていただけレバアドバイスぐらいはできるかと思いますので、
    ご連絡くださいませ。。