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

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

Google Search

Google Search
¥ 0
ASIN: B00SZDLGSO
search.google.com
Google search engine.

Search Engine For Google

Search Engine For Google
¥ 0
ASIN: B00AFCEIB0
Kyy Apps
google search
CS Shop

Google Home(グーグル ホーム)

Google Home(グーグル ホーム)
15,120 円 (税込) 送料込
評価 4.15
Google Home購入+エントリーで 楽天市場の対象ショップのお買い物が ポイント5倍!スマートスピーカー IOT Alexa アレクサ Echo エコー Clova クローバ Chromecast クロームキャスト グーグル ホーム スマートスピーカー GA3A00538A16 JAN:0842776102263 PCソフト・周辺機..

Google Home Mini チョーク(グーグル ホーム ミニ チョーク)

Google Home Mini チョーク(グーグル ホーム ミニ チョーク)
6,480 円 (税込) 送料込
評価 4.31
Chromecastと連携して声で動画をキャストしよう! 購入はこちら>>スマート家電 IOT Alexa アレクサ Echo エコー Clova クローバ Chromecast 201712SSghmini グーグル ホーム ミニ チョーク スマートスピーカー GA00210ーJP JAN:0842776102461 PCソフト・周辺機器 家電

Google無料サービス早わかりガイド増補改訂版 ([テキスト])

Google無料サービス早わかりガイド増補改訂版 ([テキスト])
1,188 円 (税込) 送料込
[テキスト] スタンダーズグーグル ムリョウ サービス ハヤワカリ ガイド 発行年月:2017年08月 ページ数:144p サイズ:単行本 ISBN:9784866360928 本 パソコン・システム開発 その他 ビジネス・経済・就職 自己啓発 情報管理・手帳
楽天ウェブサービスセンター CS Shop
役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
ページ先頭へ