当サイトを作って、しばらく経ちますが、 Googleアナリティクスで、 モバイルユーザーフレンドリーではない、という表示がずっとされていました。
このモバイルユーザーフレンドリーというのは、 スマートフォンやタブレットなどの携帯端末でサイトを表示した時に見やすく表示されるか、 というもののようです。
私は普段、PCでネットをしているので、 ついつい対応を後回しにしていましたが、 これだけスマートフォンを利用している方が多くなった時代なので、 モバイル対応もしっかりしないと、と考えました。
ちなみに、無料ブログなどを使っている場合は、 そちらのサービスでモバイル対応してくれていると思いますし、 WordPressなどを使っている場合もそちらで対応してくれていると思うので、 何も対応しなくても良いのではないかと思います。
phpやperlなどで自前でサイトを作った時は、 自分でモバイル対応をしなければならない場合が多いのではないかと思います。
モバイルフレンドリーサイト作りを開始
さて、モバイルユーザーフレンドリーのサイトを作ろうと思いましたが、 実現するには無数の方法があるようです。
その中で自分に合ったやり方をすることになると思いますが、 あまり難しい方法だと大変なので、簡単な方法を試してみることに。
今回、私がやってみたのは以下のような方法です。
・ユーザーエージェントを取得して、スマートフォンからのアクセスかどうかを判定。
・PC用、モバイル用とスタイルシート(.css)を2つ用意して、 もしもスマートフォンからのアクセスだったら、モバイル用のスタイルシートを表示する。
という方法にしてみました。
私のサイトはphpで書いているので、以下phpでの例です。
ユーザーエージェントでスマートフォンからのアクセスを判定
まずは、phpでユーザーエージェントを取得して、 スマートフォンからのアクセスかどうかを調べます。 以下のサイトが参考になりました。
ユーザーエージェントでスマホとPCを判別し、処理を変化させるPHPネタ
こちらのサイトのコードを使わせていただけばよいのですが、 私はちょっとまだるっこしいプログラムにしてみました。
$sumafo_Flag=0として、 $sumafo_Flag変数を用意して、 スマートフォンなら、1を代入します。
$ua = $_SERVER['HTTP_USER_AGENT'];
$sumafo_pos1 = strpos($ua,'iPhone');
if ($sumafo_pos1 !== false) {//見つかった
$sumafo_Flag=1;
}
$sumafo_pos1 = strpos($ua,'iPad');
if ($sumafo_pos1 !== false) {//見つかった
$sumafo_Flag=1;
}
$sumafo_pos1 = strpos($ua,'iPod');
if ($sumafo_pos1 !== false) {//見つかった
$sumafo_Flag=1;
}
$sumafo_pos1 = strpos($ua,'Android');
if ($sumafo_pos1 !== false) {//見つかった
$sumafo_Flag=1;
}
こういう風にして、
$sumafo_Flagが0ならPC用、$sumafo_Flagが1ならスマートフォン用のスタイルシートを表示します。
HTMLを表示するページの修正
HTMLを表示する部分を書き換えます。
まずは、
タグ内に、ビューポートというメタタグを書かないといけないようです。 いろいろメタタグが並んでいるところの最後に<meta name="viewport" content="width=device-width,initial-scale=1">
と書きました。
続いて、スタイルシートを切り替えます。
タグないの、スタイルシートを指定している部分を書き換えます。$sumafo_Flagが1なら、スマートフォン用のスタイルシートを表示します。 0なら、PC用のスタイルシートを表示しておきます。
if($sumafo_Flag==1){
print '<link rel="stylesheet" href="article_style_mobile.css">';
}
else{//PCサイト
print '<link rel="stylesheet" href="article_style.css">';
}
スタイルシートの修正
最後に、スタイルシートですが、 PC用の他に、モバイル用も作ります。 モバイル用のスタイルシートはコンテナのWidthを100％にしておけばそれで良さそうです。 あと、FlexBoxを使っている場合などは横並びから、縦並びに変える必要もありそうです。
これで基本的なモバイル対応が出来ました。
モバイルフレンドリーができたかどうか、テストする
モバイル対応がされているかテストしてみましょう。
モバイル対応がちゃんとできたかどうか確認するにもいくつかの方法があります。
一番簡単なのは、自分のスマートフォンでサイトを表示してみる、ということだと思います。
また、Chromeの拡張機能で、
FireMobileSimulator for Google Chrome
というものがあります。こちらをインストールすると、PCからスマートフォンの表示を確認することが出来ます。 私もこちらを入れて確認してみました。 ページを表示させたら、リンク先をクリックしたり戻ったりすると、 黒枠が表示されますね。その黒枠の中に収まっていれば良いようです。
さらに、 モバイルフレンドリーテスト
というサイトもあります。こちらはGoogleが用意してくれたものでしょうか。 自分のサイトのURLを入れるだけで、モバイルフレンドリーになっているかどうか判定してくれます。
最終的には、このモバイルフレンドリーテストで確認するのが良さそうです。 これらで確認して表示がおかしなところがあったら、修正を繰り返す、ということになります。
今回のまとめ
ということで、簡単でしたが、サイトのモバイル対応について書いてみました。 今回はphpを使ったサイトでのやり方でした。
HTMLを表示するファイルは一つで、スタイルシートによって切り替えるという方法にしてみましたが、 意外と簡単にモバイル対応することができました。
実際にモバイル対応をする場合は、各サイトに合わせて細かな修正が必要になると思いますが、 基本的な流れはこのようにすると良さそうです。
(2018/11/8)
その他のコラム
楽天カードや楽天スーパーポイントのちょっとだけ便利なワザ(2019/01/26)
管理人のネット収入2018年11月は1324円、12月は8111円。そして、2018年は65506円でした。(2019/01/08)
遅ればせながら、サイトのモバイルユーザーフレンドリー対応に挑戦。(2018/11/08)
ムームードメインでメールをたくさん作ろうと独自ドメインを取得してみました。(2018/11/02)
管理人のネット収入2018年9月は6256円、10月は残念245円(2018/11/02)
無料ブログと有料でサイト運営、独自ドメインの更新料も比較してみました(2018/09/04)
管理人のネット収入2018年8月は2286円(2018/09/01)
JavaScriptやPHPの乱数で遊んでみる。会心の一撃のようなプログラム(2018/08/25)
コアサーバーの申込とちょっと難しかった最初の設定方法。ロリポップ！との比較も(2018/08/18)
なぜか答えるのがスランプに。アンケートサイトに15年以上登録してわかったこと(2018/08/02)
2018年管理人のネット収入7月は15303円(2018/08/02)
マクロミルのポイントをGポイントに交換してみました。(2018/08/01)
普通のゲームをしていたら少しのポイントとWebMoneyがゲットできました(2018/08/01)
Web開発やプログラミングを学ぶオンラインスクールや教室を調べてみました(2018/07/26)
2018年管理人のネット収入5月は1509円。6月は1461円(2018/07/14)
マクロミルで大量ポイントがもらえるキャンペーン実施中(2018/06/21)
SQLiteで同時書き込みエラーを防ぐ方法があるのか探ってみました。(2018/06/18)
独自ドメインを取得してからサイトの表示まで2日48時間かかった話(2018/06/17)
ECナビのポイントが失効しそうだったので、慌てて貯めて交換しました。(2018/05/27)
FC2ブログでサイトマップが保留や不明になる。ミニサイトづくりで気づく(2018/05/12)
2018年管理人のネット収入4月は16700円(2018/05/12)
気のせい！？レンタルサーバーを移転した時ネームサーバーの反映が早くなるような気がする方法【独自ドメイン】(2018/04/24)
レンタルサーバー代を節約しようとコアサーバーにサーバー移転とマルチドメインを計画(2018/04/03)
動的なページを静的なページに見せるURLリライトをするための.htaccessの書き方(2018/04/03)
2018年管理人のネット収入2月は3486円、3月は1173円(2018/04/02)
クラウドワークスから初めて振込がありました(2018/03/03)
電気代が気になってきたので仮想通貨のマイニングを一旦休憩します(2018/02/23)
新しいポイントサイトのcolleeに登録してみました(2018/02/11)
金利が上がっているアメリカ国債をチェック(2018/02/11)
【仮想通貨】投資の王道は株・不動産・債券か(2018/02/06)
仮想通貨NEMの流出問題の経過をまとめてみました(2018/02/02)
アクセストレードのサイト作成コンテストで10万円(2018/02/02)
2018年1月管理人のネット収入は7652円(2018/02/01)
仮想通貨ビットコインが暴落した時の仕組み(2018/01/22)
仮想通貨のマイニングではじめての報酬ゲット(2018/01/15)
【仮想通貨】チューリップの球根にどれだけの価値があるのか(2018/01/09)
【マイニング】ビデオカードについて勉強したことのまとめ(2018/01/07)
【マイニング】古いマザーボードで新しいビデオカードに交換の相性問題(2017/12/05)
独自ドメインでサイトを作って3か月のアクセス数やサーチコンソールなどについて(2018/01/02)
2017年12月管理人のネット収入は2710円(2017/12/29)
サイトのデザインやレイアウトを変更して注目度アップさせよう(2017/12/28)
仮想通貨のCPUマイニングならRyzenがおすすめ！？(2017/12/28)
マイニング用にグラフィックボードを交換したら電気代はいくら増えるのか(2017/12/27)
自作PCやゲーミングPCユーザーは空いた時間に仮想通貨のマイニング(2017/12/26)
投資の世界。価格の下落は半値八掛け二割引？(2017/12/24)
ビットコイン急落のニュース(2017/12/23)
ビットコインは暴落するのか(2017/12/22)
あれ？成果が上がってる・・・アフィリエイトは気まぐれ(2017/12/22)
MinerGATE仮想通貨をマイニングするツールの使い方と画面の見方(2017/12/19)
仮想通貨がもらえるというマイニングを試してみました(2017/12/18)
PCのファンの音がうるさくなった(2017/12/18)
Windows 10でのCドライブのクリーンアップをして容量を確保(2017/12/16)
windows 10のfall creators updateで画面表示に不具合が出たので対策をしました(2017/12/14)
バリューコマース版のAmzonアソシエイトの審査に通って登録してもらえました(2017/12/13)
仮想通貨のビットコインは一年間で20倍に(2017/12/11)
評判の良いマクロミルのアンケートに答える時のちょっとしたコツ(2017/12/09)
投資で出てくるブルとベアの簡単な覚え方(2017/12/07)
ヤフオクの匿名配送スタートと楽天オークションの思い出(2017/12/07)
独自ドメインでサイトを作って2か月のアクセス数やサーチコンソールなどについて(2017/12/05)
スタイルシートのコメントアウトで私がよくやる凡ミス(2017/12/05)
音楽で収入をゲット！？(2017/12/04)
2017年11月管理人のネット収入は14542円(2017/12/01)
PeXでポイント交換する時にちょっとした話(2017/11/30)
イラストを描いてお小遣いを稼ぐ(2017/11/29)
個人でゲームを制作して収入を得る！？(2017/11/27)
スタイルシートのflexboxで2カラムのレイアウトを組むテスト(2017/11/25)
Thunderbirdのインポートやエクスポート、メールの保存などの方法を調べてみました(2017/11/24)
在宅ワークのクラウドワークスに登録してみました(2017/11/22)
YouTubeに動画投稿するユーチューバーは稼げるのか(2017/11/20)
本の「せどり」や輸入した品を販売したら稼げるのか(2017/11/19)
病院の口コミサイトが規制になるようです(2017/11/16)
写真や画像を著作権フリーで使って良いフリー素材アイドル(2017/11/15)
.htmlにphpを埋め込んで動作させる際のローカルとロリポップの.htaccessの設定(2017/11/14)
アフィリエイト広告を掲載するだけで報酬をゲット！？(2017/11/13)
アフィリエイトのためにニッチな検索キーワードを探す(2017/11/12)
洋服やバッグなどハンドメイド作品を作っていくら稼げる？(2017/11/11)
ビットコインなどの仮想通貨はどこで買えばいいのか(2017/11/10)
バリューコマースの50万円ボーナスキャンペーン(2017/11/10)
2017年10月管理人のネット収入は3548円(2017/11/09)
アフィリエイターはつらいよ！？痛い！腱鞘炎の対策(2017/11/07)
blockquoteの背景色はスタイルシートで何色にするか(2017/11/06)
独自ドメインでサイトを作って1か月のアクセス数やサーチコンソールなどについて(2017/11/05)
日経リサーチアクセスパネルのキャンペーンはアンケートに回答するだけでチャンスが増える(2017/11/05)
sqliteとmysqlの違いとメリットデメリット(2017/11/04)
.htaccessファイルがうまく効かないときに見直した書き方(2017/11/04)
phpでsqlite3を設定しても使えない時に私がやっていたとんでもない凡ミス(2017/11/03)
php5.6からphp7.1に変更した時にソースを手直しした部分(2017/11/02)
月収100万円以上をサイトで稼ぐ伝説のスーパーアフィリエイター(2017/10/31)
稼げたのに終了してしまったアフィリエイトサイト(2017/10/31)
Googleアドセンスで稼いでいる方に学ぶブログの作り方(2017/10/30)
VPSのMySQLをエクスポートして自分のPCにインポートする方法(2017/10/29)
キューモニターでポイントが貯まらない時のちょっとしたコツ(2017/10/27)
スタイルシートのflexboxが効かない時に私がやってしまっていた凡ミス(2017/10/26)
儲からない！サイトが赤字になってしまった時どうするか(2017/10/25)
レンタルサーバーを借りる時に見ておきたいスペック(2017/10/23)
ポイントコツコツ貯める派にもすごく嬉しいT-SITE(2017/10/23)
クリック保証型のアフィリエイト忍者AdMaxも使いやすい(2017/10/22)
海外VPSをレンタルするメリットは？(2017/10/21)
A8ネットの振込手数料はゆうちょ銀行にすると30円(2017/10/20)
一度は見たことがある？このイラスト素材はどこのサイトのもの？(2017/10/19)
難しい！Googleアドセンスと成果報酬型どうやって稼ぐのか(2017/10/18)
まさか！Amazonアソシエイトの審査に落ちてしまった理由と対策(2017/10/17)
共用レンタルサーバーとVPS、アフィリエイトをするならどっち？(2017/10/16)
家にいながら仕事ができるランサーズにはどんな種類の仕事があるのか(2017/10/15)
楽天アフィリエイトは初心者の方におすすめなので使い方を紹介します(2017/10/14)
アフィリエイトをするなら無料ブログと有料レンタルサーバーどちらがいい？(2017/10/13)
ロリポップの独自ドメインで403エラーが出る(2017/10/12)
バリューコマースのオートMyLinkがいい感じ(2017/10/11)
楽天スーパーポイントで投資信託を買うのがお得かも(2017/10/10)
アフィリエイトを学ぶ参考書(2017/10/09)
キューモニターで貯めたポイントを換金してみました(2017/10/08)
げん玉で稼げそうな方法を考える(2017/10/07)
マクロミルで貯まったポイントを複数経由する(2017/10/02)
コンテンツ
アンケートで稼ぐ
ポイントサイトで稼ぐ
ライティングで稼ぐ
在宅ワークで稼ぐ
アフィリエイトで稼ぐ
ポイントサイト一覧
ライティングサイト一覧
アフィリエイトサイト一覧