attention admin about comments trackbacks you may also like

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

2018年01月17日
ブログいじり
0

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

180110-04.jpg

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

前回、エラーだった、

180107-06.jpg
180107-07.jpg

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

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

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

180105-00.jpg

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

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

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

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

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

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

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

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

関連する記事
遠太
Author: 遠太
九州は福岡県中間市で環境保全や地域に関するボランティア活動中。
できる時にできる範囲で。そこには、ノルマも強制も義務もありません。

コメント(0)

There are no comments yet.