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ネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

---

記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

Twitterのミュート機能とは　～ブロックとの違い～

Twitterを使う上で相手からのフォローやコンタクトを拒否する機能として「ブロック」というのはよく知られています。一方Twitterのミュート機能は相手には気づかれずにフル無視する、ちょっといやらしい機能で、相手にはミュートされていることが分からないため、一時物議を醸した機能です。

パソコンのデスクトップに画像をランダム表示するフリーソフト「John’s Background Switcher」

「John’s Background Switcher」は趣味で撮影した写真やサイトを作るために撮影した複数の写真をパソコンのデスクトップ画面へきれいに、しかもランダムで表示できたりできる無料のソフトです。

Windows10でも発生！「Kernel Data Inpage Error」による強制再起動の原因と対策

「Kernel Data Inpage Error」で突然ブルースクリーンになり、カウントダウンした後に再起動・・・。ウインドウズ８．１の時もこれでしばらくエラーが出なくなったのでまず疑ってみて間違いはないと思います。それがアップグレード時に再び有効になってしまったようです。Windows10でもこの処置以降エラーは発生していません。