【blogger】モバイル表示の横ゆれを解消する方法

2017/09/07

【blogger】モバイル表示の横ゆれを解消する方法

2017/9/7 ume

blogを開設して１か月半。
いまだにテンプレートをいじっていて、肝心の投稿が疎かになっているumeです。

右側にものすごい隙間があってグラグラ…。

スマホで記事をスクロールした際、不要な余白が表示されて、横ゆれが生じていました。
これを解消した方法をご紹介します。

参考にしたのはこちらのサイトです。

[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと | ヨッセンス
こんにちは! ヨス（@yossense ）です。今現在、Google検索では「スマホ対応」がされているかどうかは超重要になりました。 PCの検索順位はスマホでの検索順位が適応されています。そのためにはスマホ対応がしっかりとされていないとダメです。今回はブログのスマホ対応がテーマです。参考: Googleがモバイルファーストインデックスを導入予定、影響は？対応は？ | 海外SEO情報ブログ今回は私がスマホ対応のために最低限やっている6つを紹介するのですが、分かりやすいように「問題点」を見出しにして紹介しますね。まずはこちらの比較画像をご覧ください。スマホで見た時に、上画像の左側のような画像を見たことありませんか? これは画像サイズがパソコンのままになっているんですね。大きいのではみ出しています。これをスマホで見た時は自動で上画像の右側のように縮小してほしいんです。でも大丈夫! CSSのに以下のコードを加えるだけでOKです。 img { max-width : 100% ; height : auto ; } ハイ。これは一発で直せました! ※追記:「 height:auto;」を入れ忘れていたので、追記しました。これがないとタグに直接高さ指定をしている場合に画像がびよーんと伸びてしまいます。 YouTubeやGoogleマップをブログに埋め込んだときに、画面からはみ出していませんか? ほら、YouTubeのこういうやつですよー。あと、Googleマップがはみ出しているのもよく見ますね。これも簡単に直ります。こちらのコードを追記するだけです!

#wrap { overflow : hidden ; }

はみだした部分を強制的に見えなくする、必殺技的なCSSです。
しかし、サイトに書いているCSSのコピペだと、私の場合は横ゆれが解消されませんでした。
「#wrap」の部分が私のテンプレートと合っていないようです…。

「大枠の<div>」の意味が分からずしばらく悩んでしまいましたが、まずは自分のテンプレートのレイアウトを確認することにしました。