Chrome拡張機能「Mobile Layouter」スマホの画面幅でレイアウト確認。縦・横表示切替も簡単でブログデザインのカスタマイズが捗る!

chrome mobile layouter eyecatch

最近ブログで使っているWordPressテーマを変更しまして、ちょこちょことカスタマイズしています。調整等はPCでやりつつブラウザで確認するという流れで、スマホのレイアウトも主にPCから。

いろいろと調整に手間がかかるので、調べていたところmbdb (モバデビ)にて便利なChrome拡張機能「Mobile Layouter」が紹介されているのを発見しました。これは良いですね!

スポンサードリンク

Chromeの最小幅より小さくても確認できる

今までスマホ画面を確認するのにユーザーエージェントを切替えれる拡張機能を利用していましたが、単にユーザーエージェントの切り替えのみ。

横幅などはChromeに依存してしまうため、ちゃん収まっているかどうかは、実際にiPhoneから確認していました。

「Mobile Layouter」は指定したスマホの横幅に収まるサイズで表示してくれるので、Chromeの最小幅より小さくても確認可能。レイアウトの調整がし易いですね。

chrome mobile layouter 1

縦・横表示の切替が簡単

指定の機種を選択したら、すぐに対象のスマホ画面に切り替ります。スマホの縦表示、横表示の切り替えもボタン一つで簡単。

▼iPhone5sの「縦」表示
chrome mobile layouter 2

▼iPhone5sの「横」表示
chrome mobile layouter 3

上の画像で表示されている機種はiPhone・iPadにNexsusなどですが、標準で多くの端末が選択可能。すでに登録されている中から追加できますし、自分で新規登録することもできるようになっていました。

iPhoneなどApple製品は画面サイズの種類も少ないですが、Androidはメーカーがバラバラなので画面サイズが豊富。メジャーな機種はこれである程度チェックできますね。

いろいろと確認してみましたが、調整しないといけないところもいくつか見つかったので少しずつ直していくつもりです。

ブログデザインの変更はPCでやっているので、こうやってスマホ画面サイズをすぐ確認できるのはありがたい。とても捗りますね。

▼Chrome拡張機能「MobileLayouter」のダウンロードページ。

▼開発者様の紹介ページ。
FFBlog 実機と同じ画面幅で表示確認できるUA偽装ツール、できました。 | 株式会社KSK フレックス・ファームビジネスユニット

スポンサードリンク