Bloggerモバイルテンプレートの画像サイズが調整されない

Bloggerのモバイルテンプレートで、画像が自動的にリサイズされないという事態に陥っていました。

このような形で、画像がiPhoneテンプレート向けに自動的にリサイズされませんでした。

ichisatoさんのブログで携帯向けに自動的に画像のリサイズをしてくれる方法について記載されていましたが、私が使用しているテンプレートのせいなのか、うまくリサイズしてくれませんでした。

ちなみに、ichisatoさんのブログには、こんな記述が書いてありました。

画像は「width」を指定することにより自動的に縮小されていましたが、Youtubeやtableなどは指定した大きさの幅になっていたため、モバイル環境で閲覧する際に横にはみ出した状態で見栄えが悪くなってしまうという問題がありました。

そこで「.mobile」を使用しCSSで調整することで、画面内に収まった表示が可能となりました。 

様々なBlogger関連の記事を見ましたが、うまく調整するような記事は残念ながら発見できませんでした。

そうしたら、ふとした瞬間に解決が出来ました。
現在はこのように表示されています。

若干余白が左右違いますが、きちんと画像が自動的にリサイズされています。
これまで、画像を表示させる際、画像のサイズを”元のサイズ”にしていました。
これを元のサイズではなく”特大”に変更したら、見事にリサイズしてくれました。

本当にこれだけの作業です。

原因は、わかってはいませんが、きちんとモバイル用にリサイズが出来たので、良しとします。
しかし、Bloggerよくわかりませんね・・・。
難しい。