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