【アメブロカスタマイズ】スマホで記事を見ると、画像の縦が長くなり、縦横比が変わってしまう時は?

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

中之島公園 バラ

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

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

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

iPhone アメブロ 画面 スクリーンショット

もう、ビックリ!(;´Д`)

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

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

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

iPhone アメブロ 画面 スクリーンショット

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

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

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

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

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

1)CSSを編集する方法(効果なし)

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

.articleText .detailOn img, .entry .detailOn img {
max-width: 100% !important;
height: auto !important;
}

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

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

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

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

2)記事の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>

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

iPhone アメブロ 画面 スクリーンショット

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

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

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

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

関連記事

カテゴリー

2018年11月
« 9月    
 123
45678910
11121314151617
18192021222324
252627282930  

アーカイブ

PAGE TOP