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

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

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

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

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

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

スマホで横揺れしないため、超簡単にレスポンシブ対応させる2つのコードを入れることで、レスポンシブ対応が可能です。順番に原因の説明をいれながら、書いていきますね。

スポンサーリンク

レスポンシブ対応させるには、親要素にwidthの指定があるのが前提

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

コンテンツ部分の親要素に幅指定

メインとは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は画像の横幅を枠いっぱい、指定するスタイルを記入することで対応。

  • 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を使った装飾もレスポンシブ対応ができるので下記のように追記してください。

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

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

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

アドセンス広告の下半分が白抜きで見切れた例

下記はやってはいけません^^;

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

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

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

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

テーブルがはみ出すとき

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

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

WordPress投稿画面のエディタ、テーブルの四隅

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

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

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

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

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

横揺れしている引用の中のブログカード

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

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

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

引用の中のはみ出したブログカード

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

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

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

領域に収まったブログカード

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

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

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

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

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

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

文字がはみ出すとき

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

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

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

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

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

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

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

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

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

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

親テーマのみを有効化して はみ出さなければ子テーマに書いたCSSが原因です。子テーマのstyle.css・その他CSSに書いたCSSを以下を残して切り取って更新してください。

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

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

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

特定のページが横揺れする場合、WordPressのテキストエディタを開いて、HTMLにstyle属性を付けてないかチェックしてください。

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

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

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

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

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

LINKSimplicity2のダウンロード|Simplicity

さいごに

人それぞれ、使いかたが違うので100%これで大丈夫かは不明ですが、Simplicityを使ってきた中、横揺れ防止のためのレスポンシブ対応のスタイルになります。

※WordPressのテーマでよくある横揺れの対応でもあったり❦ 使い慣れてきたのでSimplicity専用ページを作成しました!

このコードを使わなくても十分対応できる人も沢山いるでしょうけど、はみ出したときは子テーマのスタイルシートに追記してると便利ですよ^^

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

トップへ戻る