サイト上のサイズを測る方法!Page Ruler Reduxで簡単!

ヘッダーの大きさも測れるGoogleクロム拡張機能PageRulerRedux効率化
記事内に商品プロモーションを含む場合があります

ヘッダーのサイズ実際どのくらいだろ?

ピクセルがどのくらいなんだかわからない。

なんて、悩みを一発で解決する方法があります。

それは、

Google Chrome(グーグルクロムの拡張機能「Page Ruler Redux」

です。

では、早速、Page Ruler Redux の入れ方と使い方を見ていきましょう。

スポンサーリンク

サイト上のサイズを測る方法!Page Ruler Reduxの入れ方

インターネット上のもののサイズを測るために、まずは「Page Ruler Redux」をインストールします。

入れ方は3ステップ。ほんとに簡単です。

  1. Google Chromeを開く
  2. Chrome Web StoreでPage Ruler Reduxを追加
  3. 一度Chromeを閉じまた開く

①Google Chrome(グーグルクロム)を開く

グーグルクロム

クロムを利用していない場合は、便利ですのでダウンロードしましょう。

クロムダウンロード

クロムでしかサイト上のサイズ計測はできないので注意してください!
Google Chrome(グーグルクロム)はInternet Explorer(インターネットエクスプローラー)などと同じウェブブラウザです。
簡単にいうと、ウェブサイトを見れるところがウェブブラウザ。

②Chrome Web StoreでPage Ruler Reduxを追加

ヘッダーの大きさも測れるGoogleクロム拡張機能PageRulerRedux

Google Web Storeの「Page Ruler Redux」のページ へいきます。

英語のサイトですが難しいことは何もないので大丈夫!

Add to Chrom」をクリック

ヘッダーの大きさも測れるGoogleクロム拡張機能PageRulerRedux

拡張機能を追加」をクリック

これだけで追加完了!

クロム画面の右上に「ものさし」マークが追加されます。

Googleクロムの拡張機能を4つ以上入れていると、4つ目は一番右の・・・「Google Chrome の設定」の中に入ってしまうので見つからないときは見てください。

③一度クロムを閉じ、また開けば使える!

インストール後そのまま使えることもあります。

けれど、すでに開いているページでは反映されないかもしれません。

使えなければ、一度クロムを閉じてまた開いてみましょう!

スポンサーリンク

Page Ruler Reduxの使い方

使い方はホントに簡単!
直感的にわかると思います。

ここでは、便利な機能とショートカットも説明します。

使い方と便利な機能

ヘッダーの大きさも測れるGoogleクロム拡張機能PageRulerRedux

画面右上のPage Ruler Redux(ものさしマーク)をクリックします。

ヘッダーの大きさも測れるGoogleクロム拡張機能PageRulerRedux

すると、

  • ツールバーが出てくる
  • マウスのカーソルが十字になる

なので、測りたいところをドラッグすればサイズがピクセルでわかります。

 

測り終えたらツールバーの右側にある「✖」または「ものさしマーク」をクリックし終了しましょう。

使用中は、サイズを測る以外の動作はできません

便利な機能

  • Show Guides
  • Border Search

Show Guides

Show Guides をオンにしておくと、測りたいところの線が延長して表示されます。

他のものとの高さなど一目で比べられて便利!

Border Search

Border Searchをオンにすると、▶が表示され、近くのラインにカーソルを合わせてくれます

線がわかりにくいときは正確にあいにくいですがぴったりくるととっても便利!

ショートカット

ヘッダーの大きさも測れるGoogleクロム拡張機能PageRulerRedux

ショートカットもいろいろあります。

キーボードの方向キーで1ピクセル動かせるので細かく調べたいときは使用してみてください。

スポンサーリンク

サイト上のサイズを測る方法!Page Ruler Reduxで簡単!

特にホームページの作成やWebデザインなどをしていると、インターネット上のもののサイズを知りたいこともたくさんでてきます。

そんなときはGoogle Chromeの拡張機能Page Ruler Reduxが超便利!

無料で安心して使えるのでぜひ使ってみてくださいね。

Google Web Storeの「Page Ruler Redux」のページ

 

他にも便利なクロムの拡張機能あります。
「Page Speed Controller」で動画も自由自在の速度で再生!

コメント

タイトルとURLをコピーしました