ブログ運営

Window Resizerのインストールと設定 Chromeの画面サイズを指定の大きさに設定する

ブログ記事の執筆やウェブアプリケーション作成時には、ブラウザのサイズ変更は頻繁に発生する作業だと思います。

ブログ記事作成のために、ChromeでWebサイト上の手順をキャプチャする際に、最大化されたウィンドウサイズでスクリーンショットを取得してしまい、拡大しないと見えないということはありませんか?

ウィンドウを最大化してキャプチャしてしまったため、ブログの記事には大きすぎる失敗例

wikipediaフルスクリーン

また、レスポンシブデザインのサイトを確認する際に、スマホの画面サイズで確認したいことはありませんか?

レスポンシブデザインの確認のために、サイズを小さくする必要があるケース

スマホ最適化

そのような時に、毎回ブラウザのウィンドウサイズを微調整するのは手間ですし、正確なサイズに変更するのは難しいですよね。

そのような手間を軽減し、毎回ボタン一発で決まったサイズに変更してくれるツールがあります。

それが、Chromeの拡張機能 Window Resizerです。本記事では、Window Resizerのインストールと設定方法、使い方を紹介します。

Window Resizerとは

Window ResizerはChromeの拡張機能で無料で利用できます。

事前に登録しておいたWindowサイズから選択することで、ChromeのWindowをボタン一発で好きなサイズに変更することが可能です。

また、iPhoneやiPad、主要なデスクトップのディスプレイ解像度なども登録されているため、最小限のカスタマイズで使用することが出来ます。

なお、同名のWindow ResizerというChrome拡張機能があったのですが、マルウェアを含んでいたというトラブルがあり、こちらは現在はChrome Storeからは削除されているようです。Chromeの拡張機能Window Resizerがマルウェアを含んでいたことが発覚

Window Resizerのインストール

まずはChrome ウェブストアにアクセスします。

Window Resizerで検索します。検索結果にWindow Resizerが表示されます。Window Resizerが複数表示されるので、提供元がcoolx10.comとなっているものを選択しChromeに追加をクリックします。

Chromeウェブストア

追加の確認ダイアログが表示されるので、拡張機能を追加ボタンをクリックします。

追加します

Window Resizerのインストールが完了し、Thank Youページが表示されました。拡張機能バーにWindow Resizerのアイコンが追加されます。

インストール完了

 

Window Resizerの設定

Chromeの拡張機能バーに追加されたアイコンをクリックすると以下のようなプルダウンメニューが表示されます。OK, got it!ボタンをクリックします。

すでにいくつかのWindowサイズが初期設定で登録されています。新しいWindowサイズを登録してみます。歯車マークのアイコンをクリックします。

設定画面が表示されますので、presetsをクリックします。

+ボタンをクリックします。

use currentのリンクをクリックすると、現在のウィンドウサイズが左側のWidth x Heightに自動的に入力されます。またこのサイズに名前をつけておくことが出来ますので、好きな名前を入力し、save presetボタンをクリックします。

presets一覧画面が表示されますので、自分が登録したWindowサイズが表示されていることを確認します。

Window Resizerの使い方

それでは、実際に使ってみましょう。

Window Resizerのアイコンから、さきほど追加した手順記録用 (1188x741)をクリックします。すると、以下のように自動的にウィンドウサイズが1188x741に変更されました。

同じように初期登録されているiPhone 5 (320x568)をクリックすると、同様にサイズが変更されます。

まとめ

いかがだったでしょうか。Webアプリケーション作成、Webコンテンツ作成時にはウィンドウサイズの変更は頻繁に行う作業です。Window Resizerを活用することで日々の作業効率改善にご活用ください。

ブログランキングに参加しています。記事を気に入ってくださったら是非クリックで応援お願いします。

にほんブログ村 株ブログ インデックス投資へ   インデックス投資人気ブログランキング

-ブログ運営

© 2020 Hoehoe Blog