【Blogger Tips】スマートフォン等のモバイル表示で画像を横幅いっぱいにするスタイルシート(CSS)

bloggerをスマートフォン等でモバイル表示にすると、画像をなぜか横幅いっぱいに表示できませんでした（動的ビューを除く）。

これをなんとか横幅いっぱいにしたいな～って思いつつ、散々スタイルシート（CSS）を弄りまわしていたわけですが。
最終的に意外にあっさり短文コードでできたので、その辺まとめときます。

これがデフォルト。

画像が横幅いっぱいにならず、なにかモヤモヤする感じです。
やっぱりトップ画像みたいな表示にした方が見やすいし、デザイン的にも整っていますよね。


そんなわけで、そのやり方ですが、

.mobile .post-body img {
width:100%;
height:auto;
}

を

body.mobile {
background-size: $(mobile.background.size);
}

より下かつスタイルシート内に記述します。
ちなみに当該ブログでは、このコードの直下に入れてます。

これだけ。
意外にあっさりでした。

で、こんな感じのモバイル表示になります。



それにしても、Bloggerって本当に情報が少ないです。
今やりたいのは新着記事に「New!」マークをつけることなんですが、Bloggerの情報も少ないし、他のサービスでは実装されているjavascriptのコードを真似てみてもエラーではじかれるし。。
軽く詰んでいます。

が、大したあれでもないので、のんびりやることにしてます。
さて、次は何を試そうか？


んでは！