最近アクセス数が減ってきているなと思っており、何か要員があるのかなと思ってGoogle Search Consoleを見てみたら、なんとエラーが出ていました。
他の方のはてなブログを見ていると、レスポンシブデザイン（スマホやタブレットで閲覧する際に自動的に画面サイズに合わせて最適化してくれます）が動いているブログもあれば、動いていないブログもあります。
この様子から察するに、はてなブログ全体のトラブルというわけではなさそうです。
そうなると問題は私が使っているSmoothという公式テーマの問題だろうなと思い調べてみました。
まずは分析
先の通り、全てのはてなブログ全体のレスポンシブデザインが動いていないわけでは無いようです。そうなると、CSSがちゃんと動いていないであろうことが想像されます。しかし、同じデザインでもレスポンシブデザインが動いている人もいました。
そこから想像できる問題は、私のサイトのCSSが正しく動作していないということになります。もちろん従来は動作していたのですから、何かしらはてなブログ側で手が入ったか、ブラウザの仕様変更などが想像できます。
しかし、動作しているブログもあるのですから、解消できない問題では無いことも容易に想像できます。されど私にはCSSの知識はありません。
そこで、「はてなブログ」「Smooth」「レスポンシブデザイン」が、要素となるので、これをググってみたところ、やっぱり同様の問題を解決し、解説しているサイトがありました。
対応方法
こちらのブログの方が既に解決されていましたので、その方の対策を参考にさせていただきました。
ポイントはMedia Queries、ViewPointなど色々あるようですが、そもそもCSSの知識の無い私にはよくわかりません。
しかし、ヘッダに以下の文言を記載すれば良いことだけは読み取れます。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
この文章をはてなブログのダッシュボードから、「設定」ー「詳細設定」ー「Headに要素を追加」の項目の一番下に貼り付けて、最後にこの画面の「変更する」ボタンを押すだけです。
これでレスポンシブデザインが従来通り有効になりました。
スマホでの動作確認が難しい方は、MacのSafariで開発環境を有効にし、ユーザーエージェントをiPhoneのSafariに変更すれば、確認できますよ。
設定はSafariを開いて、開発環境のメニューを開きます。
詳細の一番下に、「メニューバーに開発メニューを表示」というチェックがあるので、チェックを入れます。
チェックを入れた後に、Safariのメニューに「開発」が追加されているはずです。
そのメニューを選択し、「ユーザーエージェント」から「Safari - iPhone」やiPad などを選択してブラウザのサイズを変更してみてください。
ブラウザのサイズに合わせてレスポンシブデザインが動作しているはずです。
「最近アクセスが減った」とか私のように「Google Search Console」で過去の記事のエラーが今更出ているような人は、ぜひ試してみてください。
![はてなブログ Perfect GuideBook [改訂第2版]](https://m.media-amazon.com/images/I/51DZs63BTNL.jpg "はてなブログ Perfect GuideBook [改訂第2版]")
