180117 モバイルフレンドリーその２

前々回の記事で「モバイルフレンドリー」を紹介しましたが、再度検証してみました。

レスポンシブ未対応なのに、グーグル様から認定いただきました。

前回、エラーだった、

「コンテンツの幅が画面の幅を超えています」は、 viewport 設定などはそのままなのですが・・・なぜかクリア。

「クリック可能な要素同士が近すぎます」は、ここは改善しました。

以前の記事の画像ですが、

テキストリンクの間隔が狭いのが原因だと思われ、以前に♥マークの画像を書き込んではいたのですが、プラグインのソースを確認。

リスト表示だったので、divでくくり直しました。もともとリストには、margin なり、 padding が有ると思われますが、テンプレートの作者さんがCSSでその値を変更しているかもしれません。本来ならそこのCSSを書き変えるのが本筋なのでしょうけれど・・・

レスポンシブには対応していませんし、全体が縮小し画面が収まって、文字が小さいのが指摘されなかったのが不思議ではあります。

そして、viewport 設定して、img max-width:100% も指定しているのにレスポンシブしない理由が分かりました。

ヘッダーのブログ名の背景画像ですが、グーグルクロームなら、右クリックから、ソースを表示して、さらにCSSのアドレスをクリックすると、CSSを見ることができますが、CSSのヘッダー部分に背景画像でURLを書き込んでいるのが、img max-width:100% とならないようです。

考えてみたら、当然ですよね。
対策としては、背景画像にタイトルテキストを書き込んで画像として、HTMLに img で表示する。すると画面が小さくなると、今より見にくくなる・・・

なお、レスポンシブチェッカーではエラーとなります。

また、FC2ブログの場合、初期設定のままスマホなどで表示させた場合、スマホ用のテンプレートに自動で表示されるようになっているようです。当ブログはその設定を解除しています。

ブログランキングに参加しています。応援よろしく です。

ブログランキングに参加しています。
応援よろしく です。