このブログは、iPhoneやAndoroidなどのモバイル端末向けには、WPTochというプラグインを利用しています。

そろそろWPTochのデザインを変更しよう！！と思い中身を色々とイジッていたわけですが、WPTochは、UA（UserAgent）判別して表示させているので、実機がいるわけですね！

ですが、わたしが持っているのは、Andoroidのみ！！！

どうやって表示確認をすれば。。。っと思い、ネットの海へダイブ！！しました。

結果、意外と簡単にできることが判明！！　しかも、ブラウザ上で確認できると！！！！（知っている方は。。いまさらな感じな内容です。）

いろいろなブラウザがありますが、今日は、ChromeとFireFoxでの確認方法をご紹介したいと思います。

GoogleChrome編

まずは、確認したいサイトページを開きます。

次に　F12でデベロッパーツール　を起動します。

すると、図のように、下にデベロッパーツールが表示されます。

右下の赤枠で囲ってあるギアアイコンをクリックし、インスペクタのSetting　を開きます。

開くと図のようにOverrideという項目があるので、そこをクリックするとUser Agentなどの項目が表示されます。

User Agent項目で、確認したいデバイスをセットしブラウザを一度更新します。

すると、以下の図のようにデバイス表示になります。

FireFox編

FireFoxでは、アドオンを使います。

FireFoxを開き、メニュー「ツール」　⇒　アドオンをクリックし、User Agent Switcherをインストールします。

すると、メニュー「ツール」のところに「Default User Agent」という項目が増えるので、これで使える様になっています。

使い方は、Chromeのときと一緒で、確認したいデバイスを選択し更新をかけると、デバイス表示になっています。

拡張として、「Default User Agent」のデバイスの種類を増やす、UserAgentSwitcher用XMLというものがあり、これをインポートすると選択できるUAが増えます。

使い方やファイルダウンロードは、こちらの作成者サイトをご覧ください。

UserAgentSwitcher用XML

これで、WPTochのデザイン変更もサクサク。。できるはず。