スマホ用に作られたサイトをパソコンで簡単に確認する方法


最近はスマホでネットしている方が非常に増えましたよね~。
まぁ確かに気が向いたときに、手元ですっと見れるってのは非常に便利ですからねぇ。

それに伴って、これまではPC用のサイトが中心でしたが、スマホでアクセスされてもきれいに表示されるようなサイト作りが必要となってきています。

こちらのブログでも紹介してきたWPtouchなどのWordPressのプラグインは非常に優秀ですよね。
ちょっと調整すれば、とってもスマートに表示してくれますから。

ただ自分もそうなんですが、ブログの更新ってやっぱりパソコンでしている方が大半なんじゃないでしょうか?
そんな時、スマホ用のサイトがどう表示されるかってのを確認したいって需要があるんじゃないかと思うんですよね。
これまでは自分もiPhone片手に確認してたりしたんですが、やっぱりちょっと不便ですよね。

今回はPCを使いながらにして、簡単にスマホサイトを確認する方法を解説していこうと思います。

といっても、実は非常に簡単なんですよ

すでにご存知の方も多くおられるかと思いますが、これが非常に簡単にできちゃうんです。

その方法とは

Google Chromeを使う

ってことなんです。

だからすでにChromeを使っている方は、すぐにできちゃいますね(^^)

まだの方は、ちょいと面倒かもしれませんが、まずはインストールしてくださいね。

ダウンロードはこちらからどうぞ。

 インストール後も簡単ですよ

これまではクロームでもプラグインを入れなければいけなかったんですが、最近のは標準で便利な機能が付いてるんですよ。
だからその方法というのもとっても簡単です。

では具体的に解説していきましょう。

インストールが終わったら、確認したいサイトを表示してみてくださいね。

SP1

ちなみにこれは自分のサイトですね。
ここで画面のように右クリックをして、“要素を検証”ってのを開いてみてください。

SP2

すると、こんな感じでサイトのソースを表示する画面が出てきます。
ここでソースが表示されている右上の方にある、“>三”みたいなボタンをクリックしてみてください。

SP3

そうすると、画面の下の方に別のウインドウが出現したかと思います。
その中の“Emulation”というタブをクリックしてもらうと、上の画面のようにデバイスを選択できる画面が出てきます。
どっかで聞いたような名前が出てますよね?

そして、デバイスのところをクリックすると

SP4

 

じゃじゃーん!!

たくさんのスマートフォンおよびタブレットの名前が表示されているではないですか!!

そして、仮想で表示させたい端末を選択して、”Emulate”ボタンをクリックしてください。
今回はGoogleさんに敬意を表して、Nexus 5を選択してみました(^^)

もしかしたら、最初はPC用のサイトが表示されてしまうかもしれませんので、その場合には“F5″で再読み込み(リロード)してみてくださいね。

SP5

すると、こんな風にスマホ用のサイトが表示されるのでした!!

画面の割に小さ目に表示された場合には、適宜ウインドウの大きさを調整していい大きさにしてみてくださいね。
そしてこれもとっても役立つんですが

スマホサイトのソースもちゃんと表示してくれる

って機能もついてます。
これ結構役に立つんですよね。

スマホで直接ソースを見ようとしても、iPhoneとかだとちょっと複雑なんですよね。
そんなとき、デバイスでiPhoneを選択してエミュレーションすれば、iPhoneで見た時のソースが確認できちゃいます。

意外と簡単でしょ??

先日WPtouchへのアドセンスの貼り方に関してコメントいただいた「ゆっきー」さんも、もしよかったらこの方法でアドセンスがちゃんと表示されているか確認されてはいかがでしょうかね?
ついでにソースも確認できるので、うまく表示されない時にどこが原因かも分かりやすいかと思われますし。
もしこの記事を見られているようでしたら参考にしてくださいね♪

ちなみにこの方法を使うと、スマホでしか絶対見れなかったサイトも、パソコンで見れちゃったりするんですよね。
ちょっと考えると、いろんな使い道があるかも?

ま、そんなわけでグーグルクロームの宣伝みたいになっちゃいましたが、結構便利な機能ですので、皆さんもぜひ使いこなしてみてくださいね。

本日もありがとうございました。


→ この記事がお役に立てば、ブログランキングかSNSで応援クリックしていただけるととっても嬉しいです(^^)/

人気ブログランキングへ

コメントを残す

CAPTCHA


サブコンテンツ

スポンサー-楽天-

このページの先頭へ