「画像を横幅ぴったりにおさめたいけど、どれくらいの幅か正確にわからない。」
こう思ったことはないでしょうか。
私は今までキャプチャソフトなどに表示されるピクセルを元に、
調べたい場所にキャプチャウインドウをあわせていました。
ぴったり合わせるのが面倒だったのですが、
「Page Ruler」というGoogleChromeの拡張機能が便利過ぎました。
サイトの幅を調べるのはこれさえあればOKなので、
早速、Page Rulerの使い方を解説していきます。
Chromeの拡張機能を検索する画面で、「Page Ruler」を入力すると、
↑の感じのが出て来るので追加します。
確認画面が出るので追加をクリック。
Chromeのメニューバーに定規が２つ重なったアイコンが出ます。
これをクリックするだけです。
上部に各領域などを示すツールバーが出てきます。
初期状態ではすべて０pxになっています。
「Page Ruler」でのサイトの幅の計測には２つの方法があります。
１つが自分で選択した範囲のサイトの幅を調べる方法。
もう１つがマウスのカーソルをあわせた領域の数値を調べる方法です。
基本的には後者の利用がメインになると思います。
まずは１つめの方法から。
試しに当サイトでやってみます。
先程の定規のアイコンをクリックするとマウスのカーソルが十字になるので、
クリックしたままマウスを移動させて調べたい範囲まで伸ばします。
↑のように選択した範囲が薄い青になっていますよね。
選択した範囲の「width」と「Height」がわかるようになります。
２つめの方法ですが、ツールバー左端の「＜＞」にマウスのカーソルを合わせると、
上記のような感じになるので、ボタンをクリックします。
すると、マウスのカーソルで選んだ部分の領域を、
自動で選択してくれてその数値を表示してくれます。
ちなみに、テキスト領域と横幅は同じではないことが多いです。
上記では669pxになっていますが入力可能な領域はもう少し狭いです。
例えば、当ブログのメイン領域のサイトの幅を調べると、
横幅は619pxになっていますよね。
つまり、画像をはめ込む時は669pxではなく619pxに合わせると、
横幅ぴったり画像がハマって見栄えがよくなるということです。
必要以上に大きな画像をアップロードしてもサーバーの容量をくうだけなので、
これを把握してアップロードするといいと思います。
ちなみに、領域選択中に左クリックを押すと、
調べる領域がそこで固定になります。
ツールバー右側に「Tracking」という項目があるので、
そこをOFFにするとまた領域を選択できるようになります。
以上です
