WordPressテーマ変更!SimplicityからCocoonへ

スマホでサイトが横揺れしてはみ出る・見切れるときのスタイル:対処方法まとめ

スポンサーリンク

レスポンシブデザインでスマホビューが横揺れ!対処法まとめ

ブログ・サイトでスマホで見た時、はみ出す:左右にグラグラ横揺れする:見切れる:横スクロールしてしまう時、追加すると良いスタイルを紹介します。

それでも反映しないとき、何をするべきか。その対処法もまとめてるので、状況に応じてチェックしてくださいね。

スポンサーリンク
スポンサーリンク

YouTubeが見切れる・ブログカードがはみ出て横揺れしてグラグラする時のCSS

iframe {
	max-width: 100%;
}
  • それでもダメな場合、以下目次2.2YouTubeが見切れてスマホから はみ出す時のCSS』を。
  • 原因については以下リンク先、目次2.4ブログカードがはみ出て横揺れしてグラグラする時のCSS』をどうぞ。

LINKCSSでスマホ対応!画面からはみ出す、グラグラ横揺れする原因!画像YouTubeブログカード、テーブル表が見切れる時の対処法

WordPressの画像がスマホで見切れ横揺れする時のスタイル

img {
	max-width: 100%;
	height: auto;
}

WordPressでキャプションをつけた画像がはみ出す時のスタイル

div {
	max-width: 100%;
}

原因については以下リンク先、目次2.3WordPressで画像が見切れ、横揺れするときの対処法』をどうぞ。

LINKCSSでスマホ対応!画面からはみ出す、グラグラ横揺れする原因!画像YouTubeブログカード、テーブル表が見切れる時の対処法

table「表」がはみ出してグラグラ横揺れする時の対処法

table {
	width: 100%;
}

原因は以下リンク先、目次2.6table「表」がはみ出してグラグラ横揺れする時の対処法』を。

LINKCSSでスマホ対応!画面からはみ出す、グラグラ横揺れする原因!画像YouTubeブログカード、テーブル表が見切れる時の対処法

どのタグを使ったら良いのか不明なとき

div, iframe, img {
	max-width: 100%;
}
img {
	height: auto;
}
table {
	width: 100%;
}

まだスマホでグラグラはみ出す・横揺れする・見切れる場合はCSS最強!importantを付ける

div, iframe, img {
	max-width: 100% !important;
}
img {
	height: auto !important;
}
table {
	width: 100% !important;
}

ボーダーや内側の余白が入ってる場合

例えば画像にpadding(内側余白)・border(ボーダー)を入れている場合は、box-sizing: border-box;を指定すればボーダーやpaddingの分を含めて横幅を計算してくれます。

LINK何で画像の枠がはみ出すの!?max-width:100%だけではダメ!そんなときの解決法

img {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

画像が横揺れしている場合は上記で解決します。

CSSの書いてる場所が違ってるときの解決方法

style.cssでもどこ場所に書いたら反映するか不明なときは、style.cssの一番したにでも以下メディアクエリでCSSのスタイルを囲ってください。

PCビューなどに反映

@media screen and (min-width : 768px){
/*ここに横幅768px以上で反映するstyle*/
}

スマホ・タブレットサイズの横幅に反映

@media screen and (max-width : 767px){
/*ここは横幅最大767pxまでで反映するスタイル*/
}

主にスマホビューサイズの横幅で反映

@media screen and (max-width : 500px){
/*ここは横幅最大500pxまでで反映するスタイル*/
}

メディアクエリについては以下をどうぞ。

LINKレスポンシブ対応!メディアクエリの書き方と書く場所。あなたのテーマはスマホファースト、PCファースト!?

反映しない場合、キャッシュを削除

プライベートウィンドー・シークレットウィンドーからアクセスするか、ブラウザのキャッシュを削除、1度も使った事がないブラウザ(例えばoperaドルフィン)からアクセスしてください。

WordPressでキャッシュ系プラグインを使っている場合は、プラグインの設定からスマホのキャッシュをクリアに、サーバーのキャッシュ機能を有効化している場合は、一旦停止またはキャッシュのクリアを行うなど。

まだ反映しないときのチェック項目

  • スマホビューのみ反映するスタイルを書く場所が不明な場合

上述メディアクエリをチェックするか、以下を確認してください。

LINKレスポンシブ対応!メディアクエリの書き方と書く場所。あなたのテーマはスマホファースト、PCファースト!?

  • CSSの優先順位が原因の可能性

LINK初心者のCSSが反映されない原因の1つ!優先順位の詳細度とは

  • CSSのコメントの中にstyleを書いてないか

LINKCSSが効かない原因!反映させるため、ブログ初心者さんが確認する7つのこと

まだ駄目なときは、はみ出している親要素を調べてみるのも手です。

LINK[CSS]スマホでみると画像・文字が親要素から、はみ出す原因を調べる方法

  • WordPressプラグインや子テーマで指定したスタイルが原因の可能性・親テーマのバージョンなどをチェックするなど。

以下リンク先・目次2章に詳細を書いてます。

LINKSimplicityスマホで、画像img・iframe・表tableが見切れて横揺れ・はみ出す時、CSSで対処

上記を試すとグラグラ横揺れする原因の場所が特定できます。

どうしても原因が不明なとき

場所の特定できても改善方法がどうしても不明なときのみ、該当箇所のURL詳細な場所をご記入の上、コメント欄よりコメントください。

詳細が不明な場合はご返信いたしかねます。あしからず❦

それでは、かうたっくでした。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
スポンサーリンク
CSS
フォローする
ビバ★りずむ

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る