WordPressに掲載する最適画像サイズは800ピクセルと1280ピクセル

IT技術

WordPressの記事を書き始めるとふと疑問に思うことがありました。

画像の幅をいくつにするべきなんだろう???

スクリーンショットでとると、2000px以上のサイズになることもありますが、HTML上は自動幅調整が行われるため、いくつにするべきかのイメージがつかみにくい状態でした。

Cocoonテーマでは、記事の画像は800pxをベースにしアイキャッチ画像は、1280pxをベースに16:9の縦横比にするのがしっくりきたので、そのことを記載します。

対象読者
  • Cocoomテーマを使用中である
  • WordPressの画像がうまくはまらない
スポンサーリンク

Cocoonのコンテンツ幅

記事コンテンツ画像の幅


Cocoonテーマの記事の横幅のデフォルトは、決まっております。

こちらの画面から確認することができます。

左メニューのCocoon設定カラムタブのコンテンツ幅に記載があります。

コンテンツ幅

800pxを超える画像は自動調整されるので、この幅に合わせるのが良さそうです。

アイキャッチ画像の幅

同様にアイキャッチ画像の幅も確認できます。

左メニューのCocoon設定画像サムネイル画像に9:16を設定されています。

アイキャッチ比率

この比率に画像が設定されていないと、切り抜かれて意図した画像表示ができません。

画像の調整

画像幅の調整を必要なことがわかったので、WordPressで設定変更する方法を記載します。

  1. 左メニューのメディアから画像を選択します
イメージ選択
  1. 画像を編集を選択します
編集前画面
  1. 画像縮尺の変更メニューから縮尺サイズを変更して、 縮尺変更を選択します
縮尺変更

画面上は←→のカーソルキーで画像の選択ができます。

記事の調整

画像幅の調整が完了したら、記事の画像も再調整が必要です。

  1. 記事内の画像を選択します
  2. 画像サイズをフルサイズに変更します
  3. 記事に合わせた幅調整をボックスから選びます
記事幅の変更

画像のポインターでも任意の幅調整は可能ですが、統一感が出せないのでオススメしません。

まとめ

WordPressの記事は、画像の幅でだいぶ見やすさが変わるんだなとわかりました。

画像のアップロードは簡単なものの、メディア設定で画像幅など調整してから記事にするほうが手間がかからなさそうです。

自動で画像の幅を調整してくれるプラグインもあるそうなので、今度はそちらの設定を試してみたいと思います。

参考動画

とつ

某SIer企業勤務。サーバーインフラ系でキャリアを伸ばしつつ、2020年からAWS運用にシフト。
老け顔から、「とっつあん」とあだ名で呼ばれ、それが「とつ」といつしか略されるようになったのがハンドルネームの由来。
「リベラルアーツ大学」をきっかけに、稼ぐ力を養いたいとBlogサイト運営を開始。Blogの成長とともにAWSのスキルアップももくろむ。
家族は妻と長男。3歳の長男がついこの前「しーしこ行くー!」と念願のオムツはずれを達成した!

とつをフォローする
IT技術WordPress
スポンサーリンク
とつをフォローする
とつブログ

コメント

タイトルとURLをコピーしました