ベクトルドロー・レベルゼロ+

ホーム > コンピュータ > webツール > Mobile対応への道

まずは、簡単にできることだけ

作成日 2015.01.16
最終更新日 2015.01.18

きっかけ

グーグル・ウェブマスターさんからお手紙をもらいました。 「あなたのサイトのページをテストし、そのうちの 100% に重大なモバイル ユーザビリティ上の問題を検出しました。」 モバイルディバイスを持っていない私への嫌がらせ?モバイル・ハラスメント? モバイルデバイスを持っていない人による、サイトのモバイル対応の記録をつけていくことにしました。

まずは、簡単にできることだけ

何をしたらいいかわからない

もらったメッセージ
読んでもよくわかりません。 「モバイルの問題を調べる」ボタンを押して、表示された内容を呼んでもよくわかりません。 「ガイドラインに従う」ボタンを押して表示されたガイドラインは英語でした。何がしたいのでしょうか?

サポートサイトに投稿

一読して、この一連のメッセージとリンクから理解するのはあきらめました。 私のサイト作成スキルでは理解できません。 指示に従い、、ウェブマスター セントラル フォーラムのモバイルサイトカテゴリに 質問を投稿しました。 ここでわかったことは、「ビューポート」と「AdSense広告」が問題であるようです。

ビューポートの設定

サポートサイトでのアドバイスを元に、ビューポートタグをサイトに追加します。
Web検索をかけて ビューポートに関するページを調べてみました。
このページによると、<head>~</head>内に、 <meta name=viewport content="width=device-width, initial-scale=1"> 上記コードを追加すればいいようです。
PCでの閲覧に影響は出ないようです。

作業

「Expression Web 4」の検索置換機能を利用してすべてのページに上記メタタグを追加しました。
PCからのビューには影響なく変化ありませんでした。

PC用モバイルビュー確認ツール発見!

iPhone5のモバイルビュー
広告ユニットについては、「集まれ!AdSense 初心者」 で質問しました。そこで、モバイルビューの確認は、クロームでできるということを教えていただきました。

表示してびっくり!私のサイトの下に「処刑」「刑務所」「侵略」という文字が躍っています。 無料サイトFC2を利用してきましたが、有料のレンタルサーバを借りる人の気持ちが理解できました。

それは、それとして、モバイルビューを確認できることがわかりました。

レスポンシブル広告に変更

ページに張り付けてあるAdSense広告をレスポンシブル広告に変更したいと思います。 こちらも同じく、「Expression Web 4」の 検索置換機能で置換します。

問題点

「このサイトについて」の右端の空白は、cssで左側のカラムをパーセントで指定しているので、画面のサイズが小さくなった時、 Widthの値が不適切になるためです。PC画面で、ブラウザのウィンドウサイズの変化に対応させたので、 スマートフォン表示に対応できていないのです。でも、見にくいですが、何とか閲覧可能です。
Mobile対応への道 : 戻る << | >> テンプレートは書籍から
Mobile対応への道
Copyright (C) 2011-2016 kukekko All Rights Reserved.
kukekko@gmail.com
ご連絡の際はアドレスの@は半角にしてください。 また、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません 」。
inserted by FC2 system