000000 ランダム
 HOME | DIARY | PROFILE 【お気に入りブログ登録】 【ログイン】

noahnoah研究所

2015/07/16
XML
カテゴリ:その他
GoogleはWEBページがスマホ対応しているか判定するモバイル フレンドリー テストのツールを公開しています。
noahnoah研究所をチェックすると、スマホ対応していないと判定されました。

モバイルフレンドリーではありません Google

ダメな理由は、次の通りでした。

× テキストが小さすぎて読めません
× リンク同士が近すぎます
× モバイル用 viewport が設定されていません

面倒そうなので、放置していましたが、スマホで訪問してくれる人が困るかもしれないので、修正することにしました。

ひとまず、モバイル用 viewportを設定します。
これを設定しておかないと、スマホはページ全体が表示されるよう自動的に縮小してしまうからです。

<META NAME="viewport" content="width=device-width , initial-scale=1.0">

とりあえず、上記の通り、一般的なviewportを設定しておきました。
ちなみに、device-widthはデバイスのサイズに合わせて表示するという意味だそうです。
device-widthの代わりに横幅のピクセル数を指定できますが、いろいろと面倒なだけなので、やめました。
また、initial-scaleは表示倍率で、1.0なら指定しなくてもいいかもしれません。

ついでに文字を小さく表示する<SMALL>タグなども削除しました。

リンク同士を離すのにしたことは、2つあります。

1つ目はリンク先を改行するとき、<BR>の代わりに</P>を使い、空白行を加えることです。
リンクのタップサイズを考慮して7mm以上離す必要があるらしいのですが、空白行だけでも十分みたいです。

2つ目はメニューをテーブルではなく、リスト<UL><LI>〜</LI>で組み、リキッドにしました。
LIをCSSで「float: left;」指定するだけですが、ブラウザの横幅に合わせてメニューの改行位置が変わるようになります。

とりあえず、これだけでトップページはモバイルフレンドリーと判定されるようになりました。
トップページ以外も少しずつ修正していきます。

問題ありません。 このページはモバイル フレンドリーです。 このページは Googlebot にどのように見えているか

ただ、合格しても、PageSpeed Insightsを見ると「修正が必要」なところは残っています。

修正が必要 コンテンツのサイズを表示域に合わせる

横幅が320ピクセル以上の画像を使うと、どうしても引っかかります。
しかし、スマホを横にしたら表示できるサイズであれば問題ないはずです(600ピクセル以下)。



→ このnoahnoah研究所のブログ内をGoogleで検索する
→ noahnoah研究所に戻る
→ noahnoah研究所掲示板(^o^)に行く
→ 伊藤@横浜へメールを送る
noahnoah研究所ブログランキング・にほんブログ村へにほんブログ村 住まいブログ 一戸建 一条工務店へにほんブログ村 車ブログ トヨタへにほんブログ村 環境ブログ 風力発電・太陽光発電へ
※このnoahnoah研究所のブログ(http://plaza.rakuten.co.jp/noahnoah/)の画像および文章は、出典元を示していただければ、私に事前許可を得ることなく、引用していただいても構いません(出典元を示さず盗用しないようにお願いします)。


noahnoah研究所のブログ(カテゴリー一覧)
カテゴリー[ 車 ]
カテゴリー[ 家作り ]
カテゴリー[ 太陽光発電 ]
カテゴリー[ 家電 ]
カテゴリー[ ネコ ]
カテゴリー[ セキュリティ ]
カテゴリー[ 熱帯魚 ]
カテゴリー[ 健康 ]
カテゴリー[ 食べ物・飲み物 ]
カテゴリー[ 旅行・観光 ]
カテゴリー[ 庭いじり ]
カテゴリー[ ゲーム ]
カテゴリー[ 楽天ブログ ]
カテゴリー[ その他 ]


PVアクセスランキング にほんブログ村












Last updated  2016/03/11 11:21:20 PM
コメント(0) | コメントを書く


Copyright (c) 1997-2017 Rakuten, Inc. All Rights Reserved.