暇人北っちの趣味ブログアフィリエイト。

ギター、ゲーム、アニメ。やりたいことに時間とお金を使おう。

Google Chromeでブログのスマホレイアウトをチェックする方法

最近はスマートフォン対応のブログも増えてきました。
しかし、いちいスマホからブログをチェックして
レイアウトの確認するのはめんどくさい。

そこでパソコンでもあなたのブログを
スマホ表示に出来る方法をお伝えします。

Google Chromeを使おう

利用するのはGoogle Chrome。
北っちも普段から利用している
インターネットブラウザです。

→Google Chromeのインストールはこちら

今回はGoogle Chromeの
デベロッパーツールというのを利用します。

 

あ、意味わかんなくても大丈夫です。
画像載せていくんでそのとおりに操作してください。

 

デベロッパーツール1

まずはGoogle Chromeの右上にある、
設定のところをクリック。

その中に「ツール」というのがあります。
さらにその中。デベロッパーツールってのを探します。

 

見つけたらクリックしてください。

 

デベロッパーツール2

 

!?!?!?!?

謎の文字列が表示されました。
しかし慌てない慌てない。

 

画像の矢印のとこ、歯車のマークがあります。
これをクリックしてください。

 

デベロッパーツール3

このような画面が表示されます。
左メニューから「Overrides」をクリック。

そして、「User Agent」、「Device metrics」
チェックをいれてください。

 

スクリーンショット 2013-07-20 1.49.18

 

「User Agent」の選択欄から表示させたい
スマホの形式を選択します。

今回はiPhoneのiOS5での表示を
確認することにしました。

アンドロイドもできますよ。

 

スクリーンショット 2013-07-20 1.49.33

このようにパソコンで見ているのに
iPhoneで見ている時の画面に変化!!

これでパソコンでもスマホの表示を
チェックすることが可能です。

元に戻すときは「User Agent」と「Device metrics」の
チェックを外せばOKです。

 

地味に使えるんで、スマホ対応の
ブログを作ったりするときには
活用してくださいね。

 

 

LEAVE A REPLY

*
*
* (公開されません)

Return Top