これまで「おやじのウェブサイト」で使っていた画像は、ほとんどが参考用のスクリーンショットばかりでした。これからは記事に写真も載せたい！…とはいえ、写真はファイルサイズが大きくなりがちなので、そのままではサイトが重くなってしまいます。そこで今回は、エックスサーバーの講座を参考にした「画像サイズの目安」についてまとめます。
記事内・アイキャッチ・トップページの画像サイズ
エックスサーバーが紹介している目安を簡単に整理するとこんな感じです👇
| 記事内 | アイキャッチ | トップページ | |
| 画像サイズ | 800 px | 1200 px | 2000 px |
| ファイルサイズ（容量） | 200 KB | 200 KB | 200 KB |
- 記事内画像：横幅 800 px（Cocoonの本文幅に合わせる）
- アイキャッチ画像：横幅 1200 px（記事リストで目を引くサイズ）
- トップページ用画像：横幅 2000 px（画面幅いっぱいに広がる大きな画像）
いずれもファイルサイズは 200 KB 程度 に抑えるのが理想とされています。大きくても自動で調整されますが、最初から適正サイズにしておいた方が安心です。
画像の役割をおさらい
- 記事内画像：本文を読みやすくするサポート役。最大幅800 pxでOK。
- アイキャッチ画像：タイトル・本文冒頭と並んで「記事の顔」になる大切な要素。訪問者を惹きつける効果があります。
- トップページ画像：最初に目に飛び込んでくるビジュアル。印象づけに大きな力を発揮します。
WordPressの「メディア設定」を調整
実は、Cocoonの推奨に合わせて画像サイズの自動調整を設定しておくとさらに便利です。
| サムネイル | 中サイズ | 大サイズ | |
| 画像サイズ | 300 px | 500 px | 800 px |
- サムネイル：300 px
- 中サイズ：500 px
- 大サイズ：800 px
設定方法はかんたん。WordPress管理画面の「設定」 → 「メディア」 から変更できます。
以下のように、ワードプレスのテーマ『Cocoon』の推奨に合わせて変更：
参考記事
今回の内容は、Cocoon公式サイトのこちらの記事がとても参考になります：
👉 WordPressのメディア設定を変更する
📸 これでスクリーンショットだけでなく、自分の写真も安心してブログに取り入れられますね！
