2015.07.16
テーマ： Webサイト作成＆運営(131)
カテゴリ： その他
GoogleはWEBページがスマホ対応しているか判定する モバイル フレンドリー テスト
のツールを公開しています。
noahnoah研究所 をチェックすると、スマホ対応していないと判定されました。
ダメな理由は、次の通りでした。
× テキストが小さすぎて読めません
× リンク同士が近すぎます
× モバイル用 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以上離す必要がある らしいのですが、空白行だけでも十分みたいです。
<UL><LI>〜</LI> で組み、リキッドにしました。
LIをCSSで「 float: left; 」指定するだけですが、ブラウザの横幅に合わせてメニューの改行位置が変わるようになります。
とりあえず、これだけでトップページはモバイルフレンドリーと判定されるようになりました。
トップページ以外も少しずつ修正していきます。
横幅が320ピクセル以上の画像を使うと、どうしても引っかかります。
しかし、スマホを横にしたら表示できるサイズであれば問題ないはずです（600ピクセル以下）。
→ このnoahnoah研究所のブログ内をGoogleで検索する
→ noahnoah研究所に戻る
→ noahnoah研究所掲示板(^o^)に行く
→ 伊藤＠横浜へメールを送る
noahnoah研究所のブログ(http://plaza.rakuten.co.jp/noahnoah/) の画像および文章は、出典元を示していただければ、私に事前許可を得ることなく、引用していただいても構いません（出典元を示さず盗用しないようにお願いします）。
noahnoah研究所 をチェックすると、スマホ対応していないと判定されました。
ダメな理由は、次の通りでした。
× テキストが小さすぎて読めません
× リンク同士が近すぎます
× モバイル用 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以上離す必要がある らしいのですが、空白行だけでも十分みたいです。
<UL><LI>〜</LI> で組み、リキッドにしました。
LIをCSSで「 float: left; 」指定するだけですが、ブラウザの横幅に合わせてメニューの改行位置が変わるようになります。
とりあえず、これだけでトップページはモバイルフレンドリーと判定されるようになりました。
トップページ以外も少しずつ修正していきます。
横幅が320ピクセル以上の画像を使うと、どうしても引っかかります。
しかし、スマホを横にしたら表示できるサイズであれば問題ないはずです（600ピクセル以下）。
→ このnoahnoah研究所のブログ内をGoogleで検索する
→ noahnoah研究所に戻る
→ noahnoah研究所掲示板(^o^)に行く
→ 伊藤＠横浜へメールを送る
noahnoah研究所のブログ(http://plaza.rakuten.co.jp/noahnoah/) の画像および文章は、出典元を示していただければ、私に事前許可を得ることなく、引用していただいても構いません（出典元を示さず盗用しないようにお願いします）。
お気に入りの記事を「いいね！」で応援しよう
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
