- ブログに使う適切なサイズを調べる方法
- 有名WordPressテーマのサイズ
今回はブログに貼る画像の適切なサイズの調べ方を紹介していきます。
適切なサイズの画像を使用しないとブログの読み込み速度は遅くなり、検索ランキングに悪い影響が出てしまいます。
サクッと調べてこれから書く記事は最適化した画像を使用し、Googleに気に入ってもらいましょう！
有名WordPressテーマの適切サイズ
まずは手っ取り早く有名どころのWordPressテーマのサイズが知りたい方はこちらを確認してください。
各テーマのデモサイトで計測したサイズ（基本サイズ）をまとめました。カスタマイズしている場合は異なる場合もありますので正確なサイズが知りたい場合は以降の記事を読んでください。
| テーマ名 | アイキャッチ画像 | 記事中画像 |
|---|---|---|
| JIN | 700px×394px | 横幅：700px |
| STORK19 | 728px×389px | 横幅：728px |
| THE THOR | 700px×394px | 横幅：700px |
| AFFINGER5 | 640px×448px | 横幅：640px |
あくまでデモサイトの画像を計測した寸法になっていますのでカスタマイズで枠を入れたりmargin・paddingをいじっている場合は異なりますので実際に自分のブログで計測してください。
適切な画像サイズを調べるツール
上で有名どころのWordPressテーマの画像サイズは紹介しましたが、カスタマイズして枠を広げたり狭めたりしているとデモサイトのサイズとは異なるので正確なサイズは自分で調べるのが一番です。
どうやって調べたらいいのと悩んでいる方はこれから紹介する2つのツールを使えば一瞬で適切な画像サイズを調べることが可能になります。
- Page Ruler Redux
- View Image Info
それぞれの使い方を詳しく紹介していきますね。
Page Ruler Reduxの導入＆使い方
まず紹介するのはGoogle Chromeの拡張機能の一つである「Page Ruler Redux」からいきます。
下のリンクボタンからChromeに追加してみましょう。URLの検索窓の右側にアイコンが追加されます。
一度、拡張機能を追加するとネット上のサイズを知りたいときは、アイコンをクリックすると下のようなことができるようになります。
このように範囲を指定した箇所の「横幅」と「高さ」をpx（ピクセル）単位で調べることが可能。
正確なサイズを測りたい場合は左上の【＜＞】クリックするとエレメントモードになり、カーソルを合わせることで構成要素ごとの正確な寸法を調べることができます。☟拡大できるよ！
View Image Infoの導入＆使い方
次に紹介するのもGoogleの拡張機能の１つ「View Image Info（properties） 」です。このツールもWEB上の画像の情報を調べることができる超便利なツール。
早速下のリンクボタンよりChromeに追加してみましょう。
Chromeに追加後、画像の上で右クリックすると「View Imge Info(properties)」メニューが表示されるようになります。
View Image Info（properties）をクリックすると下の表のような画像情報が表示されます。
各項目の内容は下のとおりです。
| Location | 画像のURL |
| Dimensions | アップロードしたオリジナル画像のサイズ |
| Dimensions（scaled to） | 実際にWEB上で表示されている画像サイズ |
| File Type | 画像ファイルの拡張子 |
| File Size | 画像ファイルのデータサイズ |
| Alt/Title | 画像につけているファイル名 |
今回調べた画像でわかることは、
アップロードした画像は横幅1200pxですが、実際に表示されいている横幅は694pxです。
つまり幅694pxが適切なサイズであるのに無駄に大きなサイズの画像を貼っていることになります。
手っ取り早くサイズ調整する方法
記事中に貼る画像は高さはあまり気にしなくてもよいですが、アイキャッチ画像はサイズを揃えないとデザインがガタガタになってしまいます。
アイキャッチ画像は上で紹介した「Page Ruler Redux」「View Image Info」で適切な寸法を計測し、Canvaでサイズ調整するのがとても簡単です。
超絶簡単なサイズ変更でCanvaの使い方を詳しく解説しているので参考にしてみてください。
キャプチャー画像のサイズ調整
キャプチャー画像は元々パソコンに備え付けられているPrint Screenでもスクリーンショットを撮ることができますが、１つのソフトでサイズ調整や文字入れ、動画作成もできる「スクリーンプレッサー」がおすすめです。
下のリンクボタンの公式サイトでインストールしましょう。こちらのツールも無料で使えます。
インストール後キーボードの「Windowsマーク」と「Print Screen」を同時に押したり、画面上部のスクリーンショットボタンをクリックするとキャプチャーできます。
簡単にサイズ変更したり文字を入れたりと、ScreenPressoのツール上でキャプチャー後すぐに様々な加工ができるので使い勝手が良すぎます。☟拡大できるよ！
サイズ調整の後は圧縮も忘れずに
適切な画像サイズの調べ方と加工方法がわかりましたが、ブログに画像を貼る前には必ず圧縮する癖を付けましょう。
圧縮のひと手間が読み込み速度を速めることになり、最終的にはGoogleの評価にも繋がります。毎回、圧縮するのは慣れるまでは大変ですが習慣化するようにしましょう！
圧縮については、ブログ画像の超絶簡単な軽量化法にまとめていますので参考にしてみてください。
適切な画像サイズを調べる方法:まとめ
適切な画像サイズを調べる方法（ツール）を紹介してきました。
もう一度おすすめのツールを紹介しておきます。どちか一つChromeに追加しているだけで調べられますので、まだ利用していない方はインストールしてしましょう！
- Page Ruler Redux
- View Image Info
手間はかかりますが毎回画像サイズの調整と圧縮を行いGoogleから最高の評価をもらいましょう！
