猫も杓子もスマホ、スマホ
かく言う私もiphoneですが
ブログやサイトを作る上で
スマートフォンの存在は
避けては通れません。

私は元もとPCで来ているので
別にスマホなんてーと
言う派なんですが
時として自分のブログを
スマホで見てびっくりすることが
多々あります。

まず
文章がとんでもない所で
切れている…

画像が変…

囲み枠が飛び出している…

等々

見てびっくりってことが
あるわけです。

通常PC表示に慣れている人は
スマホ表示を見ると
なんか物足りないな…と
思うのではないでしょうか?

画面が小さい分
情報量もかなり大胆にバッサリ
カットされていたりします。

ですから
私の場合、スマホで見る時も
わざわざPC表示に変更してから
見たりするわけです。
スマホの画面
最近では
(結構前からですが…)
スマホだけじゃなくて
タブレット端末とか
色々出ており、それぞれで
自分のサイトがどう表示されているか?

誰しも気になるのではないでしょうか?

iphoneではどう見えているのか?
ipadではどう見えているのか?
Nexus7ではどう見えているのか?

金持ちなら
それぞれを購入して表示確認すれば
いいわけですが、通常はなかなか…


そこで
今回は、チャッチャと自分のサイトが
各端末、ブラウザ等でどう表示されて
いうるのかを確認できちゃう!(´▽`)
超便利な方法をサクッとご紹介します。


もち 無料です!ヽ(´▽`)/


スマホは持ってなーいという人でも
PC1台でいろいろな端末の表示確認が
すぐにできちゃうおススメ法ですよっ!



超簡単!ブラウザ、端末表示確認法


知っている人は知っていると
思いますが、この方法はGoogleChromeの
Emulation機能を使います。

最近、私はその誘惑に負けて
ついにメインブラウザをOperaから
GoogleChromeに変更しましたが
X New Tab Page  WindowsXP→Windows7 使用環境を整える 
こんなところでも
GoogleChromeは便利なんです。


【やりかた】

※これは私のやり方であり
これが絶対ではありません。
間違っていたらお教え願います。


まず、確認したいサイトを
Chromeで表示します。

その状態で
Shift+Ctrl+Iを押します。
(シフト+コントロール+アイ)
同時に押すのよっ!(^_^;)
シフト+コントロール+I


すると…
なにやらウインドウが出てきます。
Chromeのバージョンによって
出てくる位置は異なるかもしれません。

設定マークをクリックします。
設定マーク


次に
Settingという画面になるので
一番上のGeneralをクリックします。


Generalを設定する

そして
画像にあるように
AppearanceのShow Emulation~に
クリックを入れます。
(これでEmulationの画面表示が可能)

ここまで設定したら
その画面は右端の×マークを
クリックして閉じます。

次に
さっきの設定マークの横にある
三本線マークをクリックして
下さい。

三本線マーク

さあ
いよいよですよ!o(^o^)o
Emulationの設定です。

まず
端末設定からいきましょうか?
このEmulationがすごいのは
端末を選べるのですよ。

端末。

表示を見る端末まで
選べちゃうのです。

メユー一番上のDeviceを選び
細長いところの最後の▼を押すと
端末が選べます。

決定はEmulateをクリック。
デバイスを選ぶ

▼マークをクリックすると
大変ですよ!ズーラーと
端末が出てきます。

Amazon Kindle
Apple ipad
iphone3GS
iphone4
iphone5
BlackBerry Playbook
BlackBerry Z10
BlackBerry Z30
Google Nexus4
Google Nexus5
Google Nexus7
Google Nexus10
Google Nexus S
HTC Evo.
HTC OneX
LG Optimus G
LG Optimus LTE
LG Optimus One
Motorola Deyy.
Motorola Droid3,4,
Motorola Xoom,Xboard
Nokia C5,6,7
Nokia N8,X7
Samsung Galaxy Note3,Ⅱ
Samsung Galaxy S,W,S4
Samsung Galaxy Tab
Sony Xperia S
Sony Xperia Z

※例 iphone5ならそれを選択します。

この中から表示を見たい端末を選んで
Emulateをクリックします。


次に…
User Agentを設定します。
さっきは端末を設定したので
今度は使用OS?を設定します。

まず
User Agentをクリックして
メニューを表示したら
一番上のSpoof~にクリックを入れたら
同様に▼マークをクリックして
OS?を選択します。

※例 iphone5でiOS7ならそれを選びます。

User Agentを設定

そうすると
以下のような画面になります。
ちなみに私の場合、
ScreenとSensorsは自動的にチェックが
入りました。気になる人は確認して下さい。

例 iphone5

これで終わりです。
あとは、キーボードのF5キーを押すか
再表示をすれば、ほーら(*´∀`*)
でましたよ!

スマホ表示が!

F5を押して再表示!できた!

どうですか?
いーでしょう?

スマホを持っていないあなたでも
PCの画面で簡単に、完璧に
スマホの画面のチェックができます。

URLをクリックすれば
ちゃんとスマホ表示でサイトへ
飛びます。

もちろん
デバイスを切り替えれば
Amazon Kindle
Apple ipad
iphone3GS
iphone4
iphone5
Google Nexus7等

表示画面を簡単に確認することが
できてしまうのです。

んーファンタスティック

ネットって本当にいいですね!

tomchi



P.S.
cookieが効いていて
表示枠はスマホなのに
表示されている内容はPCという
こともあり得ます。

手動で切り替える

この場合でも
きちんとスマホとして認識は
されています。

例えばFC2ブログの場合
スマホでもPC表示が可能なので
cookieがPCで効いていると
上の画像のようになります。

スマホでPC表示をしている…
という設定ですね。この場合。


この場合は
一番上のスマートフォンで表示という
ところをクリックすれば、OKです。

スマホ自体で表示しても
こうなります。
忠実に再現できているというわけです。

クリックすれば、ホラこの通り。

切り替えできた!

広告まであって
まんまスマホですね!

一度設定すれば
cookieが効いている間は
いつでも簡単にスマホ表示が可能です。

ポイントは

表示を確認したいサイト

Shift+Ctrl+I

各設定ができているとして
F5キーを押して再表示

これだけです。


忘れやすいのは

F5キーを押して
再表示させることです。


いーや

たまりません…
関連記事
 カテゴリ
 タグ
None