更新がしばらく滞っていたのですが，ちょっとブログに問題が起こっていたのです。それがなんとか解決したというお話です。
ある日エラーのアラートが
昨年末，Google Search Consoleを眺めていると，モバイルユーザビリティのところにエラーが出ていることに気がつきました。エラーは2つ，
- 「テキストが小さすぎて読めません」
- 「クリック可能な要素同士が近すぎます」
この時点では，これらの問題が3つのページにあるという指摘でした。
むむむ？気になって，自分のスマホ（iPhone）で該当ページをチェックしてみました。けれども特に小さすぎる文字はないようです。もともとこのブログは，スマホでも楽に読めるように，文字を18pxに設定していますし，小さな文字を打ち込んだ覚えもありません。
「クリック可能な要素同士が近すぎる」という点はよくわからないのですが，自分のスマホの画面を操作した限りではそんなこともありません。
…おっかしいなあ。
ググってみると，Googleのレンダリングがたまたまおかしくてこういうエラーが出ることがあり，放っておけば直ることも多いという記載をいくつか見つけました。それでその時はあまり気にせず放置していました。
エラーアラートが増えてきた
ところが1月中旬くらいから「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」のエラーがあるというページが増えてきたのです。エラーを指摘されているページは，以前は何も問題なかったし，その後も何かいじったわけではないので不思議だったのですが…。
さらにこの頃から，ブログのアクセス数が減ってきたのです。もともと少ないPV数ですが，冬に入ってから徐々に増えはじめて喜んでいたのです。それが急に減ってきたんですよね…。
「たまたまアクセスが少ない日が続いたのかな？」最初はそう思い込もうとしたのですが，検索数も明らかに落ちてきているし，これはやっぱり何か原因がありそう。
うーん，やっぱりモバイルユーザビリティエラーの影響かなあ。もしそうなら，何とかした方が良さそうです。
モバイルフレンドリーテストをしてみると…
そこでいくつかのページを，Googleのモバイルフレンドリーテストにかけてみました。すると…。
(-_-;)… アカン。
さらに自分の記事を片っ端からテストにかけてみたのですが，どの記事もどの記事も「モバイルフレンドリーではありません」との判定です。Search Consoleからエラーが指摘されていないページもです。唯一合格したのはトップページのみで，記事を書いたページは全部 (?) 不合格の模様。こりゃ，ダメなページの数は，報告されているエラーの数（この時点で8）どころではないようです！…これではアクセスも減るはずだわ。
原因を探ってみます
画面が縮小して表示されている？
モバイルテストで不合格なページでも，自分のスマホで見るとちゃんと表示されて文字も問題なく読めるのです。気になるのは，モバイルフレンドリーテストの結果では，記事が縮小されて画面の左半分にしか表示されていないこと。
もしこんな風に表示される端末があったら，文字が小さすぎて読めないというのはその通りでしょうし，クリックできる要素が近すぎるというのもよくわかります。
一方，問題なしと判定されたトップページは，ちゃんと画面全体に表示されるという結果になっています。どうやらこのあたりに原因がありそうです。
ピンチインできる！？
ところでモバイルテストの結果のように，記事が縮小されて画面の左半分にしか表示されないというのは，スマホの画面をピンチインして画面を縮小した時に起こりそうです。
でもそんなことはできないはず。そう思ってやってみると…あれ？僕のブログの記事ページはピンチインで画面が縮小される！そしてモバイルテストに合格したトップページはピンチインできない！さらに，試しに僕と同じテーマ（Under Shirt）を使っている他の人のブログをスマホに表示してみましたが，やはりピンチインできないのが正常なようです。
むむむ…。どうやらこの「ピンチインした状態」がGoogle先生に認識されて，「文字が小さすぎる」と判定されている模様です。
それを踏まえて検索をかけてみたのですが，同様の症状が出たという例は見つかりませんでした。
CSSをチェックしてみる
ブログの記事ページ全部がモバイルエラーの状態にあるということは，CSSの設定がおかしくて，それが記事全部に影響を与えている可能性があります。ブログのカスタマイズを繰り返しているうちに，おかしなCSSを書いてしまったのでしょうか。
そこではてなブログの「デザイン」から「カスタマイズ」（工具マーク）に入り，「デザインCSS」をチェックしてみました。けれども特におかしな点は見つかりませんでした。うーん…。
解決策は ”viewport”
しばらく悩んだのですが，「画面を縮小した状態」がGoogleに認識されて問題が起こっているなら，画面を縮小できないように設定すればよいのでは？と思い至りました。
そこで画面の表示領域を表す「viewport」をmetaタグで設定し，最低倍率を1.0（つまり縮小しない）に設定してやることにします。
ということで，はてなブログの「設定」から「詳細設定」に入り，「headに要素を追加」のところに以下のコードを貼りました。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.5,maximum-scale=2.0,user-scalable=yes">
「width=device-width」は「表示領域をデバイスに合わせる」ということで，「minimum-scale=1.0」が「縮小表示をしない」という意味の設定になります。
これでなんとか行けるはず。
「変更する」ボタンをクリックして設定を保存したあと，記事ページをスマホで開いてみました。すると…おっ，ピンチインできなくなっています！
そしていくつかの記事ページをモバイルユーザビリティテストにかけてみると…
オッケーです！いくつかのページをチェックしてみましたが，全部合格でした！
またクローラがやってきて，モバイルテスト問題なしのお墨付きを与えてくるのを待つこととしましょう (^◡^)
おわりに
ということで，「viewport」を指定することで，モバイルユーザビリティテストの問題が解決したお話でした。
いつの間にかブログがピンチインで縮小できるようになっていて，それがGoogleに認識されて不合格となる…というのはレアケースかもしれませんが（実際，検索してもそのようなケースは見つかりませんでした），一つの事例として記録しておくことにします。もし同様の問題が発生している人がいたら，参考にしてもらえれば，と思います。
指摘された「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」の2つのエラーは，以前は出ていなかったのに最近になって出はじめたのは少し不思議です。これはブログをカスタマイズしているうちに，書き加えたhtml/CSSが，元々のテーマの指定を上書きしてしまっていたのかな？と思っています。
ともあれ，ひとまず問題は解決したので，次にGoogleのクローラが来た時に「問題なし」と判定してくれることをお祈りしています。そしてまた検索／アクセス数が増え始めるといいなと思っています。
2月8日追記
モバイルユーザビリティエラーが指摘された記事を，改めてGoogleにインデックス申請した結果，エラーが0になりました！めでたしめでたし。
関連記事
