▷▷▷ 休校2021のまとめページ ◁◁◁

CocoonでGoogleのモバイルユーザビリティでエラーが出たら親テーマのアップデートを確認しようというお話

雑記

こんにちは!うるま市にあります学習塾ベンガルです!

ここ数日頭を悩ませていたのが、このウェブサイトのモバイルユーザビリティイイイイイイイイイイでえええええええっす!

元ベンガル
元ベンガル

モバイルユーザビリティとはなんぞや?

ベンガルマン
ベンガルマン

スマホでも見やすいか?ってことガル

ウェブサイトというのは基本的にパソコンで作りますし、パソコン画面での表示をベースに組み立てていきます。このサイトだってそう。

でも、パソコンでウェブサイト見る人より、スマホの方が多いのが今のご時世。

このベンガルブログだって訪問者の7割はスマホでの閲覧です。

モバイルが7割

そこで大切なのが「スマホでも見やすいか=モバイルユーザビリティ」ってやつ。

パソコンだとうまく表示されるものもスマホだとすこしちがってくるもので。ぼくが見るには何の問題もなく、良好だと思っていましたが…

Googleからなんか警告きてるううううう!

なんだなんだなんだ⁈

おそるおそるチェックしてみると、うわ!40件近くのページで「貴様のサイト、スマホで見づらいんだが」という通知がきてました。

42のページでエラーになってるそうで
エラーの詳細はこうだそうで
表示されていたエラー
  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます
  • コンテンツの幅が画面の幅を超えています

はあ?これで文字が小さすぎるってGoogleさんよ、あんた「たまごっち」でページ見てるんですか?

あ、アメリカっすか?シリコンバレーから見てるからっすか?そりゃ遠いですもんね?ハズキルーペ送りましょうか?

てことでGoogleのデベロッパーツールで見てみると…

いやいやいやいや!何だこれ⁈

どゆこと?

もはやラフプレーじゃないですか。ちょっと困りますよ。

こんなにスッカスカに表示されたら、そりゃ文字も小さいっす。ハズキルーペでも小さすぎて読めないっす。

右側のちょっとしたアパート経営のできそうなみたいな土地は何?

iPhone12、iPhone8、iPhoneSE(旧)、iPad(10.2インチ)で実際に表示してもこうはなりません。

でもGoogleのデベロッパーツールで見てみると、たしかにこうなる。てことはGoogle botはたぶんこう見えてる。

実際に表示されなくてもGoogle先生の目にこう見えてたら、そりゃエラー出ますよね。

う〜ん、ヘッダーがなんでこんなに長いのか謎ε-(´∀`; )

CSSいじくり回しても直らないし。cocoonのフォーラム片っ端から読んでもちょっと違う気がするし。同じようにエラーで引っかかった人のブログでの対処法読んでもちょっと違うし。

そもそも何の挙動がおかしいのかさえわからん。メロスには政治がわからないらしいですが、僕にはコードがわからん。ついでに政治もわからん。

放っておこうとも思ったんですけど、実は半年ぐらい前から同じこと起きてまして。笑

放っておいたら増えてきてたんですねε-(´∀`; )

てことで粘りづよくcocoonのフォーラムを見てると、それっぽいエラーの人のとこにこんなことが書かれていました。

WordPress自体のアップデートで改善したというヒント

さらに天啓が。

cocoon自体のアップデートという大ヒント!

WordPress自体はアップデートしていたんですが…アップデート…アップデート…

もしかして親テーマ(cocoon)のアップデート?

たしかに今まで子テーマで動かしていたので親テーマのことを気にしたことはなかったし、アップデートなんて自動的にされるものだと思っていた。

これは、やってみる価値がありそうじゃないか。いいじゃないか、サイトがぶっ壊れても(悪魔のささやき)

てことで親テーマの方をアップデート!

すると……?

奇跡の回復

直っとるやんけ!

元ベンガル
元ベンガル

1件直ってないじゃないか

ベンガルマン
ベンガルマン

これは、よくわからん!笑

急転直下の推移グラフ(´∀`)

なぜか1件だけ直っていませんが、ほぼほぼ解決(´∀`)

cocoonを使っていて「ヘッダーが異常に長い」「スマホで見ても普通だけど、Googleのデベロッパーツールで見るとおかしくなってる」という僕みたいなケースの人はいけるはずです。

そもそも40件近くまで放置していたアホンダラは僕だけかもしれませんが…(´∀`)

てことで、同じようなエラーでここに来た方、cocoonの親テーマのアップデートを確認してみてください。

もしかしたら、もしかするかもしれませんよ。

あ、もちろんcocoonのアップデートしたら表示が崩れる部分はでてきました。でも直せる範囲にとどまっていますので、ぜひご確認ください!

追記(2021.5.24)

再検証をかけ、翌日確認すると無事にエラー0になっていました(´∀`)

公式LINEのご登録はこちらから!

ブログやお知らせなどをタイムラインにて定期配信中!

気が向いた時だけブログを読めるようになっております( ´∀`)

登録しただけでは誰かわからない仕様です。ご興味ある方は安心してご登録ください♪

友だち追加
タイトルとURLをコピーしました