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

レスポンシブ対応してるブログを運営してるのに、スマホで見ると「左右にスクロールされて動く」「グラグラ横揺れ」を起こして画面からはみ出してませんか？

YouTubeの動画、アップした画像、ブログカードやtable表が見切れてたり、自動生成された幅の指定が原因で枠からはみ出してしまいます。。スマホでグラグラ横揺れを起こしてるとき、どうしたら良いのかをあげました。

• アドセンス広告の下半分が見切れた時の対処も追記しました。

※文字が親要素から『はみ出る』なら、下記をどうぞ。

LINK文字がはみ出してグラグラするときの解決方法word-wrap: break-word;でも無理なときword-breakをチェック！

このページの方が詳しく書いてますが、Simplicityで横揺れする場合、根本的な事から記してるので、どうぞ＾＾

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

レスポンシブデザインのスマホで、グラグラ横揺れして、はみ出すのは…

レスポンシブだから、左右の幅が何でも自動的にスルスル収まるのに、何故かスマホ画面から飛び出して見切れる。はみ出して横揺れしている。グラグラを見かたり、実際体験したものは下記。

• 画像
• YouTube
• ブログカード（FB）
• テーブル
• 他・・・

なぜそうなるのでしょう…。

左右にスクロール！スマホがグラグラ横揺れを起こす原因

HTMLなどに幅：width="500"など指定されてるからです。パソコンでは収まってるのに、幅が狭いスマホは、はみ出して「左右にスクロールする横揺れ」を起こします。

• 指定した幅500pxより、幅が狭いのが原因です。

WordPressキャプションなど、自動的にdivで囲われHTMLに『縦横の画像サイズを指定』が大半でした。

解決するには原因になってる画像を装飾するHTMLタグ（セレクタ）を指定してCSSで『レスポンシブ対応』にすれば収まります。

はみ出し横揺れの対処、解決法！CSSで幅を指定！

見切れた画像やFB・YouTubeがスクロールしたり、はみ出すのはサイズ指定されてるから。

親要素であるdivの幅がHTMLで500pxに指定されてるなら、CSSで横幅の最大値が100％になるように指定すれば解決です！

※親要素、子要素って何！？ブログ構造HTMLで解説してるページをサクッとみれば、親要素の意味が分かりますよ。

見切れてはみ出すときのCSS！max-width: 100%;

HTMLで指定された横幅width="600"が、スマホよりも大きいのが横揺れするから、CSSで横幅の最大値をmax-width: 100%;にすればスマホの横幅320pxでも、はみ出しません。

CSSのプロパティmax-widthは最大幅って事なので、幅が320でしたら最大「100％の320px」。400でしたら、最大400に収めるねって意味になります。

プロパティ「max-width」の「%」以外の値

none

最大値の制限をしません。これが初期値です。

数値で指定

数値にpxなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。

％で指定

％値で指定します。

max-width－スタイルシートリファレンス

HTMLタグ・スタイルシート・特殊文字等の早見表

www.htmq.com

YouTubeが見切れてスマホから はみ出す時のCSS

PCではキレイに表示されるのに、スマホで横揺れをおこしグラグラ。左右にスクロールされ残念なとき。HTMLを見たらYouTubeは、幅の指定をしてるのでスマホから はみ出します。

レスポンシブデザインだと、CSSに以下を足したらスコーンっとハマってくれます。

1. iframeの最大幅を100％にして各スマホの幅にあわせる。

iframe {
	max-width: 100%;
}

これで解決しなければ、次の方法。

1. YouTubeのコードを、divで囲み、CSSを追記。

<div class=”HTMLタグの名前“>YouTubeコード</div>

WordPressのテキスト画面（HTML）にクラス属性：例えばvideo-containerを付けたdivで「YouTubeコード」を囲み、CSSでレスポンシブ対応にします。

<div class="video-container">ここにYouTubeコード</div>

コードはアドクイックタグに登録しておけば、コードを忘れる事がないので便利です。

動画が少なければ手動で囲ってしまえば良いですねっ。

参考見出し、引用、文字装飾、リスト、動画像等のCSS初期設定とサンプル：より目次8：動画をレスポンシブにさせる方法｜Gush2説明書

Gushでしたら、クラス名がvideo-containerで統一されてますので、下記CSSでレスポンシブになります。 byElloraさん

/*--------------------------------------
  動画レスポンシブ化
---------------------------------------*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin: 0 auto 24px 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

CSSの解説は、動画サイトのドットインストールが分かりやすいです。

LINKiframeを埋め込もう (2)｜ドットインストール

1. テーマに新たにHTMLタグを付け、CSSを追記する。

YouTubeを各ページ大量に扱ってるなら、iframeにdivを一括で付けるコードをfunctions.phpに書き込めば楽ですっ。

もし同じ記載がテーマにあるのに気づかずfunctions.phpにコピペすると、競合してブログが真っ白になります。必ずバックアップをとってからカスタマイズしてください。寝ログさんのページが分かりやすいですよ。

参考YouTubeなどで使われるiframe要素を、WordPressでレスポンシブ対応する方法｜寝ログ

WordPressで画像が見切れ、横揺れするときの対処法

画像にキャプションを入れると、上述通りdivで囲まれて幅が指定するので、スマホで左右にスクロールしたり、はみ出します。

画面を右クリックして「検証、要素を（の）検査」で見ると、imgタグとキャプションのテキストがdivで囲われてるが解かります。

上の要素の検証で見た、divの塊から大まかところを抜き取ったものが下記画像。

「div」にstyle="width: 610px"と直接横幅が指定され、320pxのスマホで見ても、幅610pxで表示する原因で、見切れます。

div {
	max-width: 100%;
}

これで、横幅がスマホに収まったけど、様子がおかしい…。画像が『縦に延びた』！

divの中にある横幅600pxが、320pxになったのに、、画像の「高さheightが400px」で指定されてたまま、横幅だけが狭くなったのが原因でした。

max-width: 100%;で画像が縦長になったときのCSS

max-width: 100%;だけなら画像が縦長でバランス悪くなったから、同時に高さを自動調節するCSSをつけましょう！

height: auto;を一緒に付ければ問題ありません！※値auto、100%でも成功。

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

画像の親要素divの style属性で、指定されているのが原因なので、style.css に以下を記述。

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

すると縦に伸びず、幅と高さの調節ができてスマホでもキレイに収まりました。

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

ブログカードもYouTubeと同じiframeにスマホサイズより大きな横幅の指定が入っているので、グラグラ横揺れをおこします。これも同様ですね。

iframe {
	max-width: 100%;
}

WordPressのバージョンが4,4にアップグレードしたら、ご自身のブログをスマホで確認してください！iframe {max-width: 100%;}を書き足すだけで、YouTubeとブログカードが一気に収まる方が沢山います。

FBもifameでキホン対応できます。

どのタグ使ったら良いのか解らないなら、どれもレスポンシブにすれば良い。

レスポンシブデザインのテーマなら書いてるかも知れないCSSのコード。2重になっても、とりあえずはみ出さないようにしようって事なら、div、iframe、imgタグにmax-width: 100%;を入れてればOKです。

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

どうしても効いてくれない時は、!importantで強制的に効かすのも手です。それでもダメなら、プラグインの何かしらの設定だか他の要因が絡んでるんでしょうねっ。

!importantの使い方は下記です。

iframe {
	max-width: 100% !important;
}

LINK初心者のCSSが反映されない理由！優先順位の詳細度

table「表」がグラグラ横揺れする時の対処法

表を入れたけど、サイズが収まらずスマホからはみ出て左右にスクロールしてまう時にもwidth: 100%;が使えます。

レスポンシブデザインのブログでも、『テーブルに幅の指定』が入ったらグラグラ。

<table style="height: 246px;" width="568">

管理画面で表の四隅をドラックしたとき、自動でスタイルに幅や高さが指定されます。画像にキャプションを入れた時と同じですね。

確認するには、投稿一覧のテキスト画面（ビジュアル画面ではない方）のHTMLを見てみると解ります。

• HTMLの幅を削除して<table>のみにする
• それか幅を100%に指定すれば、横揺れを改善

table {
	width: 100%;
}

元々幅の指定がある『お店の情報の表』など、コピーしたものをスマホで見ると、はみ出します。HTMLで指定されてる幅も一緒にコピーして、スマホで横揺れを起こたんでしょうね。

要素の検証で見てみるとtableに、widthの指定が数字で指定された状態です。

<table width="520">

520の幅widthをはみ出さない為に100％にしてあげましょうっ♪って事でCSSを追記します。

これでtableに幅の指定があっても、収まりますね。

アドセンス広告iframeの下半分が見切れる解決法

アドセンス広告の（高さ）下半分が見切れてしまったので、修正しました。アドセンス広告の領域の幅と高さはシッカリあります。

レクタングルの上半分だけしか表示せず、下半分が白抜きになったときの対処法です。

原因は、横着してiframeの高さをautoにしていたからでした。

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

imgとiframeを分けるべきトコロを一緒に書いたのが悪かったんですね。正解は下記。

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

参考Stinger3でスマホのアドセンスが途中で切れてしまうとき

アドセンス広告の下半分が見切れて白抜きになった原因

簡単に言ったら、アドセンス広告をレスポンシブにしてしまったのが原因です。

ただレクタングルは、300もしくは320pxと横幅の指定があります。横幅の指定に反してiframeの高さをautoとCSSで指定したので、画像は横幅に合わせてautoに正しく表示。

でも画像を囲むiframeはレスポンシブ化したautoとなっているから、下半分が見切れてしまいました。だからアドセンスのレスポンシブ広告は下半分が見切れず、レクタングルのみ見切れてしまったんですね。

シンプルなのに、気付きませんでした＾＾；

width: 100%;でもまだ横揺れ！ボーダーや内側の余白が入ってるのでは？

画像などのに枠を付けていませんか？線borderやその内側の余白paddingを入れてる場合は、100％を超えてしまいます。その場合は、別のCSSのプロパティを指定すれば、スポッと収まるので、下記のリンクをご覧ください。

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

HTMLタグのクラス名に合わた『セレクタを指定』、スマホ対応サイズに収める

CSSで『divやtable』指定したのに反映しない時は、クラス属性で指定された、名前を指定すれば反映します。

LINK初心者向け、HTMLの入門編！HTMLタグとCSSのセレクタの関係＆要素とは？

<table class="hoge" width="520">

tableに、クラス名のhogeが入ってますよね。

確認してみれば、htmlタグ（divや）tableにclass="○○"と言う指定が入ってます。この.○○を指定してCSSを書いたらOK！CSSのクラス名の書き方の例は下記のとおり。

.hoge {
	width: 100%;
}

.○○ {
	max-width: 100%;
}

これはclassセレクタ：HTMLタグ内が属性名がクラス、属性値がセレクタです。

HTMLで指定されたクラス名を指定してCSSに書いたら、スコーーンっと収まります。

 

まだ無理なら、コンテンツ文章部分を囲む親要素を指定するなど試したいところです。

LINK親要素の指定方法！ブログ初心者にCSSのセレクタ簡単な付け方を説明

 

ちなみに、HTMLタグ内にstyle属性で指定したら、優先順位が高くて横揺れを起こすので注意してください。

LINKCSSが反映されないとき優先順位の詳細度

まだCSSが反映されない原因！書いてる場所が違ってるときの解決方法。

スマホ、タブレット用の記載場所がテーマによってかわってきます。PC用のCSSにコードを貼り付けてるのではないでしょうか。書く位置を変えてみてるか、別のコード@media screen and (max-width : 767px)を入れて下さい。

反映されない理由は「PC用」の場所にCSSに追記してるはずです。

• スマホ専用のCSSがないかチェックする。
• CSSの上のほうがスマホが反映するゾーン。
• 逆にCSSの下のほうがスマホが反映する箇所。

スマホの幅に合わせたいけど、PC用のCSSの場所に書いても反映しません。でも、初心者なので意味が解らないってアルアルです。

そのときは、CSSの一番下にコードを入れてCSSを追記すれば反映してくれますよっ。

@media screen and (max-width : 767px){
/*ここに上記のCSSを入れる*/
}

例として実際入れてみると、下記テーブルのコードを入れてみますねっ。

@media screen and (max-width : 767px){
	table {
		width: 100%;
	}
}

これで反映するはずです。できたら最後にバックアップをとっておきましょう！エラーが起きたら、カスタマイズしたものが消えてしまいます。エラーからの復元用に最新のブログのバックアップの準備しておきたいですからね。

※max-widthを768pxにしてましたけど、767pxに変更しました。ipadの端末のサイズを意識した結果です。細かいことですけど、一応＾＾

まだ反映しない場合は、コメントアウトの中に書いてないか、なども考えられます。こちらを参考にしてくださいね。

LINKCSSで書いたコードが突然反映しなくなった原因は、サーバー側のキャッシュ

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

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

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

まだ はみ出すときの対処

プラグインが影響している可能性はありませんか。ページ内に導入しているプラグインをすべて停止してください。

サイドバーに入っているもの、投稿ページなどで入っているものもです。

あとはコンテンツ内に自分で書いたHTML・CSSをチェックしてみるなど。

さいごに

万人に効いたら良いけど、テーマによってHTMLタグも違えば元々書いてるCSSやPHPも違ってきますよねっ。レスポンシブ対応されてるテーマが前提ですけど『大半は』上記でスッポリ納まります。

基本CSSのセレクタ！ブログ構造HTMLからみる親子孫要素の関係と、CSSの入門要素の検証でカスタマイズをしていけば色々分かりやすく、CSSも覚えやすいのでおススメです。あとは、CSSの優先順位を考慮してればOKかもしれません。

実際に、要素の検証でカスタマイズを実践してるので、見たほうが分かりやすいかも。

LINK超時短！！ブログのテーマカラー、背景色やボーダーを一気に変更する方法 #gush4

ちなみに、色んなブログの横揺れが気になって仕方なかったとき、初心者向けのサロンでエローラさんにCSSを教えてもらいました。

要素の検証を使って色んなページで試してスッポリ収まったので、サブページで環境を作り出して実験した結果です。カナリ面倒だけど実際やってみると、CSSが少しずつ分かるので、おススメですよっ♪

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