ブログやサイトのスマートフォン用画面を、パソコンで確認する方法[ChromeのUser Agent(ユーザーエージェント)変更]

User agent title
Agent_Smith_1024x768.jpg / portorikan

こんばんは。マトリックスは3作とも映画館で観たうしぎゅう(@ushigyu)です。

先日のブログ合宿にて、モバイルテーマの変更に踏み切った当ブログ。

テーマを修正してはiPhoneで確認していたのですが、合宿所の主人@goryugo氏に「そんなことしなくても、iPhone用画面確認できるよ」とアドバイスされ、調べてみるとその方法があっさりと見つかりました。

今回は、その方法をご紹介。とても簡単です。


Google Chromeにて、MacならCommand+Option+I、WindowsならCtrl+Shift+I。
もしくは、設定ボタンからツール – デベロッパーツールと選択します。

User agent 0

起動したデベロッパーツールの右下の設定ボタンをクリック。

User agent 1

「Override User Agent(ユーザーエージェントをオーバーライド)」にチェックを入れ、自分が画面を確認したいOSを選びます。

iPhoneはもちろん、iPad、Android、Internte Explorerなども選択可能。

User agent 2

ここでは、iPhone(iOS5)を選択し、元のページを更新してみます。

すると、以下のようにiPhone用の画面が表示されました!
画面の大きさは違いますが、わざわざiPhoneでアクセスしなくてもここでほとんどの確認ができます。便利!

User agent 3

あとがき

これを知ってから、モバイル版(スマートフォン版)のブログのデザイン修正がだいぶ効率化できました。

ブロガー・サイト管理者の方は、ぜひ使ってみてください!

CSS初心者な私でもWordpressをカスタマイズできた!Chromeの「デベロッパーツール」が神すぎて感動した

ABOUTこの記事をかいた人

牛嶋 将太郎@ushigyu

牛嶋 将太郎@ushigyu

株式会社エコーズ代表取締役社長(と名乗ってみたくて会社をつくりました)。当ブログにておすすめの製品やお店、旅行先、ガジェットなどを気のむくままに、わかりやすさを心がけて紹介しています。 長崎出身で福岡市在住。東京で就職しましたが独立を機に学生時代を過ごした大好きな福岡に帰還。
⇒ まずはじめに読んでほしい「役立つ」「得する」「面白い」記事はこちら