アメブロを、iPhoneやスマホで見ると、
本文の写真の縦のサイズが伸びて、
変形してしまう時の
対処方法（直し方）をご紹介します♪
写真撮影＆デザインで、
あなたのブランディングをお手伝い！
kie（きぃ）です。
iPhoneフォト＆Instagramも研究中です♪
先日アップした記事を、
iPhoneで見たら、
なんと！
写真のタテの大きさが長くなって、
変形してしまってましたΣ(ﾟдﾟ;)
もう、ビックリ！(;´Д｀)
このブログは、写真ブログで、
iPhoneフォトの撮り方なども、ご紹介してるのに、
ほとんどの写真が縦に長く変形して、
ヘンな写真に、なってしまっているなんて〜(＞_＜)
ちなみに、横幅300px位の小さな画像は、
変形せず、無事でした！
私は、写真を大きく見てもらえるように、
PCの表示は、２カラムにして、
画像の横幅も、500px〜600px位にしているので、
ほとんど、横幅が狭くなって、縦に伸びたような画像に。。。
正方形の画像も、こんな縦長に(´Д｀；)
iPhoneで見ても、この間までは、
きちんと見えていたと思うんですけど・・・(´Д｀；)
iPhone・スマホで、
記事を見に来てくださった皆さん、
写真がヒドイことになっていて、
本当にすみません〜m(_ _)m
この原因は、
私のiPhoneの問題なのか？
アメブロの仕様が変わったのか？
わかりませんけど、
とにかく、直していきたいと思います。
それでは、スマホでも、
画像の横幅が細くならないように、
きちんと表示させる方法を
書き留めておきます〜♪
まず、最初にやった方法は、
効果がなかったのですが、
念のため、書いておきますね。
１）CSSを編集する方法（効果なし）
「ブログ管理」画面から、
「デザインの変更」
「CSSの編集」へと、進みます。
CSSに下記の記述を追加します。
max-width: 100% !important;
height: auto !important;
}
画像の横幅を、
記事画面の横幅より大きくならないようにして、
それに合わせて、縦のサイズを調整するようにします。
アメブロのCSSは、
PC表示にしか反映しないようなので、
なおりませんでした・・・(＞_＜)
まだ、記事の画像につけている縦サイズの指定が、
効いてしまっているようです。
そこで、記事の画像の指定も、
縦のサイズが、横のサイズに合わせて、
変わるように書き換えました。
今度は、成功です♪(*^^*)
２）記事のhtmlタグを編集する方法（成功）
記事のHTMLタグを、下記のように変更。
【変更前】
縦・横とも、サイズを指定していました。
<a href="http://stat.ameba.jp/user_images/〜〜〜〜〜.png"><img style="width:500px; height:333px; border:none;" alt="〜〜〜" ratio="1.5015015015015014" id="〜〜〜" src="http://stat.ameba.jp/user_images/〜〜〜〜〜.png" /></a>
【変更後】
縦のサイズが、横幅に合わせて
変わるようにしました。
<a href="http://stat.ameba.jp/user_images/〜〜〜〜〜.png"><img style="width:500px; height:auto; border:none;" alt="〜〜〜" ratio="1.5015015015015014" id="〜〜〜" src="http://stat.ameba.jp/user_images/〜〜〜〜〜.png" /></a>
これで、きちんと表示されました〜(*^^*)
でも、記事の画像のタグを、
全て書き換えるのは、無理な気がします(^_^;)
もし、他に良い方法が見つかったら、
またご紹介しますね〜(*^^*)
良い方法を知ってる方がおられましたら、
教えていただけると嬉しいです！
よろしくお願いします〜m(_ _)m
ブログランキングに参加しています☆
見たよ！の代わりに、クリックしていただけると
すごく励みになります☆(*^^*)
↓ ↓ ↓
インスタも、ちょこちょこポストしてます♪
フォローしていただけると
とっても嬉しいです(*´◡`*)
↓ ↓ ↓
kie Instagram インスタグラム
【kie フォト＆デザイン メニュー】
引き寄せフォト・プロフィール写真、ポートレート撮影出張・プライベート フォトレッスン（個人・グループ）
Photoshop（フォトショップ）レッスン（個人・グループ）アメブロカスタマイズ レッスン（個人・グループ）アメブロカスタマイズ
名刺 制作ホームページ制作、
Lightroom レッスンなど、
ご要望に応じて行いますので
ご相談くださいね(*´◡`*)
お申込み・お問い合わせは
こちらから☆
↓ ↓ ↓
お申込み お問い合わせ