今回は、私が実際に経験した不具合についての事例を自分のメモの意味も含めて書いていきます。
今回の不具合はWordPressで作っている当ブログサイトが、スマホ表示時に謎にページ全体が横にスクロール出来てしまい、コンテンツ部分が左に寄り、右側に意味の無い余白が出来てしまう不具合です。
私のテーマ、環境、更新方法などを共有しますので当てはまる方や、似たような状態の方は検証する価値があるかも知れませんので、是非参考にしてみて下さい。
状況
私はWordPressでブログを作っており、テーマはルクセリタスというものを使用しています。
つい先日までは、なんの問題も無くページを見れていたのだが、テーマのアップデートを行った際に今回の現象が起きました。
アップデート後、問題が無かったか数ページを確認したら謎に横スクロールバーが存在し、ページ丸々横にスライド出来るようになっていました。そのためコンテンツ部分が左により謎の余白が出来てしまっているのです。
仮説検証
原因はさっぱりなので今回はあらゆる角度から仮説検証から入りました。何かの参考にしてください。（全7種の検証を行いました。）
検証1
アップデートで何かがおかしくなったのは明確でした。
何か不要なCSSが存在し謎にmarginがついているのかな？と思い、デベロッパーツールで片っ端からstyleをOFFにして検証していましたがそれらしいものは全くありませんでした。
検証2
次にテーマのアップの仕方が問題あったのかな？と思い一度全てのテーマを消して、再インストールしました。
だが状況は変わらず
検証3
私の場合、子テーマでの運用なので親テーマに切り替えてみました。
そしたら治ったページもあった！！（よく分からない…）
検証4
子テーマが何か悪いと思ったので、子テーマを完全リセットしました。
それでも状況は変わらず…
検証5
一度テーマから離れ、デベロッパーツールで謎の空白にあるpaddingやmarginを持つ要素を調査。
そしたらライトボックスのクローズボタンとオーバーレイ表示しているボタンがありました。
これらを思い切って削除！！
だが、状況は変わらず…（涙）
検証6
ちょっとまてよ……
今回の現象は、横スクロールされる異常ページとされない正常なページが存在する。
では更新の仕方に問題があるのでは？と冷静になり気づきました…
実際に「テスト」だけのテストページを作成しプレビューしてみたら問題ありませんでした。適当な写真をアップしても問題は無かった。Table、リスト、リンク、広告、これらを追加しても問題無かった。
検証7（原因究明）
ついに見つけました！！
テストページにブログカードを入れてみた。そしたら横スクロールが現れました！！
まぢか！！……
確かにブログカードは全ページにある訳では無い。だから問題あるページと無いページがあるのかと分かりました。
試しに問題のあるページのブログカードを消してみたら治りました。
やった〜！！！
でもブログカードは今までかなりいい仕事をしてくれていたので残したい…
さぁどうしよぅ…
解決策
試行1
原因がブログカードだとわかったのは良いが、ブログカードを何とかして使いたかったのでブログカードのstyleを記述し直してcontents box内に無理矢理押し込んでみた。
でもダメでした。
試行2
ブログカードの設定を弄ってみた。
なんと解決しました！！
ブログカードの『直書きのURLをブログカードにする』の設定をOFFにしたら治りました。
う〜ん…よく分からない…
試行3
試しに使用中のテーマのブログカードを使ってみた。
結果は正常！！
試行4
テーマのブログカードにstyleを記述して見栄えを良くして、全ページのブログカードをテーマのものに変更した。
完全解決！！！
原因
原因はいったい何だったんでしょうか？
それはハッキリ言ってよくわかりません！！
ただその後も調査を少し続けましたところ、どうやらWordPress の Embed 機能が関係しているみたいでした。
Embed 機能をOFFにしたら横スクロールは無くなりました。ただブログカードの見栄えが非常に悪くなり、サムネイルは読み込まれません。
Embed 機能とテーマ（ルクセリタス）の何らかの機能が干渉しあって不具合になったのか？それともEmbed 機能そのものに調整が必要なのか？イマイチ分かりませんでした。
モヤモヤするので何かわかる方がいたらご教示下さい。
以上が「スマホ表示で横スクロールして謎の余白が出来る不具合の解決事例」でした。
webの技術者は何か不具合が起きた場合このようにして仮説検証と試行錯誤を繰り返して調査していきます。
誰かの参考になった部分があれば幸いです。
