Simplicityユーザーさんに
SimplicityからCocoonに乗り換えました。機能が充実してますよ^^

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

スポンサーリンク

Simplicityレスポンシブ対応、スマホで横揺れ対策

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.cssmobile.cssresponsive.css、または外観カスタマイズより追加CSSに書いたスタイル・が原因です。

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

@charset "UTF-8";

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

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

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

ポイント

原因になっているCSSを切り取り、キャッシュのない状態で確認すれば特定できる!

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

テキスト画面にある、HTMLにstyle属性が付いている例

特定のページが横揺れする場合、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。

破線がメインの領域、ボーダーと内側余白padding、真ん中680pxがコンテンツの領域

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

  • marginを使わず、paddingで指定されているのがポイントでもある

詳しくは割愛しますが、興味があれば下記をどうぞ。

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

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;
}

ページ内に広告入れているなら、広告の画像部分にもiframeが使われます。

<iframe width=”300″ height=”250″ ~ゴチャゴチャ~中略~></iframe>

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

iframe {
	max-width: 100%;
}

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

テーブルがはみ出すとき

ドラッグして、テーブルがはみ出した例

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

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

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

Comments

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

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

トップへ戻る