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

WordPressの初心者におすすめ1・2位だと思う無料テーマのSimplicity。スマホでグラグラ横揺れを起こす原因と対処法を徹底的に説明します。

コンテンツ部分の枠から画像やiframe・テーブルがはみ出して横揺れする原因は下記。

• スマホビューでキャプションを入れた画像が、大きく見切れて左右に動く
• iframeの横幅サイズが大きいまま、枠からビヨーンとはみ出し横揺れする
• 場合によっては表が見切れ グラグラ横揺れする
• 追記引用にブログカードを入れたとき スマホビューで左右に動く

これら全ての原因は、決められたコンテンツの横幅より、大きなサイズの指定があるからです。

スマホで横揺れしないため、超簡単にレスポンシブ対応させるコードを入れることで、レスポンシブ対応が可能です。はじめに答えにあたるCSS、次に原因の説明を書きますね。

Simplicity2で横揺れ対策！追記すると良いスタイル

すべてのdiv・画像、iframe・テーブルの幅を100%に指定すればOK！詳細な説明は後述。

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

ブログカードを引用などの領域で囲むときは以下も追加。

.blog-card {
	min-width: 100%;
}

これで はみ出すことはありません。

まだ画像が横揺れするとき

ボーダーと内側の余白paddingの計算が合っていないので、はみ出すので下記をどうぞ。

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

文字がはみ出すとき

文字が領域からはみ出して横揺れする場合は、改行ポイントの指定を変更するスタイルです。

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

これはSimplicityの場合、カスタマイザーから指定可能です。

外観ーカスタマイズよりレイアウト（投稿・固定ページ）を開いた場所

『長い単語を必要に応じて改行する』にチェックを入れて公開を押してください。

必要に応じて長い単語やURLを要素からはみ出さないように改行します。ただし、この機能を有効にすると単語の途中で改行されることもあります。

アドセンスでグラグラするとき

アドセンスが横揺れするなら、Simplicityでは簡単に設置できるので、ウィジットにスマホ用300pxの広告を入れてください。下記にその工程を書いてます＾＾

LINKウィジェットに広告コードが保存できない？Simplicity2でアドセンスコードを拒否されたけど、やっと解決！

それでも はみ出すときの対処

プラグインが原因ではないかチェック

プラグインが影響してませんか。プラグインを全部停止しても横スクロールしないか確認してください。

• はみ出さない場合はプラグインが原因です。
  • 1つずつ有効化し、画面を更新・確認してください。

子テーマのカスタマイズが原因か確認

親テーマのみを有効化して はみ出さなければ、子テーマのstyle.css・mobile.css・responsive.css、または外観ーカスタマイズより追加CSSに書いたスタイル・が原因です。

例えば子テーマstyle.cssが原因か調べる方法は、以下を残して更新すればOKです。※styleは『テキストエディタ』などに簡易的でもバックアップをとってください。

@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

キャッシュのない状況で確認して はみ出さないなら、子テーマに書いたCSSが原因だとわかります。あとはどの部分が原因箇所か特定してくださいね。

原因のページのHTMLに書いている内容をチェック

特定のページが横揺れする場合、WordPress投稿にある編集画面のテキストエディタを開いて、HTMLにstyle属性を付けてないかチェックしてください。以下は画像にあるstyle属性の例。

<table style="height: 496px;" width="735">

また該当ページのビジュアルエディタを全コピーして、新規投稿画面上でプレーンテキストとして貼り付け保存しプレビュー画面で確認して横スクロールしなければ、そこにかいているHTMLが原因だとわかります。

HTML・スタイル属性・CSSなど確認・修正してくださいね。

Simplicity2親テーマを最新バージョンに

もしかしたらSimplicity2親テーマの古いバージョンをお使いではないですか。最新バージョンにしてキャッシュのない状態で確認すれば、はみ出してグラグラしないようになるかもしれません。

Simplicity2の最新バージョンをFTPソフトからアップロードしてくださいね。

LINKSimplicity2のダウンロード｜Simplicity

原因説明：親要素にwidthの指定があるとレスポンシブ対応可能

Simplicity2ではコンテンツ部分を囲む親要素#mainには、CSSで幅740pxと指定されています。この指定があるので、簡単に後述のコードでレスポンシブ対応させることが可能です。

#main {
	float: left;
	box-sizing: border-box;
	width: 740px;
	padding: 20px 29px;
	border:1px solid #ddd;
	background-color:#fff;
	border-radius: 4px;
	margin-bottom: 30px;
}

メインとはSimplicity2では、タイトルからコメントの下までの範囲をあらわす、PCビューの左側・記事部分を囲んだ部分の横幅は740px。

上記のCSSは子要素にあたる、コンテンツ部分.entry-contentにも継承され、横幅はpaddingとborderを省いた680px。

680pxの幅より大きなサイズ横幅を指定した、画像・テーブルがあれば横揺れを起こします。

WordPressで画像サイズはHTMLで自動的に指定するので、はみ出します。YouTubeは元々横幅が指定されてるし、テーブルは投稿前に幅をドラッグすれば幅が自動的に指定されます。

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

この680pxの枠から はみ出さないように、レスポンシブ対応していきましょう＾＾

原因説明：画像がはみ出すときの レスポンシブ対応CSS

スマホやタブレットで画像が大きくはみ出し、左右横揺れする時があります。上述のとおり横幅680pxより大きい場合です。

CSSは画像の横幅を枠いっぱい、指定するスタイルを記入することで対応。

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

• PCでも横幅が狭い状態で見ると横揺れする原因になる

このスタイルを書く場所はstyle.cssに書いたらOKです＾＾

画像にキャプションを付けたとき、キャプションの枠からはみ出すとき

キャプションを付けると画像が大きくはみ出して、横揺れを起こしている場合。

Simplicityでは、下記のピンク文字でキャプションの画像とテキストのクラス名で指定されます。※オレンジ部分がdivに囲まれた画像指定。

<div id=”attachment_***” style=”width: 429px” class=”wp-caption aligncenter”>
<img alt=”” class=”wp-image-*** ～略～>
<p class=”wp-caption-text”>キャプションテキスト</p>
</div>

.wp-captionや、.aligncenter、.wp-caption-textを指定してもいいですが、すべてのdivに対してレスポンシブ対応すれば、他divを使った装飾もレスポンシブ対応ができるので下記のように追記してください。

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

これで面白いほど、キャプション内テキストと画像がすっぽり収まりますよ＾＾

ページ内の広告の半分が見切れる原因、iframeの高さ指定の失敗

YouTubeは、iframeで囲まれていますがSimplicityでは、はみ出しません。いつだったか思い出せませんが、iframeもレスポンシブにしようと上述のdiv, imgに, iframeを追加したとき個人的に失敗してしまいました。

下記はやってはいけません＾＾；

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

この場合height: auto;を入れていると、半分が表示されず、アドセンスのポリシー違反になりかねないので、、もし間違って入れてしまった場合、下記のようにしてください。

iframe {
	max-width: 100%;
}

iframeは色んなところで使われてますが、それに対して横幅いっぱいに指定されますので。

テーブルがはみ出すとき

テーブルは基本はみ出しませんが、WordPressの管理画面で四隅の四角をドラッグしてしまうと、幅が指定され はみ出してしまいます。

<table style=”height: 448px;” width=”742″>

ドラッグしてもHTML（テキストエディタ）から幅など指定を消し<table>と変更したら、レスポンシブ対応できます。面倒ならstyleを追記してください。

table {
	width: 100%;
}

max-width: 100%;ではないの？って思いますよね！？

Simplicity2では下記のように指定されてますが、横揺れする場合、上記のCSSを追記してくださいね。

.article table{
	border-collapse: collapse;
	margin: 15px 0;
	max-width: 100%;
}

引用に入れたブログカードが はみ出す原因

ブログカードを引用やdivで囲むとスマホビュー（横幅375px未満のデバイス）で はみ出して横揺れを起こします。

元々320pxの小さいデバイスで投稿記事<div id="the-content" class="entry-content"></div>の領域に合わせて、ブログカードの最小幅を300pxに指定しキレイに収まる仕様です。

.blog-card {
	margin: 20px 0;
	max-width: 100%;
	width: 500px;
	position: relative;
	clear: both;
	min-height: 145px;
	min-width: 300px;
	box-sizing: border-box;
}

@media screen and (max-width: 560px){
	#main .blog-card, #main .hover-card {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}

それが引用の中に入ったため はみ出し320pxなどのちいさな幅で見ると横揺れしてました。

引用の領域が288pxほどに対し、横幅の最小値が300pxなので はみだしたものをCSSで収めてあげます。

blockquote .blog-card {
	min-width: 100%;
}

引用の中のブログカードの横幅最小値を100%に。

引用以外にdivで囲っている場合でしたら、以下の通りで横揺れが解消します。

.blog-card {
	min-width: 100%;
}

さいごに

WordPress且つ、Simplicityの横揺れ防止のためのレスポンシブ対応でした。

このCSSを使わなくても十分対応できる人は沢山いるでしょうけど、はみ出したとき子テーマのスタイルシートに追記すると横揺れしませんよ＾＾

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