Blogger スマホでは画像が小さい

スマホで自分のサイトを見たときに掲載している画像やスクリーンショットなどが約80％くらいのサイズで表示されてしまいます

左がデフォルトの画像サイズ

右が最大にしたサイズ（100％）

最近の Google サーチシステムは、スマホユーザー向けサイトを有利にしているようなので

無視するわけには行けません

そこで無い知恵を絞って対策をして解決できましたが・・・

さらに巨大な敵に遭遇してしまいました

とりあえず
対処法は

CSS（カスケーディングスタイルシート）で以下のコードを追加することで解決します

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

CSSとは
ブログのフォントや画像、レイアウトの見た目を指定するものです

CSSの追加する場所は

テーマ

カスタマイズ

詳細設定

ページ

下にスクロール

CSSを追加

ここにコピペ

保存

追加したCSSコードの意味
.mobile　　　モバイル（これを消せばPCにも反映される）
div.separator img {　　　Blogger で追加した画像のデータ　
width: 100%;　　　画像の横幅は100％
height:auto; }　　　画像の縦サイズは自動


シンプルで使いやすい無料ブログの Blogger ですがスマホでの編集を意識した仕様に変更されたことでなかなか見つけることができなかった「CSS」を追加する項目、以前は上級者向けってとこにありましたが

詳細設定を

フォント、背景色、テキストの色と表示して

折り畳み方式？見開き？袋とじ？みたいにして

ここにたどり着いた人は上級者向けの設定をしてもいいよてきな感じ？

スマホの画像サイズの変更が適応されない場合は

カスタマイズ横の▽マーク

モバイル設定

デフォルト

カスタムを選んで
保存

さあここで見てはいけなかったものを見てしまった

一部のページで画像のサイズは大きくなったが右寄りになっている

スマホの画面自体が左に少し動く余白がある

ここ数か月に制作したページがそのようになっている

試しに Blogger で制作中のこのページを HTML で開いてみる

HTML ビュー

まったく改行されていない

要因は2020年夏に新しい Blogger を導入したことだと思う

原因は

「使いにくいなあと思いつつも何とかなるだろう」

と思って使っていた

わたしだ

そして問題は多分ここだと思う

標準、段落

それがスマホでの画像が右寄りになっていることに関連している？

知らなければ幸せと思うか、傷が浅いうちに知ったことを幸いと思うか、どっちだ？

調べたところ色々なディバイス（主にスマホ）で見られることを考えたら改行をしない方がいいのでこうなっているらしい。パソコンで見やすいように改行をしてもスマホの横幅では改行が裏目に出てしまうこともある

パソコンでの表示

スマホでの表示