PR

【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カスタマイズ方法一覧【まとめ記事】です。