【Simplicity2】スマホ表示でイロイロはみ出したり揺れる時の対策

表（table）や囲み枠をスマホで確認してみると、テーブルが異常にはみ出していたり、囲み枠がはみ出していたりと、PC上では完璧！と思って公開したのにガッカリする事がありますよね。

おまけにスマホでスクロールすると、画面が右へ左へゆらゆら～ゆらゆら～と横揺れを起こしていて、「下方向にスクロールしたいのに進まない！」かなりイライラします　(-_-;)

simplicity2では、初期設定で投稿記事の本文を書く部分は、幅680pxに設定されているということで、テーブル幅が680pxを超えなければ良い話しなのですが…

これが結構難易度高い！いつの間にか超えてます…

かなり時間をかけて作ったページだったので、直す気力もなかったのですけど、スマホユーザー様にイライラさせては申し訳ない！

レスポンシブでスマホ表示の「はみだし・横揺れ」を防止

ということで、とてもわかりやすくレスポンシブ対応させるCSSが紹介さているサイトを発見！　ヤッター

同じお悩みを持たれている方は必見です！

子テーマのスタイルシート (style.css)へ

/* はみだし・横揺れ対策 */
div, img {
 max-width: 100%; /* 画像キャプション幅 */
 height: auto;
}
iframe {
 max-width: 100%;  /* iframe幅 */
}
table {
 width: 100%; /* テーブル幅 */
}

追記：

テーブルは上記コードで解決したのですが、今度は囲み枠で横揺れが発生 (泣)

こういう囲み枠

どうやら囲み枠の幅をwidth 90%に指定していたのが原因らしく width 85%に直したら解決したので一安心。

上記コードで解決しない場合「おかしいな？」と感じたら width や padding なども確認してみるとよいですね。

Simplicity2 コピペで簡単カスタマイズ一覧【まとめ】

初心者の私にもできるSimplicityの使い方やコピペするだけの簡単CSSカスタマイズ方法一覧【まとめ記事】です。

レスポンシブでスマホ表示の「はみだし・横揺れ」を防止

関連記事