投稿者:: @Aimy

サーチコンソール内で、以下の内容のエラーが検出されたと報告がきました。

＊主な問題

• クリック可能な要素同士が近すぎます
• コンテンツの幅が画面の幅を超えています
• テキストが小さすぎて読めません

これについてはサーチコンソール内のエラーなので、ちょっと何とも言えません。
メッセージで検索するといろいろ解決方法が出てくるかと思います。

投稿者:: @Aimy

また「モバイルフレンドリー」にかけると「モバイルフレンドリーでありません」と表示されてしまいました。

モバイルフレンドリーテストツールでチェックしてみましたが、「このページはモバイルフレンドリーです」と出ます。
https://search.google.com/test/mobile-friendly?id=WbOO9K0KXFUd0HqDjNDWIA

これは何もしなくてもいいです。

そのまま「検証依頼」すれば合格になるはずです（笑

僕のブログの記事ですが、参考にしてください。

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

もしかして、合格しないかもしれませんけど。

合格した、しないに関わらず、結果を書き込んでもらっていいですか？

わいひら様、ヒロアキ様、ご回答有難うございます！

高速化を無効にしたところ、「モバイルフレンドリーです」となったのでした。

なので高速化に戻してしまうと、またそうなるのかも…

とりあえず、ヒロアキ様のご提案通り、検証依頼してみますね！

また、ご報告いたします！

投稿者:: @Aimy

高速化を無効にしたところ、「モバイルフレンドリーです」となったのでした。

よろしければ、高速化した状態で見せていただいてよろしいでしょうか。
不具合状態を見ないと、どこが問題なのかが分からないので。
よろしくお願いいたします。

それぞれ「検証依頼」してみましたが、やはりエラーになってしまうようです＾＾；

@yhira様

はい、ただいま高速化に戻してみました！

よろしくお願いいたします。

あれ？高速化を有効にするとエラーになるんですね。

だとしたら、ちょっと話が変わります。

エラーは2つになったけど、添付画像の赤枠の部分を指摘してるのかな？

グローバルメニューがものすごく小さくなってるし。

というか、モバイルでグローバルメニューが表示されることがおかしくないですか？

（多分、モバイルの時にはグローバルメニューは非表示にしてますよね）

それにしても、ここの表示結果とGoogleの表示結果がかなり違うのが解せない。

Responsinator

追加CSSの中の記述と、子テーマのCSSの記述の両方に、括弧が足りなかったり、記述がおかしい箇所がありますね。

一度、両方のCSSの記述を、細かくチェックし直してみてもいいかもしれません。

以前、確か、プラグインの中にもCSSを書いておられましたね。

@y-hiroakis様　

 リフィトリー様　

はい、私には難しすぎたので、その後プロに依頼して改善してもらいました。

このエラーになる表示は、CSSがなにか関係しているのでしょうか？

@Aimy さん

投稿者:: @Aimy

私には難しすぎたので、その後プロに依頼して改善してもらいました。

そうだったのですね。

投稿者:: @Aimy

のエラーになる表示は、CSSがなにか関係しているのでしょうか？

エラーとCSSの記述の因果関係は、私には、よくわかりません。

ただ、CSSの波括弧が抜けていたりすると、高速化設定をONにしたときに、表示がおかしくなったりすることは、多々あることのように思います。

例え、エラーにならなくても、CSSの記述は修正しておくに越したことはないと思います。

@Aimy さん

私の気づいたところを書いてみます。

子テーマのCSSの344行目

@media screen and (max-width: 1023px){

メディアクエリの閉じ括弧が見当たりません。

@Aimy さん

以下の画像は、追加CSSに記述のCSSで気づいたところです。

行番号は、若干ずれているかもしれません。

@Aimy さん

前述しましたとおり、CSSの記述とエラーの因果関係は、私には、よくわかりません。

CSSのおかしいところは、私が気づいたところです。

また、他の場所にも書かれていらっしゃるのかどうかは、私には、わかりません。

ご自身で、確認なさってみてください。

@Aimy さん

CSSを正確に記述するには、テキストエディターが断然便利です。

テキストエディター「Mery」

「Mery」はKuroさんが開発されたシンプルかつ高機能のテキストエディターです。

見た目がとても、シンプルなので、初心者の方でも扱いやすいです。

お使いのパソコンのオペレーティングシステムに合わせて、32ビットか64ビットのzip版をダウンロードして、解凍し、フォルダ内の「Mery.exe」ファイルを右クリックして、「スタートメニューにピン留めする」をクリックするだけで使えます。文字コードを「UTF-8（BOMなし）」に設定してお使いください。

以下は、参考リンクです。

初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！

スマホ対応！CSSでメディアクエリの書き方【初心者向け】

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

特にメディアクエリの場合は、CSSをサンドイッチする構造なので、一番下の波括弧を忘れがちです。

@media screen and (max-width: 480px) {
    p {
        color: #fff;
    }
}

この一番下の黄色で示した波括弧は、とても重要なのです。

@leafytree様

ご丁寧に教えて頂き有難うございます。

そうなのですね…ちょっとトライしてみます。

解決しましたら、またご連絡致しますね！！

@Aimy さん

もし、とりあえず、使わないメディアクエリを残しておきたいときは、必ず、閉じ括弧で閉じておいてください。

@media screen and (max-width: 480px) {
}

この閉じ括弧が無いと、他のCSSのコードに影響が出てしまう場合があります。

@leafytree様

お世話になっております。

ご指摘頂いた通りに、閉じ括弧で直しましたところ、無事に「モバイルフレンドリー」で合格できたのですが、サチコのエラーは変わらず、下記のような表示をされてしまいます。

@Aimy さん

私は、サーチコンソールのエラーについては、詳しくないので、よくわかりません。

全てのページにエラーが出ているのではないのであれば、エラーの出ているページのURLや、エラーの内容などを具体的にご提示いただくと、詳しい方が診てくださるかもしれません。

ご質問と、回答内容がずれてしまっている点については、あい、すみません。

なお、CSSの記述を拝見したとろ、前回、書かせていただいた、２箇所が、未修正です。

子テーマのCSSと追加CSSの両方で、１箇所ずつです。

@leafytree様

ご丁寧に有難うございます。

いえいえ、CSSを訂正しないとサチコの問題も解決できなかったかもなので、教えて頂きまして有難うございます！

見落とし箇所のCSSは、思い切って削除してみました。

削除しても影響ないようなので、大丈夫かと思います◎

本題は、もう一度URLなど提示してご質問させて頂きますね！

いつも有難うございます！

お世話になっております。

サーチコンソール内で、以下の内容のエラーが検出されたと報告がきました。

＊主な問題

• クリック可能な要素同士が近すぎます
• テキストが小さすぎて読めません

また「モバイルフレンドリー」にかけると「モバイルフレンドリーでありません」と表示されてしまいました。

1番最初にご質問させて頂き、@leafytree様のご指摘からCSSなど訂正し、直った箇所もあるのですが、いまだサチコでエラーが発生してしまい、「モバイルフレンドリー」にも引っかかってしまいます。

▼対象URL▼

https://ilusm.baby/infant-poppy-trial/

Googleサーチコンソールに詳しい方、解決方法を教えて頂けますと嬉しいです。

どうぞ、よろしくお願い致します。

僕が今チェックしてみた限りでは、特に問題はないようです。
https://search.google.com/test/mobile-friendly?id=IG1q0Iwex9Qzavckha9Pnw

@yhira様

たまにエラーが出るようですが、解決できたようなのでこれでよし！とします(笑)

たくさん教えて頂き有難うございました。