Google Chromeでサイトのモバイル表示が確認できる拡張機能「MobileLayouter」

今やインターネットサイト（ホームページ）をパソコンではなくスマホやタブレットで見る時代。

ブログやホームページを作って、モバイル用の機能を追加したりしてみたけど、実際どのように表示されているのか、スマホやタブレット持ってないから確認できない・・・を解消するGoogle Chrome用拡張ツール「MobileLayouter」を紹介します。

Google Chrome以外のブラウザでも同様のツールがあるかもしれませんが、私自身がChromeユーザーなので。

WordPressでサイト作成している際に便利なのが、表示する端末によって自動的にレイアウトを整形してくれるプラグイン「Wp Touch」。これを使うと普通にサイトを作っているだけで、勝手にモバイル用ページを生成してくれるのでとても重宝しているのですが、いったいどのように表示されているかは見当がつかないことないですか？？

これを解消できるのがGoogle Chromeでサイトのモバイル表示が確認できる拡張機能「MobileLayouter」です。

導入方法は他の拡張機能と同じでこちらから「MobileLayouter」を追加するだけです。

追加したら、Chromeブラウザ画面の右上（Chromeの設定ボタンの左側）に「ML」と書いたマークが出てきますので、それをクリックして、表示する環境を選択するだけで、サイトがモバイル環境でどのように表示されるかを確認することができます。

対応しているのは、iphone/ipad/Nexusなどですが、独自サイズのものも追加することができますし、９０度回転させた（縦／横）のレイアウト確認もできますので、ホームページを作られている方は是非導入していただきたいGoogle Chromeの追加機能です。

使ってみてとても便利だってので紹介しました。

Google Chromeの基本機能を使う方法

「MobileLayouter」でも表示はできますが、環境やサイトの設定によってはモバイルとして認識されないことがあり一部が実際とは異なってしまう現象が出ることがあります。

Google Chromeにはデベロッパーツールという機能があり、これを使うとCSSの調整に必要な情報を収集できたり、サイトの表示速度を表示することができたり、今回紹介したモバイルやタブレットでの表示テストを行うことができます。

こちらに詳しく使い方を書いていますので興味のある方はついでにご覧ください

Knowledge Base

スマホで見てみる必要なし！パソコンからサイトのモバイル表示を確認する方法

https://www.momosiri.info/post-14738

インターネットサイト（ホームページ、ブログなど）を作っていてスマホやタブレットではどう表示されてるのかな？と思ったことないですか？しかも、機種によっては画面サイズが違うからいろんな機種の表示を試してみたいなんてことありませんか？この機能を知るまで私は一生懸命自分のスマホ片手に確認してました。いつも使っているインターネットブラウザ標準の機能でできてしまうんですね。さっそく方法をご紹介します

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。