アメブロには、スマートフォン版ブラウザで見たときだけ、記事に貼り付けた画像の横幅が画面の横幅と同じサイズになるまで拡大表示されるという仕様があります（2024/02/25現在）。
Amebaアプリや、パソコン版ブラウザ、iPad版ブラウザではそのようなことが起こらないため、画像の貼り付け方によっては、スマホ版ブラウザで見たときだけ表示が崩れることになってしまいます。
本当に困った仕様ですが、調べてみたところ、対処方法がありましたのでご紹介したいと思います。
Amebaアプリを使っていると、スマホ版ブラウザで自身のアメブロを見ることは少なくなると思いますが、スマホ版ブラウザの画面は、GoogleやSNSからの訪問者が見る画面なので、このあたりからのアクセス流入や集客を考えている方は、ちゃんとチェックして対策しておくほうが良いでしょう。
どのように表示が崩れるのか？
ではまず、具体的にどのように表示が崩れるのか？を見てみます。
囲み枠に入れない場合
最初に、囲み枠などに入れずに、記事枠内にダイレクトに貼り付けた場合です。
↓こちらは、PC版の記事エディタで普通に画像を貼り付けて、PCで表示した例です。
これを、スマホのAmebaアプリで見ると、↓このように表示されます。
1枚目と2枚目の間が妙に広く空いていますが、まあ何とか許容範囲でしょうか。
そして、これを、スマホ版ブラウザで見ると、↓このように表示されます。
2枚目だけ、左右の余白などを一切無視して、画面幅いっぱいまで拡大されました。
ちなみに、これは、Android版のGoogle Chromeでの表示ですが、iPhone版のChromeやSafariでも同様でした。
なぜ2枚目だけなのか？にも理由がありますが、それは後ほど。
囲み枠に入れた場合
次に、簡単な囲み枠に入れた場合を見てみます。
パソコンで↓このように表示される場合です。
スマホのAmebaアプリで見ると、↓このように表示されました。
やはり、と2枚目の間が妙に広く空いてしまいますが、破綻はしていません。
そして、問題のスマホ版ブラウザで見た場合は、↓このように表示されます。
もう、これはダメですね。
2枚目の画像が、表示位置もおかしいですし、右側が画面外にはみ出してしまっています。
ご自身の記事をAmebaアプリ、PC版ブラウザ、スマホ版ブラウザの全てで確認する人は少ないかもしれませんので、確認してみてこんな事になっていると知ってしまうと、驚くでしょうね。
かく言う私も、とても驚きました。
表示が崩れる原因と対策は？
さて、上のように、記事に貼り付けた画像がスマホ版ブラウザで見た場合だけ表示が崩れてしまうのには、もちろん原因があります。
それは、スマホ版ブラウザで記事を表示するときに、次のような処理が行われているためです。
- 記事に貼り付けられた横幅が400ピクセル以上ある画像の
<img>タグに、
data-amb-layout="fill-width"
という属性が追加される。 - その属性の付いている画像に対して「位置を左へ16pxずらす」「横幅の最小値を画面の横幅にする」という内容のスタイルが適用される。
「属性」とか「スタイル」とか少々専門用語が出ましたが、要は、横幅が400ピクセル未満であれば処理の対象外ということです。
上の例で、2枚の画像のうちの1枚目の表示が崩れなかったのは、実は、画像の横幅が399ピクセルだったからです（2枚目は400ピクセルです）。
なので、当記事で問題にしている「スマホ版ブラウザで表示が崩れてしまう処理」を回避するには、次の画像のように、画像を貼り付ける時は横幅を399ピクセル以下にすると良いということになります。
大きな画像は使えないのか？
では、スマホ版ブラウザでの表示のことを考えると、400ピクセル以上の大きな画像は使えないのでしょうか？
実は、囲み枠に少し工夫をすることで使えます。
↓こちらは、これまでと同じ、横幅が399ピクセルと400ピクセルの2枚の画像を貼り付けたものをスマホ版ブラウザで見たものですが、2枚目の画像も拡大されず、はみ出してもいません。
どうやら、スマホ版ブラウザで表示したときでも、アメブロの記事エディタで用意されている囲み枠の中に貼り付けた画像は、たとえ横幅が400ピクセル以上でも、上記のような拡大処理はしないことになってるようです。
つまり、アメブロの記事エディタで用意されている囲み枠の中に入れるか、もしくは、自作の囲み枠でも、アメブロの記事エディタで用意されているものに仕様を合わせることで、その囲み枠の中に貼り付けた画像を表示崩れの元になる拡大処理の対象外とすることができます。
具体的には、囲み枠の一番外側の要素(HTMLタグ)にdata-entrydesign-part=""という属性を設定すればOKです。
例えば、元が、
<div style="border:2px solid #666;border-radius:4px;padding:20px">囲み枠の中身</div>という囲み枠だったとすると、これを、
<div data-entrydesign-part="" style="border:2px solid #666;border-radius:4px;padding:20px">囲み枠の中身</div>と変更するだけです。
簡単ですね。
これだけで、この囲み枠の中に貼り付けた画像は、上記のようなスマホ版ブラウザで表示崩れの元となる拡大処理の対象から外れますので、安心して囲み枠の中に画像を貼り付けることができます。
なお、この方法は、囲み枠に入れない画像には使えませんが、囲み枠に入れない画像もどうしても拡大されたくないという時は、敢えて以下のような見えない囲み枠に入れることで拡大処理の対象から外す方法が使えます。
<div data-entrydesign-part="">囲み枠の中身</div>見えない囲み枠は、記事エディタでも当然見えないため、常用するには扱いが少々難しいと思いますので、「どうしても」という時くらいになるとは思いますが。
ちなみに、この囲み枠の中に貼り付けた2枚の画像をスマホ版ブラウザで確認すると、↓このように見えます。
見た目では囲み枠に入っていませんが、2枚目も画面幅いっぱいに拡大処理されていないのがおわかり頂けると思います。
まとめ
以上、アメブロの記事に貼り付けた画像がスマホ版ブラウザで見たときに勝手に拡大され表示が崩れてしまう問題への対処方法について紹介させてもらいました。
Amebaアプリを入れていると、スマホ版ブラウザで自分の記事を確認する人は少ないように思いますので、記事を書いている本人も気付きにくい「不具合ではないか？」と疑ってしまいたくなるような困った仕様ですが、上でご説明したように、対処法はあります。
もし、ご自身のアメブロをスマホ版ブラウザで見たときに、このような画像拡大による表示崩れが起こっていた場合は、よかったら参考にしていただければと思います。
なお、アメブロは、何の前触れもなく仕様が変わることが多いので、この記事で取り上げた問題も、いつの間にか修正されている可能性はありますし、そうあってほしいと思います。
