PC版Firefoxでスマートフォン画面を表示する方法。パソコンのブラウザでスマホ表示チェック。要素を調査とアドオン使用

パソコン上で制作したWebサイトが、スマホ(スマートフォン)でどう表示されているかチェックしたくなる時がある。
私はWebブラウザはFirefox(ファイヤーフォックス)を昔から使っているので、PC版Firefoxでスマホ表示を確認している。

スマートフォン画面を見るには、Firefoxにアドオンをインストールする必要がある。
User Agent Switcher ⇒ https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/

これをインストールすると、ユーザーエージェントを切り替えられるようになる。
ユーザーエージェントというのはWebサイトにアクセスする際に使っているOSやWebブラウザの事である。

iPhoneのiOSやiPhoneのウェブブラウザSafariなどが、ユーザーエージェントにあたる。
このユーザーエージェントだがFirefoxアドオンの「User Agent Switcher」をインストールすると切り替えられるようになる。

ただ、User Agent Switcherではデフォルトで対応しているユーザーエージェント数が少ないので、このままではあまり使えない。
それを解決するために、最近までの間に出て来た数多くのユーザーエージェント群の一覧をUser Agent Switcherにインポートする。

ちなみにUser Agent SwitcherはFirefoxの「ツール」欄に「Default User Agent」として表示される。
ブラウザ上部にアイコンボタンとして表示したい場合は、メニューバーのあたりで右クリックしてコンテキストメニューを表示させて、その中の「カスタム」を選択する。

カスタムを表示すると「User Agent Switcher」のアイコンボタンが見つかると思うので、それをFirefoxツールバーの配置したい位置にドラッグアンドドロップする。
さて、話を戻すが、最近までのユーザーエージェント一覧のインポートするには、まずこちらのページにアクセスする。

https://github.com/Garyuten/useragentswitcher/blob/master/firefox/useragentswitcher.xml

アクセスしたら、「Raw」というボタンが見つかると思うので、それをクリックする。
そうするとページ遷移し、画面にユーザーエージェントの一覧が表示される。

45464
その画面上で右クリックしてコンテキストメニューを表示させて、「名前をつけてページを保存」を選択する。
そうすると、拡張子「.xml」を保存するかどうか聞いてくるので、そのまま自PC上に保存する。

そして、その保存したxmlファイルをUser Agent Switcherにインポートする(取り込む)。
Firefox「ツール」⇒「Default User Agent」⇒「Edit User Agents」を選択する。

すると、「User Agent Switcher Options」画面が表示されるので、その中にある「Import」ボタンをクリックする。
で、先ほど保存した「.xml」ファイルを選択してUser Agent Switcherにインポートが完了。

これで、最近までのユーザーエージェントの一覧がUser Agent Switcherにも表示されるようになる。
これでユーザーエージェントは変えられるようになったが、これだけだとPC画面はPC画面のままでスマホ画面にはならない。

パソコン画面にスマホ画面を表示させるには、画面上で右クリックしてコンテキストメニューを表示させる。
画面上で「右クリック」⇒ 「要素を調査」 ⇒ 「レスポンシブデザインモード」を選択する。

7897966
このレスポンシブデザインモードのアイコンボタンは、「要素を調査」画面の右下の方に小さく表示されている。
これで、自分が選択したユーザーエージェントでの「スマホ画面」(スマートフォン画面)の表示をチェックできるようになる。

ちょっと面倒だが、Firefoxアドオン「User Agent Switcher」と画面右クリックで表示される「要素を調査」(レスポンシブデザインモード)の2つを組み合わせれば、パソコン画面上で、スマホ表示(スマートフォン表示)させることも可能となる。

[トンケン経営研究所][代表 トンちゃん]

【トンケン経営研究所とは】
2009年頃、SEO系のキーワードで上位表示や1位表示を大量に達成し、その存在を知られるようになったSEO業者。2009年初め頃よりお客様方からのSEO対策の依頼が増加し、本格的にSEOサービスの提供を開始。そして、現在に至る。トンケン経営研究所の代表はSEO職人トンちゃん。

【SEO対策SEMサービスのスローガン】(トンケン経営研究所)
高品質・中長期・強勢

【SEO対策SEMサービスのご案内】(トンケン経営研究所)
≪検索上位表示豚≫
同じサイト内の6枠(6URL・6キーワード)のSEO対策が月々13000円。「SEOコンサルティング(内部SEO診断)+被リンク対策」型SEOサービス。サービス利用終了後も外さない固定被リンクの獲得代行。毎月、新型の衛星サイト(サテライトサイト)を生産し、そこから新型の被リンクを供給。数ヶ月・数年・十数年・・・と継続利用しても衛星サイト群も被リンク群もかぶること無し。不動の1位表示を達成するまで新しい被リンクを新規で供給し続けることが可能。固定被リンクが毎月確実に増加して行くSEO対策サービス。Yahoo・Googleで顧客サイト群の不動の1位表示実績大量、長期の安定上位表示実績大量

SEO対策サービス・料金の詳細はこちら
SEO対策サービス・SEO料金表(詳細)/トンケン経営研究所

 

簡略料金表(SEO対策SEMサービス)/トンケン経営研究所
検索上位表示豚Lite|月々12,000円|同じサイト内の3枠(3URL・3キーワード)のSEO対策|「SEOコンサルティング(内部SEO診断)+被リンク対策」型
検索上位表示豚|月々13,000円|同じサイト内の6枠(6URL・6キーワード)のSEO対策|「SEOコンサルティング(内部SEO診断)+被リンク対策」型
検索上位表示豚束ね|月々16,000円|3サイト内の8枠(8URL・8キーワード)のSEO対策|「SEOコンサルティング(内部SEO診断)+被リンク対策」型
検索上位表示豚おまとめ|月々20,000円|6サイト内の11枠(11URL・11キーワード)のSEO対策|+1800円ごとに1サイト・1枠(1URL・1キーワード)ずつ追加可能|「SEOコンサルティング(内部SEO診断)+被リンク対策」型
検索上位表示豚スケールメリット|月々30,000円|同じサイト内の17枠(17URL・17キーワード)のSEO対策|+1700円ごとに1枠(1URL・1キーワード)ずつ追加可能「SEOコンサルティング(内部SEO診断)+被リンク対策」型
SEOコンサルティング豚|1回50,000円|何サイト・何URLでもSEOコンサルティング可能(助言・診断・戦略立案・提案等)|「SEOコンサルティング(内部SEO診断,SEO戦略,SEO相談)」型

 

SEO対策サービス・料金の詳細はこちら
SEO対策サービス・SEO料金表(詳細)|トンケン経営研究所

【事業領域】Governance,Management
【主要事業】ビジネスコンサルティング事業,Web出版事業,システム・ソフトウェア事業,人的資本事業,広告代理店事業,Webサイト事業(サイト制作・管理),SEO事業

シェアする

フォローする