Personal WP Customization Notes (PWCN)

WordPressで実際に行ったカスタマイズの記録、発生した問題への対処時のメモ、ブロックテーマのカスタマイズなど

パソコン上で別デバイスでの表示確認ができるおおすめのGoogle Chrome拡張機能いろいろ

私が普段別デバイスでの表示確認のために使っているGoogle Chromeの拡張機能をいくつか紹介します。

どれも一長一短なので、必要な時だけ有効化して使うようにしています。

モバイルシミュレーター – レスポンシブテストツール

モバイル・タブレットでの表示確認であれば一番おすすめなのがモバイルシミュレーター – レスポンシブテストツールです。

これから紹介する他のツールのように、1画面で複数のデバイスでの表示を確認することはできませんが、簡単にデバイスの切り替えができるので使いやすいです。

他の拡張機能と比べてプレビュー(テスト表示)される画面の領域が小さいので、細かなチェックには向いていないかも知れません。

Mobile View: Test responsive designs fast

Mobile View: Test responsive designs fastは、登録したデバイスで表示される状態をすぐに確認できるGoogle Chromeの拡張機能です。

モバイル端末の種類、タブレット端末の種類から複数選択できるほか、パソコンの解像度を選択して自身のパソコンではない画面サイズの表示テストを行うこともできます。

使い方は簡単で、ページ表示後に拡張機能を有効化すると表示されるアイコンか、拡張機能の選択ボタンから表示される「Mobile View」をクリックすれば、設定で選択したデバイス上での表示を一画面で確認することができます。

現在の最新バージョンで試したところ、簡単ではあるものの、その画面を離脱する(プレビューを解除する)ボタン等がなく、元の画面に戻ることができないので、別タブで表示させたページに対してプレビューしなければならないのがちょっと難点です。

Responsive Viewer

Responsive ViewerもMobile Viewと同様に機種や解像度によるテストができるChrome拡張機能です。

元の画面にも簡単に戻ることができる点でMobile Viewよりは使いやすいかなという印象ですが、設定画面とどの解像度の表示プレビューなのかを示す文字が細かいので、小さな画面のパソコンでは少々使いにくいかも知れません。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

※リンクやURLの挿入されているコメントは無視します

WordPressサイトのカスタマイズ方法、機能追加を行うプログラム例など
画像に含まれる色をすべて抽出してくれるオンラインツール「11zon」