Bloggerブログのモバイル画像をスマホ横幅いっぱいに表示する方法！ブロガーロード(BLOGGER ROAD)

Bloggerブログはモバイル版のサイトが自動的に作られるので便利なのですが…

なぜかデフォルトのモバイル版では、画像がスマホ画面の横幅いっぱいに表示されません(大体80%くらい)。

そこで!
モバイル版ブログの画像をスマホ画面の横幅いっぱいに表示させる方法を紹介します！

まずは確認

ブログ管理画面から、

「テーマ」→「歯車マーク(モバイルデータをカスタマイズ)」

をクリックし、

セレクトボックス内が「カスタム」になっていることを確認してください。
(参考:Bloggerをカスタマイズしよう！5つの方法(初級編))

この設定を行わないと、モバイル版のカスタマイズはすべて無効になってしまいます。

CSSで画像の幅を設定

次にCSSをいじります。

CSSはブログ管理画面から、

「テーマ」→「カスタマイズ」→「上級者向け」→「CSSを追加」

から編集可能です。
(参考:Bloggerをカスタマイズしよう！その前に…)

そしたら、細かいことは置いといて、
とりあえず、以下のコードを記述しましょう。

div.separator img {
width: 100%;
height:auto; }

Bloggerではエディタから画像を貼ると、
「separator」というクラス名が自動的に割り振られます。

こちらを利用して画像の形式の指定を行うことになります。

widthについて

widthは画像の横幅を指定することが可能です。

こちらを100%にすることで、スマホの横幅いっぱいに画像を表示することができますし、

もしも100%では窮屈に感じられるようでしたら、任意に値を変えていただくことで、お好みの横幅に設定することができます。
(実際当サイトでは98%にしています)

heightについて

さて、
とはいっても横幅だけを大きくしても、縦幅が追いついていなくては画像の比率が崩れてしまいますね。

そこで重要になるのがheight:auto;です。

heightは画像の縦幅を指定することができるのですが…

heightの値をautoにすると、なんと画像の比率を保持するように自動的に縦幅を調整してくれるようになるのです。

なんとも都合の良い機能ですね(笑)

これにより、比率を維持したまま、画像をスマホ画面いっぱいに表示できるようになりました！

PC版における効果

デフォルトのPC版のBloggerブログでは、画像によっては「特大」や「元のサイズ」を選択した場合、画像が枠からはみ出てしまう場合があります。

しかし、先ほど述べたCSSを記述することで、画像が枠からはみ出ることは無くなります！

これは思わぬ副産物ですね(^^)

あんまいないと思いますが、
「PC版の画像が枠からはみ出る感じが良かったのに！」
という方は、

CSSのコードの前に「.mobile」をつけることで、CSSの適用をモバイル版のみに留めることができます！

画像のサイズのコントロール

しかし、この操作にはリスクもあります。

Bloggerでは、エディタから画像を挿入する際、

「小」「中」「大」「特大」「元のサイズ」から画像の大きさを任意に選択することができるのですが…

先述したコードは画像を常に横枠いっぱいに表示させるものなので、

これをCSSに記述すると、画像の大きさを「小」や「中」にしたとしても、画像が強制的に横枠いっぱいまで引き延ばされてしまうのです。。

せっかく画像の大きさを選択できるのに、この機能が失われてしまうのはもったいないですよね？

そこで！
画像の大きさを選択できる機能を再現するコードを記述しましょう！

各サイズの大まかな横幅

まず、エディタから画像の大きさを選択して貼り付けるとき、各サイズでの画像の横幅は大体以下の通りです。

・小：200px
・中：320px
・大：400px
・特大：640px

※あくまで目安です。実際は元の画像の比率によって変動します。

これから、
例えば、画像の「小」を選択して、そのサイズ通りに貼るには、以下のようなコードをCSSに記述します。

.separator img[width="200"]{
max-width: 200px;
height:auto;
}

max-widthは横幅の最大値を指定するものです。

つまりこのコードは横幅が200の画像を指定して、その横幅の最大値を200pxに設定することができるのです。

このコードを導入することで横幅200pxの画像は200pxの横幅を超えることはありません。

同じ要領で「中」や「大」の画像をサイズを維持して貼りたい場合は、上のコードのwidth="200"の部分の値を320や400に変えることで完了します。

ただし、画像によっては横幅が必ずしも上に示した一覧の値の通りになっていない場合があります。
(例えば、「小」の横幅が196になる等)

そういった場合、CSSのコードは適用されなくなってしまいます。

対処法

対処法として、エディタのHTML編集画面から、画像のwidthの値を確認し、

もしも値がCSSで設定しているものとずれているようならば、

こちらのエディタの値をCSSで設定したものと同値に書き換えることで、CSSの適用を受けることができるようになります。
(例　width="196"の値を200に変える等)

これにより、画像を画面横幅いっぱいに表示する設定を活かしたまま、画像のサイズを指定できるようになりました！