モバイルフレンドリーではありません。の表示について

「モバイルフレンドリーです」ってでてきますが、robot.txtでいくつか画像とスクリプトがブロックされているようです。
ブロックされたリソースのようなこともあるようなので、googleのbotが内容を読み取れるようにしないといけないかも知れませんね。

またモバイルフレンドリーではないと言われたページはどれですか？
トップページは問題なさそうですが、ページによっては何かしらがはみ出していたりするかもしれません。

Hidekichiさんが仰られているように
ページが分からないので何ともいえませんが
ブロックはしていなくともcssが読み込まれないということはたびたび発生します
(数時間後には直っていたりも)

なので時間を置いてfetchさせると直りそうですけどね

robots.txtの方にはブロックするようなことは書かれていませんし…
(WordPressが作成する内容とsitemapの指定のみ)

Hidekichiさんが仰られている

「モバイルフレンドリーです」ってでてきますが、robot.txtでいくつか画像とスクリプトがブロックされているようです。

は外部サービスのものなので対応することはできません
(トップページを確認と言う認識です)

Googleは謎なので体験談とある程度の確認だけですが
参考になれば…

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

Hidekichiさん、みきさん
コメントありがとうございます。

http://xn--fx-ph4angpe.com/post-2882
このページがフレンドリーではないようです。

記事によっては、何も影響はなかったり。

http://xn--fx-ph4angpe.com/post-2819（このページは画像も、文字も同じくらいですが、モバイルフレンドリーのようです。）

ページがフレンドリーではないページを、「モバイルフレンドリーテスト」で送信してみたのですが、特に変わらずでした。（問題がなければこのままでも良いと思っていたのですが、上位表示や、検索エンジンで影響があるとやはり考えなければと思います。）

ご教授いただけると幸いです。

.navigationと記事内のh2がモバイルの時にはみ出しているようです。

h2はネガティブマージンを止めて単にpaddingだけで設定すればよいかと思います。
.navigationも同様にネガティブマージンによってはみ出しています。

これらは、モバイルの時にmarginを無くしたらよいと言うだけですが、もう一つか二つかはわかりませんがはみ出している要素があるようです。見つけられてませんが枠を押し出す何かがありそうです。

一般的な注意点としてpaddingは要素内を指定の値で埋めるプロパティです。これを使う時にwidthがあった場合、そのコンテンツ領域をwidthの幅に合わせようと外に広がります。ボーダーも同様です。

サンプル: box-sizing: border-boxの重要性 | jsFiddle

このサンプルのように、想定した値と実際の挙動が異なることがあるわけです。なので、要素にwidth、paddingやborderを入れる場合、指定した値に収める場合は必ずその要素に、box-sizing: border-boxを入れて下さい。デフォルトはcontent-boxです。サンプルのはみ出しているものが後者。

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

Hidekichiさんコメントありがとうございます。

さきほどの通り修正しました。

・.navigation

・h２

・h４

のmarginを全て削除しました。

この解釈で合っていますでしょうか？

https://jsfiddle.net/ghr18433/1/を参考にすると、paddingも消しちゃったほうが良いのでしょうか？

今はもうはみ出してはいないみたいですね。

marginを消すというのが正しいかと言うと、ちょっと違って、ネガティブマージンというのは、マイナスの値を入れてマージンを設定することです。ネガティブマージン自体が悪いわけではなく、レスポンシブに設定されていないのが問題なわけです。

例えば、PC時に#mainのpaddingがあって、その中身の要素で#mainの幅いっぱいに使うために、#mainのpadding分マイナスの値を設定してあるわけですが、スマホ画面になって、#mainのpaddingが変われば、その値を変更しないとpadding分はみ出すということなわけです。

サンプルでは、box-sizingがないと、中のコンテンツ領域をwidthのサイズに合わせようとブラウザがするのでpadding分はみ出すということで、その場合はbox-sizingを入れることで、paddingやボーダーを含めたサイズがwidthに収まるということを意味しています。

今回はみ出していたh2や.navigationはサンプルの状態ではなく、マイナスの値を親要素のpadding分用意してあるので、スマホの時は値を変更するためにメディアクエリを使って指定しないといけないということです。
なのでちょっと意味合いが違います。

最近では、親の(ここでは#main)の幅がわかっているのであれば、

サンプル: translateでなんとかする | jsFiddle

こんな感じにすることで幅いっぱいにすることができます。ただ考え方がややこしいかも知れないのと、親要素がいつも正しくbox-sizingが設定されていないかも知れないということを考えると、Simplicityの場合でも、#mainのpaddingをとり、中の要素にwidthとmarginを入れて、それをセンタリングすることで左右に余白を作ることができます。このwidthを100%にすれば#mainの幅いっぱいにできますから最初は手間ですが後々は色々と楽になる可能性はあります。

サンプル: #mainの中身をmarginでレイアウト | codepen

デベロッパーツールで見てもらえればわかりますが、#mainからpaddingを取ることでアイキャッチが幅いっぱいに使えたり、部分的に幅を変更することも可能です。

まぁあくまで参考例なので、全てがそのまま上手く行くとは限りません。

現在は修正された内容で特にはみ出していないのでテストも合格すると思うんですがどうでしょうか？

Hidekichiさん、

詳しく解説ありがとうございました。

新しく記事を投稿したのですが、無事合格できました。

marginとpaddingを勉強し直すのと、上記のサンプルも確認させていただきます。

この度は、ありがとうございました。