ブログ内の画像サイズを調べます

アイキャッチ画像をきれいに作っていきたいと思います。

まずはブログに最適な画像サイズを確認し、それに合った画像を作成・挿入していきます。

自分のブログに最適な画像の幅はどれくらいなのか？

アイキャッチ画像に最適な画像の幅や高さはどのくらいなのでしょうか。

まずは自分のブログにぴったりはまる画像の横幅を調べます。

ブログの記事ページで　F12 ボタン → 下記のようになるので赤丸印のところをクリック

そのまま左の画像のところにマウスを合わせると、下記の赤丸のところに、そのページの画像のサイズがでてきます。

さらに右下の　Computed　(オレンジ丸) をクリックすると、そのページを構成している横幅などの詳しいサイズ情報が表示されます (黄緑丸)。

見出しのサイズやフォント等もマウスをあわせれば情報が表示されるので、やってみると色々分かってカスタムしやすくなると思います。

私は画像をアップするときには適当にキャプチャーしてアップしてるんですが、アップ後に画像を特大サイズに設定しています。

そうすると私のモニターサイズでは横幅が640pxになるように調整してくれるようです。

私の記事リストページでは 横縦幅を160×90 px に指定してあるので、下記のようにアイキャッチ画像が160×90 pxに統一されていました。

また、画像のサイズは、小さければ表示速度が早くなりますが、画像は粗くなります。

200KB以下であれば問題なさそうです。

まとめ

・自分のブログにあう最適な画像サイズがわかりました。

・上記の方法だとページの色々な情報が表示されます。

画像サイズに合ったアイキャッチ画像を作成し、ホームのリストを統一させていきます。