CMSクラウドHP楽々専科・お助けガイド

前回はホームページ上の色を調べるツール「Color Picker」についてご紹介しましたが、
今回はホームページ内の長さを測れるツール「Page Ruler」をご紹介したいと思います。

前回にも触れましたが、ホームページ上の色を調べるツール「Color Picker」と
ホームページ内の長さを測れるツール「Page Ruler」は両方ともGoogleChromeでの機能になります。

もし違うウェブブラウザを使用している場合はGoogleChromeをダウンロードしないと
両ツールは使えませんので、ご注意ください。

それでは早速Page RulerをGoogleChromeに追加しましょう。

こちらから追加できます。

無事追加できましたか？
問題なく追加できていれば、画面の右上にこんなアイコンが増えているはずです。

使い方は簡単！そのアイコンをクリックして、測りたい部分をマウスカーソルで指定するだけです！

上の画像はクリックすると拡大し見やすくなります

HP楽々専科ではコンテンツパーツ（部品）として簡単に画像を配置できますが、その際に「ここにはめ込む画像はどのくらいのサイズで作成したら良いんだろう」などと思ったときにも、PageRulerは大活躍します！

下記の画像は、HP楽々専科で使用できるコンテンツパーツ（部品）で、画像を横に二つ並べるパーツです。実はこのパーツ、元の画像サイズがどんな横幅でも、自動で横幅をこの長さに変換して表示してくれます！すごいですよね！？

しかし、横幅は自動で合わせてくれても縦横比率は維持されたまま表示されるので、縦幅はバラバラになってしまいます。簡単にいうと、縦長の画像と横長の画像を並べて表示するとあまり見た目がよろしくない感じになってしまうということです。ちなみに下記の画像をクリックすると使用している元の画像の大きさで表示されます。もともと大きなサイズの画像だったものを、自動で画面サイズに合うようにHP楽々専科のシステムが調整してくれているのです！

横長の画像と縦長の画像を調整せずにそのまま指定するとこんなふうに表示されてしまうのです。これではなんか格好悪いですよね？

それではどうすれば良いかというと、左の猫の画像のサイズに右の子供の画像のサイズを合わせてみましょう。そこで登場するのが今回ご紹介した「PageRuler」と以前の記事でご紹介した「pixlr」というHP楽々専科に搭載されている画像編集ツールです。

ではまずは「PageRuler」で左の猫の画像のサイズを測ってみましょう。

Width（横幅）が375px、Height（縦幅）が250pxということが分かりました！
このサイズに右側の子供の画像のサイズを合わせることにします。

とはいえもともと形の違う画像です。サイズを合わせるといっても余白を追加して合わせることになります。

では左側の子供の画像を「pixlr」で開いてみましょう。
まずは画像の縦幅を猫の画像と同じ250pxに合わせます。

画面上部の画像→画像サイズと進み画像の高さを250pxに変更します。「縦横比を固定」のチェックはつけたままにしておきます。

次に画面上部の画像→キャンバスサイズと進み、幅を375に、高さを250に指定し、アンカーの部分を中央に指定します。



すると子供の画像の左右に余白が追加され、猫の画像と同じサイズの画像にすることができました！こちらを保存して配置したのが下記になります。

画像サイズを調整する前と比べると、配置のバランスが良くなりましたよね！

こんな感じで、画像の縦横比を調べるのにも「PageRuler」はとても便利です。
是非使いこなして、ご自身のホームページをより良いものにしてくださいね！！