WordPressテーマSANGOの質問

MFIエラー「コンテンツの幅が画面の幅を超えています」の解決策について

アバター
めがね

サルワカさん

ひとりと申します。
SANGO重用させていただいております。

質問でなくご報告なのですが、
表題のエラーがGSCで複数記事について出て、
自分でいろいろと調査したところ
原因が「関連記事がスライダー表示になっていること」のようでした。

ワードプレスにて、
SANGOオリジナル機能>「関連記事のデザイン」>モバイル表示で関連記事をスライダー表示にしない
にチェックを入れたところ、問題は解消したようです。
(モバイルフレンドリーテストで確認)

いったん上記で私自身の問題は解消したのですが、
スライダー表示のままモバイルフレンドリーを維持する方法はあるのでしょうか。
(たまたま私のサイトで、それがNGと判断されてしまっただけでしょうか。)

ほかにも同様の方がいるかもしれないと思い、質問させていただきました。
たくさんの質問に答えられていてお忙しいと存じますが、
もし可能でしたら何卒よろしくお願いいたします。

SANGO
SANGO 質問ガイドライン
コメントへの回答
サルワカくん
サルワカくん
2020/08/23

お世話になっております。
私の環境(関連記事を横スクロール型で表示)でモバイルフレンドリーテストを行ってみましたがエラーなどは表示されませんでした。
ただ、色々と調べてみたところ、横スクロール型の表現をしたときに同エラーが出ることは多く報告されているようです。
英語だと「Horizontal scrolling Content wider than screen」で検索するといくつか記事がヒットします。

その中でひとつ参考になりそうな記事がありました。
Google Says My Site Not Mobile Friendly Because Content Wider than Screen

CSSで横スクロールを実現するとき、スクロールしたときの右端にスペースを空けるために疑似要素を使ったテクニックを用いることがあります。
上記の記事によると、現時点のGoogleモバイルフレンドリーテストにおいては疑似要素の役割をうまく判断することが難しく、それによりエラーが出てしまうことがあるようです。

以下のようなCSSを追加して疑似要素を消すことで、エラーは解消されるかもしれません。
.related-posts.slide ul:after {
content: none!important;
}

ただし、右端のアイテムの右側のスペースがなくなってしまいますが…(色々な事情があり、疑似要素以外の方法ではスペースを空けるのが難しい状況です)

ご確認よろしくお願いします。