検索結果にページがモバイルフレンドリーではありませんと表示される

PR 2016/5/30

このトピックには5件の返信、2人の参加者があり、最後に山田により10年、 2ヶ月前に更新されました。

5件の返信スレッドを表示中

投稿者

投稿
- 2016年5月30日 5:25 PM #41612
  
  山田
  ゲスト
  
  はじめまして、お世話になります。山田と申します。
  わいひらさんには、とても有用なテーマを公開していただき
  日頃から感謝の念が絶えません。ありがとうございます。
  
  今回、モバイルフレンドリーについて、アドバイスを頂きたく
  初めて質問させていただきます。お力添えいただければ幸いです。
  
  モバイルフレンドリーテストでは、
  「問題ありません。このページはモバイルフレンドリーです。」
  と表示されますが、
  
  検索結果には
  ページがモバイルフレンドリーではありませんと表示され困っています。
  
  ■現在の状況
  
  親テーマはSimplicity2の安定版で
  バージョン：2.1.0 20160227pです。
  子テーマはSimplicity1系を修正し、
  カスタマイザー設定を行い使用しています。
  
  各チェックツールには以下の結果が出ます。
  
  モバイルフレンドリーテスト：
  問題ありません。このページはモバイルフレンドリーです。
  
  ウェブマスターツール：
  クリック可能な要素同士が近すぎます
  コンテンツの幅が画面の幅を超えています
  
  PageSpeed Insights（モバイルのユーザーエクスペリエンス）：
  修正を考慮:コンテンツのサイズを表示域に合わせる
  ページコンテンツの幅は 420 CSS ピクセルですが、
  表示域の幅は 411 CSS ピクセルしかありません。
  次の要素が表示域から外れています
  要素「<h2>…ービスでいち早く対応します！</h2>」が表示域から外れています。
  
  モバイルで縦表示したときに、今まで無かった左右に数ミリスクロールするようになった。
  
  ■質問
  
  要素<h2>の文字数が原因でしょうか？それとも文字の大きさが原因でしょうか？
  
  Simplicity1系・2系を使用している複数サイト様をPageSpeed Insightsにかけてみても、
  「クリック可能な要素同士が近すぎます」が表示されていても、
  「コンテンツのサイズを表示域に合わせる」は表示されません。
  
  また、検索結果に「ページがモバイルフレンドリーではありません」
  と表示されるサイト様は見かけません。
  
  長文申し訳ありませんm(_ _;)m
  このような状況なのですが、解決策などありましたらアドバイスいただけないでしょうか？
  なにとぞ、よろしくお願いいたします。
- 2016年5月30日 7:53 PM #41614
  
  わいひら
  キーマスター
  
  そう言った状態を見るには、実際の不具合のあるページを見てみないと何とも言えないです。
  キャッシュプラグインを使用していると、といってモバイルフレンドリーではないと出たことがあるくらいしかわからないです。
  
  要素「<h2>…ービスでいち早く対応します！</h2>」が表示域から外れています。
  
  これに関しては、スタイルシートのword-breakの設定をすれば良いのかもしれません。
  ただ、それはあくまで書き込みからの推測で実際のものを見てみないと確かなことわからないです。
- 2016年5月30日 8:40 PM #41616
  
  山田
  ゲスト
  
  早速の返信ありがとうございます。
  プラグインの設定ははっきり覚えていないのですが、
  キャッシュ系のプラグインは使用していないと思います。
  
  以下、使用プラグインです。
  
  AddQuicktag
  Akismet
  All In One SEO Pack
  BackWPup
  Better Delete Revision
  Contact Form 7
  EWWW Image Optimizer
  Global Content Blocks
  Google Authenticator
  Google XML Sitemaps
  JavaScript to Footer
  Jetpack by WordPress.com
  PS Auto Sitemap
  WP Multibyte Patch
  WP No Category Base
  
  >そう言った状態を見るには、実際の不具合のあるページを見てみないと何とも言えないです。
  
  申し訳ありません。当サイトは
  http://waterwork-s.com/です。
  
  引き続きアドバイスいただけると幸いです。
- 2016年5月30日 9:01 PM #41618
  Hidekichi
  ゲスト
  子テーマstyle.cssに書いてあると思われる
```
.article h2 {
    border-left: 2px solid #022b8a;
    margin: 40px -29px 20px;
    padding: 25px 30px;
    font-size: 26px;
}
```
  が原因かと。margin、paddingがPCの状態のままスマホでも適用されているのではみ出します。narrow.cssでpadding:15pxがあったので、それにあわせると、
```
@media screen and (max-width: 30em) {
  .article h2 {
    padding: 15px 30px;
    margin: 40px -15px 20px;
  }
}
```
  これで良いかと思います。
- 2016年5月30日 9:04 PM #41619
  Hidekichi
  ゲスト
  メディアクエリを子テーマstyle.cssに追記か、mobile.cssに
```
.article h2 {
  //内容同じ
}
```
  と書くかします。
- 2016年5月30日 9:20 PM #41620
  
  山田
  ゲスト
  
  Hidekichiさんありがとうございますm(_ _)m
  答えを教えていただいて、助かりました。（赤面
投稿者

投稿