こんにちは。はてなブログの公式テーマ「Smooth」を使っているsyu_reiです。
2021年4月1日から、自分のブログのスマホ表示がPC版表示になっていました。
いままではちゃんとレスポンシブ対応してたのに……
細かいことは分かりませんが、ネット上の情報で解決できたので、私の解決法を紹介します。
追記：2021年4月1日中に修正されました。
「モバイル ユーザビリティ」の問題が新たに 検出されました
なぜこんなに早く気が付いたかというと、GoogleSearchConsoleからメールが届いたからです。
メールの主な内容は以下のとおり。
「モバイル ユーザビリティ」の問題が新たに 検出されました
主な問題
貴サイトでは、以下の問題が検出されました。
- ビューポートが設定されていません
- テキストが小さすぎて読めません
- クリック可能な要素同士が近すぎます
なにも設定変更してないのにおかしいな？
自分のブログをスマホから確認してみると、PC表示になっていました。
確かに表示が小さすぎて読めません。
昨日までちゃんと表示されてたのになぜ？？？、と思いながらも、とりあえず解決策を探しました。
Smoothのレスポンシブ非対応の解決方法
はてなブログのダッシュボード→「設定」→「詳細設定」下の方にスクロール→「headに要素を追加」に以下の1文を追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
追加した後、一番下の「変更する」ボタンを押すのをお忘れなく。
私のブログはコレで解決しました。
解決方法を探すのに手間取った
多分、今日発生したエラー（？）なので、「Smooth レスポンシブ対応」などで検索しても解決方法が発見できませんでした。
焦った……
臨時対応として、
はてなブログのダッシュボード→「デザイン」→「スマートフォン」→「詳細設定」でレスポンシブデザインのチェックを外す
としてみました。
そうするとスマホ表示がはてなブログデフォルトの表示になります。
はてなデフォルトの表示方法にすると、文字が小さい問題は回避できるのですが、自分で設定したCSSも反応しなくなって、記事として不自然になってしまいました。
レスポンシブ対応できるよう、対応策を探します。
そもそもどうやってレスポンシブ対応になっているのか分かっていないので、とりあえずレスポンシブ対応できなかった場合の対応法をネットで探しました。
探した中で、こちらのサイト様の情報を参考にさせていただきました。
Media Queriesがなにかも分からないですが、とりあえず解決しました。
ありがとうございます！
すべてのブログでコレで解決するかは分かりませんが、はてなブログ「Smooth」テーマを利用している方はぜひ試してみてください。
公式で修正された
絶対私以外でも困っている人がいるはず！！！と思って、大急ぎで記事を公開したのですが、ちゃんと公式で修正されました。
GoogleSearchConsoleからのメールが朝の5時ごろに来ていたので、4月1日0時に変わったのかと思っていたのですが、昨日から不具合になってたんですね……
今回追加したコードは書きっぱなしでも問題ないようなので、予防策として残しておくことにします。
