 自分のブログがスマホで読めなくなった レスポンシブデザインの不具合?

はてなブログのテーマをレスポンシブデザイン対応にして3ヶ月たった。レスポンシブデザインというのはブログのWeb表示が画面の大きさに左右されることなくPCでもスマホでもその大きさに応じて表示されるWebデザインのことだ。いつもブログを書く時にプレビューモードで画像の配置などの確認をしながら書いている。いつもはPC版のプレビューで確認するのだが たまたまスマートフォン表示で見て驚いた。参考 ブログをレスポンシブデザイン対応のテーマに変更した - tomi_kun’s blog

f:id:tomi_kun:20220202100833j:plain

PCサイズのブログ画面がスマホの画面に入りきらずに半分しか表示されていないのだ。すぐにiPhoneで確認すると

f:id:tomi_kun:20220202101349j:plain
スマホで確認

あたかもブラウザで「デスクトップ用Webサイトを表示」したかのようにPCと同じデザインで1ページ内に画面がすべて表示されるのだが全体に文字や画像が小さくて読めたものではない。ためしにレスポンシブデザインを外して表示したら下のように普通に読める状態になった。

f:id:tomi_kun:20220202152344j:plain
レスポンシブデザインをオフ

ブログの読者の大半はスマートフォンだと思う。その表示がこのありさまでは迷惑でしかない。この3ヶ月の間 こんな読み難いブログを公開していたのかと申し訳なくなった。もしかしてはてなブログ側の仕様変更かと思い検索したがそれらしい記事も見つからない。 はてなブログのテーマデザインの不具合なのか見当もつかない。しかし時々はiPhoneで自分のブログをみた記憶もあるがここまで読み難い状態だったとは思えない。個人的にはデザインcssの大きな変更もしていなかったので思い当たる原因もない。もとは吹き出し表示をスマホでしたかったためレスポンシブデザインを採用したのだから今の状態が改善するまではオフにしておこう。はてなブログでの「吹き出し」表示は永遠の課題になりそうだ。

See you tomorrow!

follow us in feedly