SWELLでモバイルユーザビリティエラーが発生。対処方法の検討

※本ページはプロモーションが含まれています

最近作るWordPressのテーマはSEOに強いSWELLを使っていますが、このテーマはSEOには強いのですが、たびたびサーチコンソールでエラーが出るんですよね。それが難点、今回はSWELLを使ってモバイルユーザビリティエラーが発生した際に、対処してうまくいった内容をシェアします。

目次

発生したモバイルユーザビリティエラー

新しいブログでSWELLを導入すると、ほぼ必ずと言っていいほど、モバイルユーザビリティエラーが発生します。

  • テキストが小さすぎて読めません
  • クリック可能な要素が近すぎます
  • コンテンツの幅が画面の幅を超えています
これらは解決させないと、該当ページはモバイルで表示されないマズいエラーです。あれこれGoogleで調べても、実際にSWELL使ってないユーザーが書いた記事ばかりが上位表示していて、何やねんって感じでしたので、自力で調査して解決させました。

原因の考察と検証

Cocoonなどのテーマでは発生していないエラーなので、SWELLだけの問題なのは明らかです。SWELLで複数のブログを運営していますが、いずれも発生したので、これは間違いない感じです。

あれこれ調べたところ、以下の箇所を修正したらうまくいきました。

モバイルのフォント設定

モバイルの文字サイズが可変なんですよ。これを固定にしたらうまく解決しました。

僕はプログラマーなので、何となく動きが読めたのですが、これはマズいよね。サーチコンソール側は擬似的な解像度でチェックしているはずなので、フォントサイズが小さすぎるという判断になったのでしょう。

吹き出しの名前

併せて、吹き出しの名前も削りました。吹き出しで、名前が入れれるんだけど、これも引っかかってる。文字サイズは可変なのかもしれません。とりあえず、削除したらエラーが消えました。

SWELLについて

SWELLはWordPressの有料テーマの1つで、モダンでクリーンなデザインが特徴のテーマです。視覚効果豊かなWebサイトを簡単に構築できるのが最大のメリットです。しかも、SEOに強い!上位表示しやすいのが特徴です。

SWELLのデザインは、シンプルで直感的なUIとなめらかなアニメーション効果が印象的。メニューや各要素の動きがスムースで、最新のWebデザイントレンドを取り入れた洗練されたテーマに仕上がっています。

また、Gutenbergエディタとの親和性が高く、WordPressの新しいエディタに最適化されているのも特徴。新エディタの機能をフルに活用でき、直感的な操作で視覚効果の高いページを作成できます。

デザインオプションも豊富で、色やフォント、レイアウトなどをカスタマイズ可能。サイトの目的やブランドイメージに合わせた調整が簡単に行えるのが魅力的です。

スマートフォン対応などレスポンシブデザインもしっかり実装されているので、マルチデバイスでの表示にも最適化されています。

▼17,600円買い切り▼

アフィリエイトでの稼ぎ方

以下より、矢野テックのLINEに登録すると、過去に実施した有料セミナー3本(各9,800)をご覧頂けます。実際に月500万稼いだブログも公開してます。

友だち追加

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

ご質問はコメント欄からお願いします

コメントする

目次