スマホで閲覧したとき、サイトデザインが崩れる
-
いつもお世話になります。
スマホでサイトを表示した場合、サイトのデザインが崩れて表示されるため、対処方法を教えていただきたいです。
プラグインは全て停止させて、一つ一つ有効化しながら、サイトを確認しましたが、問題を解決できませんでした。関係があるかはわかりませんが、サイトデザインが崩れることを確認する少し前に、プラグインでエラーの表示がありました。
こちらのエラーは、いまだ解決しておりません。【エラー表示されているプラグインの名称】
UpdraftPlus Backup/Restore
【エラー内容】
警告: 現在の WordPress のインストールに、余分な空白を出力する問題があります。これは、ここからダウンロードしたバックアップを破損させる可能性があります。それと同時に、スマホでサイトにアクセスしたときに、サイトを表示できません。というエラーも起こりました。
このエラーに関しては、プラグインを停止してひとつひとつ確認したところ、キャッシュ系プラグインWP Super Cacheが原因と判明したため、無効化して削除しました。
この処置をしたことで、サイトが表示されないエラーは解決しましたが、次はサイトデザインが崩れるという状態になりました。また、問題箇所のスクショを添付しておりますが、このデザイン崩れで表示されるのは、トップページです。
トップページ以外の画面では、コンテンツの終わりからフッター部分の間に、とても長いスペースが表示されるというデザイン崩れを起こします。以前もこちらのフォームで、ヘッダーデザインが崩れるという問い合わせをしたことがありますが、WP Super Cacheの設定を変えることで、解決していたので、本当はWP Super Cacheを導入しておきたいところです。
なぜ、突然スマホでアクセスできないエラーが起こったのかが全くわかりません。長文になってしまい、申し訳ありません。
お忙しいところ恐れ入りますが、ご確認の上ご連絡いただけますようお願い申し上げます。
【追記】
インターネットで情報収集したところ、ブラウザのキャッシュ?クッキー?を削除すると解決したという記事を見つけました。
ブラウザの履歴を全て削除したところ、添付した写真のデザイン崩れはなくなりました。ですが、トップページ以外のコンテンツ～フッターにかけての空白は表示されたままです。
UpdraftPlus Backup/Restoreの警告の問題がいまだ解決できません。
このエラーと関係があるように思われます。マニュアル確認済み
キャッシュクリア済み
プラグイン全停止済み
WordPressのバージョン : 最新
ご利用のサーバー名 : コノハ
PHPのバージョン : 7.4
OS : windows10
ご利用のブラウザ : Google
該当サイトのURL : https://ninja-chinese-restaurant.com/
-
@忍者 さん
こんにちは！
スクショと詳細のご共有ありがとうございます！追記も確認させていただきましたが、
空白については、UpdraftPlus の影響では無いかもしれません。こちらのトピックで扱っている症状かと思われます。。。
https://jin-forum.jp/topic/4343/rich-table-of-contentsのアプデ後-コンテンツとフッター間に大きな余白がでる
⠀
⠀
1点確認させていただきたいのですが、
functions.php を用いたカスタマイズなど行なっていますか？？お手数おかけしますが、よろしくお願いいたします！
-
@tsu_ さん
ご返信感謝いたします。
送っていただいた記事を確認し、さっそく検証してみました。
→この記事どおりのことが起きている状況です。
「Rich Table of Contents」は使用しない方が良いということでしょうか。
この場合、目次はどのように表示させるべきでしょうか。
また、「Rich Table of Contents」を無効化したことで、UpdraftPlus Backup/Restoreの警告表示も消えました。
有効化すると、再び警告が表示されます。functionPHPのカスタマイズは行なっておりません。
よろしくお願いいたします。
-
@忍者 さん
ご連絡ありがとうございます！
functionPHPのカスタマイズは行なっておりません。
こちら承知いたしました。
Rich Table of Contents のアップデート後も変化は無さそうでしょうか？？
（現在の最新は バージョン 1.3.3 です）お手数おかけしますが、ご確認よろしくお願いいたします。
-
@tsu_ さん
プラグインのアップデートありがとうございます。ですが、コンテンツとフッターの間の余白が消えません。
UpdraftPlus Backup/Restoreの警告表示は消えました。よろしくお願いいたします。
-
全て解決したと思ったのですが、空白はいまだ表示されています。
-
トップページのデザイン崩れはおさまりましたが、今度はお問い合わせページなど、他のページでデザイン崩れが起きています。
問題箇所のスクショを添付しておきますので、ご確認よろしくお願いいたします。再度、ブラウザの履歴を削除してもおさまりません。
-
@忍者 さん
ご連絡ありがとうございます。
念の為、以下の内容を確認させていただけますと幸いです。。
⠀●各種キャッシュ（ブラウザ・プラグイン・サーバー）を削除しても症状が出る
⠀●Rich Table of Contents のみを有効化した状態でも症状が出る
⠀●Rich Table of Contents を無効化すると症状が治る度々お手数おかけして申し訳ありませんが、よろしくお願いいたします。
-
@tsu_ さん
ご連絡ありがとうございます。検証結果をお伝えいたします。
①各種キャッシュを削除してからの症状
→ブラウザの履歴削除、プラグインでのキャッシュ削除、サーバーでのキャッシュ削除を全て実施してからも、問題箇所の症状が出ていました。②Rich Table of Contents のみを有効化した状態でも症状が出る
→その他のプラグインを全て無効化した状態で問題箇所を確認したところ、症状が出ていました。③Rich Table of Contents を無効化すると症状が治る
→Rich Table of Contents のみ無効化すると、症状がおさまりました。現状、Rich Table of Contents のみ無効化した状態に設定しています。
よろしくお願いいたします。
-
@忍者 さん
詳しい検証結果ありがとうございます！
現在、お伝えいただいている症状に対しての
修正アップデートの準備を進めております。ご不便、ご面倒おかけして申し訳ありませんが、
もうしばらくお待ちいただけましたら幸いです。よろしくお願いいたします。
-
@忍者 さん
度々申し訳ありません。。
RTOC バージョン 1.3.4 がご利用いただけるようになりましたので、
アップデートをして症状が改善されるかご確認いただけますと幸いです。お手数おかけしますが、よろしくお願いいたします。
-
@tsu_ さん
プラグインのアップデートありがとうございます。
スマホで確認したところ、問題箇所の症状は改善されているように思います。
ですが、今度はパソコンでお問い合わせページを表示させたときに、デザイン崩れが起きています。
(フッターとサイドバーウィジェットのデザインが重なって表示されました。)スマホでも、問題箇所以外で症状が出ていないか、少し様子を見たいです。
念のため、パソコン表示での問題箇所のスクショを添付しておきます。
よろしくお願いします。
-
@忍者 さん
ご連絡ありがとうございます！
ですが、今度はパソコンでお問い合わせページを表示させたときに、デザイン崩れが起きています。
1つ検証してみていただきたいのですが、RTOC設定で
以下のようにして変化があるかご確認いただけますか？？
お手数おかけして申し訳ありませんが、よろしくお願いいたします！
