クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

ブラウザに定規を表示できるChrome拡張機能【Edge: The Web Ruler】

f:id:clrmemory:20170422182810p:plain 

サイトのカスタマイズ時に、綺麗なレイアウトにしたい時、ブラウザ上に定規を表示できたら便利ですよね。

定規が表示できれば、両端の空間の幅を一致させるなんてことも簡単です。

 

そこで今回はブラウザにメモリ付きの定規を表示できるChrome拡張機能「Edge The Web Ruler」を紹介します。

 

 

はじめに

 

ブログやサイトをカスタマイズする時に、左右の間隔や、項目の高さなどを揃えることがあります。

 

 

そういった時にブラウザ上に、メモリが書かれている定規が表示できれば、調整しやすいと思っていました。

 

そこで発見したのが、Chrome拡張機能の「Edge: The Web Ruler」です。

 

Edge: The Web Ruler

 

Edge: The Web Rulerは無料で使用できる拡張機能で、実際に表示すると以下のようになっています。

 

 

 

肌色で表示されている定規がEdge: The Web Rulerです。

試しに、私のブログのトップページで使用してみました。

 

ブラウザ上で横幅を測ってみたところ740pxで、デベロッパーツールで表示された横幅の値と一致しました。

 

では実際にEdge: The Web Rulerをインストールしていきましょう。

 

Edge: The Web Rulerをインストール

 

インストールする前に、Edge: The Web Ruler は Chrome拡張機能なので、Chrome以外では使用できないので注意してください。

 

では以下のリンクから、Edge: The Web Ruler をChromeに追加しましょう。

 

Edge: The Web Ruler

 

 

 

拡張機能なので、インストールはとても簡単ですし無料で行えます。

ですが、こちらのEdge: The Web Rulerは起動に若干癖がありますので確認してください。

 

Edge: The Web Rulerを起動

 

Edge: The Web Ruler を起動するためには、URLバーの隣からではなく、アプリページから選択しなければなりません。

 

 

Chromeのブックマークバーに「アプリ」という項目が表示されていると思いますが、Edge: The Web Ruler はその中に追加されています。

 

「アプリ」項目が表示されていない方は、URL欄に chrome:/>

 

 

また、Edge: The Web Ruler は使い方も若干ややこしいので確認してください。

 

Edge: The Web Rulerの使い方

 

Edge: The Web Rulerを起動すると、冒頭で紹介した肌色の定規が表示されます。

 

この時、ブラウザからではなくアプリケーションから起動している点に注意してください。

ですので、Chrome拡張機能ではありますが、以下のようにデスクトップ上に表示することもできてしまいます。

 

 

 

では Edge: The Web Ruler で変更できる設定項目を見ていきましょう。

 

・単位 -> px, cm, in の中から選択

・縦、横の変更

・常に先頭に表示させるかどうか

・use anonymous analytics data

 

というような機能があります。

順に見ていきましょう。

 

Edge: The Web Ruler を起動して定規が表示されたら、左下に「px cm in」と書かれた項目がありますよね。

 

初期状態ではピクセルが選択されています。

Webのカスタマイズでは一番よく使用するので、使い勝手が良いですね。

 

 

この項目をcm や in に変更することで、メモリがセンチ、インチと切り替わります。

(1インチ -> 2.54センチメートル)

 

 

 

 

「in」の右側にある四角が書かれた項目を選択すると、縦の定規と横の定規を生成できます。

 

ブラウザで定規を当てたい項目が、横幅だけとは限らないのでありがたい機能です。

 

 

続いて、歯車マークが書かれたボタンがありますが、ここをクリックすると2つの項目が新たに表示されます。

 

 

Always on Topにチェックを入れておくことで、ブラウザや、別のウィンドウをクリックしても、定規が背面に回らなくなります。

 

次の use anonymous analytics dataについては、よくわかりませんでした。

…匿名分析データを使う?

 

まとめ

 

今回紹介したEdge: The Web Rulerを使えば、ブラウザ上に定規を表示することができ、サイトをカスタマイズしやすくなると思います。

 

また、左右で余白の大きさを同じにしたい時など、目測では厳しいことがありますよね。

そのような時は実際に定規を表示して、正確な値を測ってみましょう。

 

ただ、難点として定規の角が丸くなっていて、端がわかりづらいんですよね…。

ここは残念な点でした。

 

 

ですが、定規を表示できる機能自体はとても便利なので、ブラウザからサイトをカスタマイズする方はインストールしてみてはいかがでしょうか。

ではまた。

新着記事