※当サイトはアフィリエイト広告を利用しています。(ポリシー

WordPressカスタマイズ

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

更新日:

最近ブログで使っている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」のダウンロードページ。

▼開発者様の紹介ページ。

スポンサードリンク

ピックアップ記事

1

機種変更時に最適なiPhoneのバックアップ方法をご紹介しています。iCloudバックアップではなく、iTunesの暗号化バックアップから復元することでスムーズにデータ移行できます。各アプリのIDやパスワードも引き継ぐにはこの方法がおすすめですよ。詳しい手順も解説していますので、ぜひ参考にしてみてくださいね。

iPhone・iPadのAirDropの使い方を解説 2

iPhone・iPadなどApple製品同士で使えるAirDropはデータの受け渡しにとても便利な機能です。写真・動画・PDFなどのコンテンツを送受信する方法と利用する際の注意点も合わせてご紹介します。

3

Anker「PowerExpand+ 7-in-1 USB-C PD イーサネット ハブ」を購入。安定感のある高速な有線LAN接続と4K対応のHDMI映像出力にUSB-Aポートなど7つの機能がこの1つのハブで利用できます。出張など仕事での外出時やテレワークにも便利。使い勝手や感想をご紹介します。

4

AUKEYのUSB充電器「72W ACアダプター PA-Y12」を購入してみました。最大60WのUSB Type-C PD(Power Delivery)対応でワット数の異なるパソコンにもパワフル充電。追加のUSB-Aポート2つでスマホやタブレットの充電にも大活躍。使ってみた感想をご紹介します。

5

快適なパソコン作業環境を求めて21:9ウルトラワイドモニターを購入してみました。それがLGエレクトロ二クスの「29UM69G-B」29インチです。1枚のディスプレイでスクエアタイプのモニター2枚分の広さを実現。ウィンドウを並べての作業が捗りますね!商品の特徴や使ってみた感想をご紹介します。

-WordPressカスタマイズ