![Chromeでモバイル表示機能_05_20140827_225242 2.jpg Chromeでモバイル表示機能 05 20140827 225242 2](https://takaslife.com/wordpress/wp-content/uploads/2014/08/83804ebc040aefa6b80e521359a035e3.jpg)
ブログのテーマをカスタマイズするとき、PC表示だけではなくスマートフォン等用のモバイル表示も確認必要です。
モバイル表示は特別なアプリなどを入れなくてもGoogleのブラウザ、Google Chromeさえ入っていれば標準の機能として利用できます。
昨日ちょうど、chromeがバージョン37にアップしてちょっと仕様が変わったので、そのへんも交えてご紹介します。
デベロッパーツールを使うよ!
Google Chromeでスマホ表示させたいページを表示させます。
![Chromeでモバイル表示機能_08_20140827_225242.jpg Chromeでモバイル表示機能 08 20140827 225242](https://takaslife.com/wordpress/wp-content/uploads/2014/08/fa2ec6bc93c7af62872b09f6203c6b7d.jpg)
Macの場合、[command]+[option]+[I](Windowsは[Ctrl]+[Shift]+[I])でデベロッパーツールを開きます。
![Chromeでモバイル表示機能_10_20140827_225445.jpg Chromeでモバイル表示機能 10 20140827 225445](https://takaslife.com/wordpress/wp-content/uploads/2014/08/b1ce05ea37b51808966bb11847c0e0f0.jpg)
開いたら右側のマークをクリックすると、下からもう1段ウインドウが出てきます。
![Chromeでモバイル表示機能_06_20140827_225604.jpg Chromeでモバイル表示機能 06 20140827 225604](https://takaslife.com/wordpress/wp-content/uploads/2014/08/fb598c4a3c6be3faf68f3514eb4baebf.jpg)
「Emulation」のタブをクリックします。
バージョン36までは、ここまでの操作でモバイル表示への操作ができたのですが、37になってからちょっと変わっています。上の「スマホマークを押しなさい」みたいな表示になるので、従って押しましょう。
![Chromeでモバイル表示機能_09_20140827_225242.jpg Chromeでモバイル表示機能 09 20140827 225242](https://takaslife.com/wordpress/wp-content/uploads/2014/08/3de485d869a03e1bc17eea835d679c56.jpg)
そうすると、このような表示になります。
![Chromeでモバイル表示機能_02_20140827_225242.jpg Chromeでモバイル表示機能 02 20140827 225242](https://takaslife.com/wordpress/wp-content/uploads/2014/08/78a9e2a8a08b18d8ce438806b43e3b10.jpg)
「Model」の部分をクリックするとスマホやらタブレットの型式が出てくるので、表示確認したい端末を選びましょう。
![Chromeでモバイル表示機能_05_20140827_225242.jpg Chromeでモバイル表示機能 05 20140827 225242](https://takaslife.com/wordpress/wp-content/uploads/2014/08/c51cc6969197e0b326680657f7a78917.jpg)
これで、モバイル表示を確認できるようになりました。
もし、表示がうまく変わらない時はブラウザのキャッシュが残っているからだと思うので、キャッシュクリアーをしてみましょう。
参考:ブラウザのキャッシュをクリアーするChromeの拡張機能「CacheClear」はすごく便利! | Taka’s Life
表示切り替えはボタンひとつ
![Chromeでモバイル表示機能_03_20140827_225242.jpg Chromeでモバイル表示機能 03 20140827 225242](https://takaslife.com/wordpress/wp-content/uploads/2014/08/fbb540eb71d11b63e1143f182fbe8f5b.jpg)
PC表示に戻したいときは左上のスマホマークをポチッとするだけでOK!モバイル表示にしたければもう一度ポチッと!
切り替えがChromeバージョン37になったら、すごく簡単になりました。
まとめ
私のサイトも3分の1はモバイル端末からアクセスして頂いているので、モバイル表示の確認は絶対必要だなぁと感じています。
Chromeにはこの様に、標準でモバイル表示を簡単に確認できる機能がついていますので活用してみてはどうでしょうか?
Chrome標準機能なので、もちろん無料ですw
コメント