モバイルユーザビリティの問題の対応をやってみた

こんにちは、ムゲンです。

モバイルユーザビリティの問題 

先日、Google Search Console Teamから送られてきた、

「モバイル ユーザビリティ」の問題が新たに検出されました

というメールの対応をちゃんと行ってみました。 

検出された内容

このブログで検出されたのは以下でした。

• クリック可能な要素同士が近すぎます
• ビューポートが設定されていません
• テキストが小さすぎて読めません

起こっていたこと

何が起きているのかよく確認してみました。

発生している問題は検出された内容なのですが、なんで起きているのか？

ブログを作って色々設定をいじっている際に、スマートフォン側のデザインは「レスポンシブデザイン」にチェックお入れておけば大丈夫！

というようなモノを見た記憶があり、テキトーに選んだテーマでレスポンシブデザインを有効にしていました。

この時に選んだテーマに問題があって、どうやらレスポンシブデザインにちゃんと対応していないものだったようなんです。

はてなブログの「テーマ作成の手引き」 には以下の内容が書いてありました。

※ブログテーマが正しくレスポンシブデザインに設定されていないと、単に画面サイズを縮小しただけのブログが表示されるなど、かえって見づらくなるおそれがあります。必ず、ここでの説明に従ってブログテーマを設定してください。

今思うと、調べてた時にも「対応したテーマを選ぶ必要がある」と書いてあったような気がします。（苦笑）

とりあえずやったこと

まずは、取り急ぎ「レスポンシブデザイン」のチェックボックスを外しました。

元々はPC用のページが縮小されただけのものが表示されていたのが、スマフォ用っぽい画面に変わって、一気に味気なくなりました。（笑）

ただ、このままだと「ビューポートが設定されていません」は対応できていないようなので、これは別途スマートフォン側デザインの「ヘッダー＞タイトル下」に以下を追加しました。

<meta name="viewport" content="width=device-width, initial-scale=1">

これで、大丈夫らしい。

デザインテーマを見直す

ひとまず対応は終わりましたが、これでは今後も大変そうなので、レスポンシブデザインに対応したテーマに変更することにしました。

デザインのページのテーマ一覧ではどれがレスポンシブデザインに対応しているのかがよくわからなかったので、一番下にある「テーマストアでテーマを探す」をクリックしてみました。

色んなテーマが出てきましたが、一目でレスポンシブデザインに対応しているのがわかるものが結構あったので、その中で一番シンプルなものを選んでインストールしてみました。

その際に、インストールすると現在のテーマのCSSや背景が破棄されると書いてあったので、ちょっと不安になりデザインページで設定している、各種THMLなどをひとまずコピペしてテキストに保存しておきました。

そして、デザインテーマを変更して、デザイン設定画面を見てみましたが、HTML関係はちゃんと残っていました。

一番下のデザインCSSはメッセージの内容通りで初期化されていました。

私の場合はCSSに見出しの変更を入れていましたが、新しいデザインテーマでそれなりな感じの見出しが設定されているようなので、戻さずにそのまま行くことにしました。

そして、スマートフォンのデザインで念願の「レスポンシブデザインに対応」を有効に変更して対応完了！

スマフォで見てみてもそれなりに見れるようになりました。

再テスト

というわけで、Google Search Console で再度テスト。

「このページはモバイル フレンドリーです」

と出ました。

ですが、「モバイルユーザビリティ」のページを開いてみても、エラーの表示は消えていませんでした。

んー、どうもこれは時間がかかるようです。

正直よくわかりませんが、しばらく待ってみるしかなさそうです。

というわけで、今回はとりあえずこれくらいで勘弁してやりました。(笑)

こだわり始めたらキリがなさそう。。。

とりあえず、あとは様子を見てダメそうなら時間のある時に適時対応していこうと思います。

それでは、今回はこの辺で。