ブログを始めた人の多くが焦るグーグルからの連絡。
それがグーグルサーチコンソールからの問題が検出されましたというメールではないでしょうか。
私ももちろん例に漏れることなく、このメールが届いてしまいました。
いくつか解決策があるかと思いますが、ブログ初心者の私でも解決できた解決策について紹介したいと思います。
何が問題として検出されたのか？
私が連絡を受けた問題は以下の３つ。
- テキストが小さすぎて読めません
- クリック可能な要素同士が近すぎます
- コンテンツの幅が画面の幅を超えています
いずれもモバイルユーザビリティに関するものでした。
全く思い当たる節がなかったのですが、指摘されているサイトを確認したところ、問い合わせに関するページでした。
ブログを作成する人なら誰でも問い合わせのページを皆さんも作ると思うのですが、そこでよく使われるのが、Contact Form 7と呼ばれるWordPressのプラグインではないでしょうか。
私もこのプラグインを使用していたのですが、そういえば最近更新したなぁ、とおぼろげな記憶があり、その時の更新によって何か問題が発生してしまったのでは、という予測を立ててみました。
ただ、スマホで見ても入力欄の幅が画面の幅を超えているなどの症状は見られなかったので、正直何が問題なのかわかりませんでした。
しかしながら、このまま放っておいてグーグルさんの機嫌を損ねられるのもの問題なので、解決策をいろいろ探してみました。
解決策は？
一番の問題はコンテンツの幅が画面の幅を超えていること、というふうに勝手に思い込み（というか、この部分しか対策を思いつかなかった）ので、まずはこの問題を解決することに注目しました。
色々調べると、はやりスマホで見るとコンテンツの幅が越えることがよくあるようで、そのコンテンツの幅を調整できれば、解決できそうであることがわかりました。
その中でも自分で対応できそうな簡単な方法として、追加CSSからWordPressを編集することにしました。
具体的な方法は以下の方法です。
- WordPressの「外観」の中にある「カスタマイズ」をクリック
- 次の画面で、「追加CSS」をクリック
- そこで、コンテンツの幅に関するコードを書く。私の場合は以下のコードを書きました。
.wpcf7-form-control-wrap.your-name input,
.wpcf7-form-control-wrap.your-email input,
.wpcf7-form-control-wrap.your-subject input{max-width:100%;
}
要は、各コンテンツの最大幅を100％に設定する、というものです。
結果は？
この修正を行った後、グーグルサーチコンソールからエラーの検証を行って1～２日後ぐらいに、すぐに合格しましたの連絡が来ました！
しかも、テキストが小さすぎることと、クリック可能な要素が近すぎる、という2つの問題も同時に解決！
やはり、予想通り、コンテンツの幅が悪さをしていたようです。
自分であまりこういう問題に対応したことがなかったので、解決できるととてもうれしいものですね。
注意点は？
一つ注意しなくてはならないことは、テーマを変更する場合は、「追加CSS」に記載した内容が新しいテーマに反映されないようなので、追加CSSに記載した内容をコピペする必要があるようです。
