Extension that can confirm the mobile display of the site with Google Chrome “MobileLayouter”

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

公開日：2015年4月10日パソコン＆ソフト

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

ブログやホームページを作って、モバイル用の機能を追加したりしてみたけど、実際どのように表示されているのか、スマホやタブレット持ってないから確認できない・・・を解消する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ネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。