普段はWebサービスの会社で働いているので、バグを見つけるのが割りと得意な坂口です。
このブログはSimplicity2のテンプレートを使用してます。
先日、初めてこのブログのデザインをブラッシュアップしよう！と頑張ってたんですね。
んで、色々いじっている時に、下図のような現象が起きました。
スマホで見た時に、右側に謎の空白が出る……。
で、「Simplicity2 スマホ 右側 空白」とかでググってみたら下記のように出てきたんですね。
mobile.cssにoverflow: hidden;を設置することで元に戻った！
「おーあるじゃん、さすがGoogle先生♪」
と思い、言われたとおりにやってみたのですが……。
直らない
なんでやねん。
mobile.css内の#containerにoverflow: hidden;を書けば良いとサイトには載っていたのですが、全く直る気配がない……。
ということで、大学時代にコーディングしていた時の知識を引っ張ってきたりして、自力で直し方を見つけました。
div#mainが犯人だった
犯人はmobile.cssの中にいましたが、別のタグでした。
それは
div#main
でした。
div#mainを下記のようにします。
div#main{overflow: hidden;}
ちなみにこれは管理画面で「外観＞カスタマイズ＞追加CSS」の中にコピペして記載しましょう。
ググって見つけたサイトの直し方は「SImplicity」（2がついてない）での直し方みたいですね。
Simplicity2になったことで、#container周りがなくなったことが直し方が変わった原因だと思われます。
いやースッキリした。
★Twitterやっています！「ブログネタのタネ」をほぼ毎日ツイートしてます。
★コンテンツを肴に飲む「コンテンツ飲み」コミュニティを運営しています。ぜひご参加ください！