phone-37113_640

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

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る