テーマを変更した時など、WordPressでは大きな変更を加えると、たまにレイアウトがズレてしまうことがあります。
このページでは、WordPressでレイアウトがズレた場合の対処方法を書いていきます。
テーマを変えたらWordPressのレイアウトがズレた
2025/5/3に、サイトのテーマをLuxeritasからCocoonに変更していました。
しばらくレイアウトを調整したり、記事を移植する作業などにかかりっきりになっていました。
ようやく作業が落ち着いた一か月後、何の気なしにスマホで自サイトを見ていたところ、レイアウトがズレているのを発見しました。
ページがズレるのは、スマホで見た場合だけで、パソコンで見た場合はどのページもズレていませんでした。
普段、作業はパソコンで行っているため、不具合に気づくのが遅れてしまいました。
ちなみに、正常なページをスマホで見た場合は、このように表示されます。
他にも色々と見てみると、カテゴリーページもレイアウトがズレていました。
ページの下の方はこのようになっています。
本来、白い背景が付くべきところに、背景が付いていません。
この症状からして、テーマを変更した際に、＜div＞と＜/div＞の数が合わなくなり、どこかのdivタグが閉じなくなってしまったのではないかと思いました。
何となくの原因は分かったものの、問題は、この症状をどう改善するかです。
WordPressは、生成されるhtmlソースを変更するのは難しいですし、ソースコードを見ても、どのdivタグが悪さをしているのかを突き止めるのも大変です．．．
全ページを更新してみる
さらに調べてみると、最近新しく追加したページは、スマホで見てもレイアウトがズレていませんでした。
レイアウトがズレるのは古いページのみです。
また、古いページであっても、最近更新したページは、レイアウトがズレていません。
そこで、ページを更新すれば不具合が治るのでは、と思い、全ページを更新してみました。
個別に編集ページを開いて更新するのではなく、投稿一覧のページで、一括編集を行ってみます。
変更は加えず、ただ「更新」ボタンを押すだけです。
そうして更新したところ、レイアウトがズレていたページも、正常に表示されるようになりました。
良かった良かった。
このまま直し方が分からず、レイアウトがズレたままになったら、どうしようかと思いました。
カテゴリーページも更新
カテゴリーページもレイアウトがズレていたので、個々のカテゴリーも更新していきます。
カテゴリーは一括編集できないので、クイック編集を押し、何も変更せずに「カテゴリーを更新」を押します。
カテゴリーを更新していったところ、カテゴリーページも全て正常に表示されました。
それでも直らない場合は
こういうものは家電と同じで、不具合が出たらまずは更新してみろ、というのが基本のようです。
パソコンに不具合が出たら、再起動をかけ、Wifiのつながりが悪くなったら、Wifiルーターの電源を入れ直してみると、たいていの不具合が解決するのと同じです。
もし、先程のように投稿を更新したり、カテゴリーを更新しても、レイアウトがズレる場合は、更新・保存できるものを片っ端から更新してみましょう。
例えば、ウィジェットとか。
以前、サイト内の全ページで、サイドバーの位置がズレてしまったことがあります。
そのときは、全部のウィジェットの「保存」ボタンを押してみたところ、不具合が解消されました。
困ったら、更新・保存できるものを片っ端から更新・保存してみると、不具合が解消されるかもしれません。
