前略、るりさん

・テキストが小さすぎて読めません

・クリック可能な要素同士が近すぎます

・コンテンツの幅が画面の幅を超えています

この注意は、サーチコンソールの誤検知も多く、なにもせずに、修正済みとして、サーチコンソールのボタンをクリックして待っていたら、修正されました、とメールが届く場合もあります。

ただ、実際に、コンテンツ幅から要素が はみ出していたりすることもありますので、そこは、１ページごとに詳しく調べる必要があります。

サーチコンソールに上記に該当するページのURLが記載されているかと思いますので、丁寧に調べてみてください。

CLSについては、なかなか難しいのですが、ちょっと簡単に調べてみたところ、ヘッダーの高さが指定されていないことに加えて、ロゴ画像にアニメーション効果が指定されているため、ページの読み込みの際に、ヘッダーの高さが変わるので、その辺りが一番怪しいところです。

他にも原因となる箇所があるかもしれませんが、一番原因となりえるところから修正されてみてはいかがでしょうか。

Cocoon設定の、「ヘッダー」タブの設定で、PC表示のときと、モバイル表示のときの、ヘッダーの高さに、数値を入れて「変更をまとめて保存」のボタンで確定します。

数値は、PC表示のときは、260

モバイル表示のときは、190

ぐらいがよいのではないかと思います。

ただ、ヘッダーの背景画像の高さが足りなくなるかと思います。

PCで、画面幅を大きくしているときは、おそらく大丈夫なのですが、少しずつ画面幅を縮めていくと、背景画像の高さがある場合は、画像の下の方が出てくる感じになるのですが、背景画像の高さが短いために、余白になってしまう画面幅があるかと思います。

もう少し背景画像の高さがあって、ＰＣ表示のときは、下の方が隠れている状態にすれば良いかと思います。

るりさん
リフィトリーさん

突然失礼致します。

るりさん添付の画像のように、ちょっと何かがおかしいのかな…とは思います。
（ブラウザの幅と、サイトの幅が一致していない。）

るりさん添付画像のとおりだと、「テキストが小さい」と指摘を受ける気はします。

他にいくつもあるかも知れず、何とも言えないところはありますが…。

Chromeのデベロッパーツールで「iPhone 5/SE」（画面幅は320px）を選択すると、はみ出しているものがあるように見えます。

これが「コンテンツの幅が画面の幅を超えています」という指摘に繋がっている気はします。

画像を添付します。

るりさん
リフィトリーさん

同じ箇所をFirefoxで確認すると、以下のようにやはり少しはみ出しているように思います。
（Galaxy S9を選択（画面幅は360px））

Firefoxでも「iPhone 5/SE」を選択すれば、Chromeと同じようなはみ出し具合になります。

画面幅が小さいと、発生するようです。

るりさん
リフィトリーさん

以下のwidthのところが影響しているのかな…と思うのですが。

高速化がオンになっているようで、どこで指定しているのかは良く分かりませんでした。

他にもあるかも知れませんが、チェックはしていないです。
見つけるのは大変かもしれません。

リフィトリーさんの仰るとおり、サーチコンソールと実際のページを突き合わせて、1つ1つ確認していくしか…。

@mk2_mk2 さん

確かに

width: max-content;

を無効にすると、横スクロールバーが消えますね。

とりあえず、１箇所見つけた感じですね。

あとは、注意が出た対象のURLがサーチコンソールに記載されていると思うので、トップページだけなのか、それとも、他にもあるのか、ということになりそうです。

るりさん

フォーラムにご質問をされる際は、Cocoonの高速化設定を無効にして、プラグインの「WP-CopyProtect」 を停止していただけますようお願いします。

高速化設定を無効にするには

https://wp-cocoon.com/theme-trouble/

リフィトリーさん

はい、我々にはサーチコンソール上のメッセージは確認できませんので、ご本人に地道に1つ1つご確認いただくしかない気がします。

@leafytree

ありがとうございます！

まずは高さを指定してみました。

また誤検知も多いのですね。。様子をみてみます！

@mk2_mk2

@leafytree

お二方ありがとうございます！

また高速化設定のままで失礼しました。

コピープロテクトも外しました。

width: max-content;

これには気づきませんでした。

ワイドはいじった記憶がないのですが、これが一番原因として影響していそうですね。。

ひとつひとつ探していくしかなさそうです?

ありがとうございます！

るりさん

PCの方のCLSの値は、下がったように思います。

モバイルの方は、ちょっと問題がありそうな感じです。

フッターモバイルボタンがサイト幅から はみ出しているようです。

現在、WordPressのバージョン5.7で、Cocoonのエディターの不具合が若干出ているので、5.6.2辺りが無難なのですが、どうも、バージョンを指定してのアップデートは少し難しいみたいなので、5.7でも5.4.4のままにしておくよりは良いような気がします。

WordPressのアップデートを行う際は、データベースとファイルのバックアップをとっておくことをお勧めします。

また、WordPressをアップデートする前に、PHPのバージョンを7.4系に切り替えておくことをお勧めします。

PHPのバージョンが古いと、WordPressをアップデートした際にエラーが発生することがあります。

PHPのバージョンの切りかえとWordPressのバージョンのアップデートが完了したら、モバイルの表示を再度確認してみると良いような気がします。

るりさん

あと、プラグインの WP Multibyte Patch は、日本語でWordPressを運用する際に必須のプラグインらしいです。

WordPress５から無くなったWP Multibyte Patchは必須なので手動インストールしましょう

インストールしておくことをお勧めします。

また、コピーガード系のプラグインの中には、悪影響を及ぼすものもあるようなので、使わない方が無難なようです。

るりさん

あと、以下のような記事もあるようです。

WordPress「Xserver Migrator」は移行完了後は停止か削除で!

@leafytree

なにからなにまでありがとうございます！

PHPやWordpressのアップデートを行ったところフッターメニューの幅が改善されました！

おそらくこれで問題解決されるかと思います。

いまだサーチコンソールのエラーは出たままですが、このまま出続けるのか様子を見てみたいと思います。

またプラグイン関係のアドバイスもありがとうございます！

るりさん

PHPやWordpressのアップデートを行ったところフッターメニューの幅が改善されました！

おそらくこれで問題解決されるかと思います。

私の環境では、Chromeのエニュミレータで見ると、どうもまだ、スマホの表示に問題が残っているようなのですが、原因が絞り込めずにいます。

コンテンツの内容のどこかに原因があるのか、あるいは、プラグインが関係しているのか、その辺りも つかめていません。

サーチコンソールのエラーは、修正済みのボタンをクリックしても、検査が完了するまでに、ほぼ１ヶ月程度は、かかるようです。

尚且つ、モバイル表示の方は、おそらくまだ問題が修正されていないので、スッキリ解消とはいかないかもしれません。

少し時間をかけて調べていくしかないのかもしれません。

るりさん

モバイル表示の件とは無関係かもしれませんが、子テーマの javascript.js に記述されているコードは、効いていないのではないでしょうか。

以前お使いになっていたご自身のサイトのソースコードを貼り付けた？のでしょうか。

もし、要らないものでしたら、削除しておく方が無難かもしれません。

また、モバイル表示の件も、ご自身でカスタマイズされた何かが影響している可能性もゼロではないと思われますので、原因を調べる際には、カスタマイズしたところを、一旦外してみる、というのも、試してみてもいいのかもしれません。（かと言って、カスタマイズしたものが原因とは限りませんが）

いずれにしても、不要なものや、怪しいものは、外していき、気長にコツコツと調べていくのが良いのかもしれません。

@leafytree

度々ありがとうございます！

確かに私のスマホでもフッターメニューの幅は問題ないのですが、デベロッパーツールでモバイル表示でみるとフッターメニューの幅が改善されてないですね。。

CSSで記載したものを消したり、一部プラグインを停止してみたりしましたが、原因わからず。

おっしゃる通り時間をかけて原因を探っていくしかないですね

ありがとうございます！