このブログは、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のデザイン変更もサクサク。。できるはず。