アメブロを、iPhoneなどスマホで見ると、
本文の写真の縦のサイズが伸びて、
変形してしまう時の
対処方法（直し方）をご紹介します♪

写真撮影＆デザインで、
あなたのブランディングをお手伝い！
kie（きぃ）です。
iPhoneフォト＆Instagramも研究中です♪

先日アップした記事を、
iPhoneで見たら、

なんと！
写真のタテの大きさが長くなって、
変形してしまってましたΣ(ﾟдﾟ;)

もう、ビックリ！(;´Д｀)

このブログは、写真ブログで、
iPhoneフォトの撮り方などもご紹介してるのに、
ほとんどの写真が縦に長く変形して、
ヘンな写真に、なってしまっているなんて〜(＞_＜)

ちなみに、横幅300px位の小さな画像は、
変形せず、無事でした！

私は、写真を大きく見てもらえるように、
PCの表示は、２カラムにして、
画像の横幅も、500px〜600px位にしているので、
ほとんど、横幅が狭くなって、縦に伸びたような画像に。。。
正方形の画像も、こんな縦長に(´Д｀；)

iPhoneで見ても、この間までは、
きちんと見えていたと思うんですけど・・・(´Д｀；)

iPhone・スマホで、
記事を見に来てくださった皆さん、
写真がヒドイことになっていて、
本当にすみません〜m(_ _)m

この原因は、
私のiPhoneの問題なのか？
アメブロの仕様が変わったのか？
わかりませんけど、
とにかく、直していきたいと思います。

それでは、スマホでも、
画像の横幅が細くならないように、
きちんと表示させる方法を
書き留めておきます〜♪

まず、最初にやった方法は、
効果がなかったのですが、
防備録として、書いておきますね。

１）CSSを編集する方法（効果なし）

「ブログ管理」画面から、
「デザインの変更」
「CSSの編集」へと、進みます。
CSSに下記の記述を追加します。

画像の横幅を、
記事画面の横幅より大きくならないようにして、
それに合わせて、縦のサイズを調整するようにします。

アメブロのCSSは、
PC表示にしか反映しないようなので、
なおりませんでした・・・(＞_＜)

まだ、記事の画像につけている縦サイズの指定が、
効いてしまっているようです。

そこで、記事の画像の指定も、
縦のサイズが、横のサイズに合わせて、
変わるように書き換えました。
今度は、成功です♪(*^^*)

２）記事のhtmlタグを編集する方法（成功）

記事のHTMLタグを、下記のように変更。

【変更前】

縦・横とも、サイズを指定していました。

【変更後】

縦のサイズが、横幅に合わせて
変わるようにしました。

これで、きちんと表示されました〜(*^^*)

でも、記事の画像のタグを、
全て書き換えるのは、無理な気がします(^_^;)

もし、他に良い方法が見つかったら、
またご紹介しますね〜(*^^*)

良い方法を知ってる方がおられましたら、
教えていただけると嬉しいです！
よろしくお願いします〜m(_ _)m

インスタも、ちょこちょこポストしてます♪
フォローしていただけると
とっても嬉しいです(*´◡`*)
↓　↓　↓
 kie Instagram インスタグラム