このブログでは開設当初から、スマホでの画面表示に不自然な部分がありました。
アイキャッチ（タイトル下の画像）を含め、大きな画像を貼ると、画像の位置が微妙にずれ、記事を読むときに横揺れが発生するのです。
この度ようやく原因が判明してすっきり。見事に問題解決です。
max-widthでは改善なし
スマホの画面表示についてはこれまでもネットでいろいろ対処法を調べたのですが、なかなかうまくいきませんでした。
まず一つ目は、画面より大きな画像を挿入したときの最大サイズを指定する方法。
以下のようなCSSを追加することで、本来であれば、画面サイズにぴったり合うように自動で画像の大きさの調整が行われます。
img {max-width : 100% ;height : auto ;}
しかし、僕のブログのCSSにはすでに同様のコードが含まれており、助けにはならず。
他にも「overflow : hidden ;」などを試しましたが、根本的な解決には至りませんでした。
（試した方法を全部書くとごちゃごちゃするので、ここでは割愛します）
Bloggerの仕様が原因
ブログに画像を挿入した際のコードをよく見てみると、怪しいCSSがありました。
それが、以下の部分。
style="margin-left: 1em; margin-right: 1em;"
これはBloggerの「作成ビュー」で記事内に画像を貼ると自動的に追加されるCSS。画像の左右にmarginとして「1em」の余白が勝手についてくるのです。
スマホで画像の位置がずれたり、横揺れが発生していたのはこの余計なコードが原因でした。
先ほど述べた「max-width : 100%」の指定では、コンテンツ本体の大きさの最大値が画面サイズぴったりに調整されます。
marginは「width」には含まれないので、せっかくぴったりにした画像の外側にさらに余白が作られて、全体として画面サイズをオーバーしてしまうのです。
marginを強制消去
原因が分かれば、対処は簡単。Bloggerが勝手につけてきたmarginを強制的に消去すればいいのです。
実際に僕がブログテーマのCSSに追加したのが以下のコード。これで見事に不具合が解消され、スマホでの表示が正常になりました。
.separator a{margin-left: 0em !important;margin-right: 0em !important;}
一応、上記のCSSについて解説しておきます。
まず「separator」というのが、Bloggerで画像を挿入したときに画像につけられるクラス名。（実際にコードを見るとclass="separator"と書いてあります）
Bloggerの場合、画像はすべて自動でリンク形式になり、marginのCSSは「img」タグではなく「a」タグに組み込まれています。
そのため、marginを消す際には「.separator a」とセレクタを記述します。「.separator img」だとうまくいかないので注意しましょう。
「!important」はCSSを優先的に適用させるためのコード。CSSを追加する場所によっては、なくても問題ないかもしれません。
さいごに
近ごろはスマホでブログを読む人が増えたので、モバイル端末での表示にも気を遣わないといけません。
書き手としては端末の種類が増えるとちょっと面倒ですね……。
レスポンシブデザインは一筋縄ではいきませんが、問題が起きたときはネットや本の力を借りて乗り切りましょう。
