クリアメモリ

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

【Edge:TheWebRuler】ブラウザで定規を使える拡張機能!

f:id:clrmemory:20170422182810p:plain 

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

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

 

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

 

 

はじめに

 

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

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

 

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

 

Edge: The Web Ruler

 

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

 

 

 

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

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

 

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

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

 

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

 

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

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

Edge: The Web Ruler

 

 

 

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

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

 

Edge:TheWebRulerを起動

 

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

 

 

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

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

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

 

Edge:TheWebRulerの使い方

 

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

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

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

 

  

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

 

  • 単位 -> px, cm, in の中から選択
  • 縦、横の変更
  • 常に先頭に表示させるかどうか
  • use anonymous analytics data

 

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

順に見ていきましょう。

 

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

 

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

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

 

 

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

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

 

 

 

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

 

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

 

 

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

 

 

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

 

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

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

 

まとめ

 

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

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

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

 

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

ここは残念な点でした。

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

 

www.clrmemory.com

 

ではまた。

新着記事