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を追記してくださいね。

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

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

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

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

文字がはみ出すとき

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

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

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

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

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

さいごに

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

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

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

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

スポンサーリンクと関連記事

関連記事(広告含む時あり)

シェアする

フォローする

  • Follow Me →
スポンサーリンク
トップへ戻る