WORDPRESS

WordPressブログでおすすめな、画像サイズ(ピクセル数)ってどのくらい?【リサイズの基準】

WordPressブログでおすすめな画像サイズについて アイキャッチ
 

あずきです🐥

WordPressブログにおける…

画像サイズのおすすめなpx(ピクセル数)

について、ブログ初心者さん向けに1から解説していきます

 

具体的には、ブログに貼る画像の…

Width(横幅)のサイズ

です

 

まず、ブログ画像における「Width(横幅)」の上限というのは、基本的に統一させておくのがおすすめ

 

理由としては…

  • 画像サイズが大きいと容量も重たくなるので、サイトスピード(ページ表示の速さ)に悪影響がある
  • 画像サイズを統一せずにテキストや図形を描き加えると、サイズ比率が画像によってバラバラになる

こういった点が挙げられるからですね

 

ということで、今回は3つのステップで丁寧に解説していきます

  1. ブログにおすすめな画像サイズの目安
  2. 理想の画像サイズを決める際のポイント
  3. メインカラム(記事エリア)の横幅の調べ方

さっそく見ていきましょー🐥

 

WordPressブログにおける、おすすめな画像サイズ=ピクセル数【3つのステップ】

ブログにおすすめな画像サイズの目安【抑えめ 600~800px / 大きめ 1000~1200px】

WordPressブログ「完全初心者」ガイド 見出し a-01

ブログにおすすめな画像サイズ(正確には、その横幅)については、調べてみてもけっこうバラバラな感じです

ただそのなかでも、「ざっくりな目安」というのはやっぱりあります

次の通りです

  • 抑えめの目安 → 600~800px
  • 大きめの目安 → 1000~1200px

サイズが大きい方が、当然画質はキレイに映りますが、その分ページ読み込みを重たくしてしまいます

ちなみに、このブログでは…

  • 通常の画像 → 700px(たまに1024px)
  • アイキャッチ画像 → 1024px

こちらの数字に上限を統一してます

※あくまで「上限」となるサイズです。 そもそも小さい画像を載せる場合、当然これより小さい数値になります

ちなみに「1024px」というのは、一般的にメジャーな画像サイズの1つです

あともう1点!

「Facebook」で記事がシェアされる際のサムネ表示を「通常サイズ」ではなく「大きいサイズ」で表示させたい場合、その記事のアイキャッチ画像は…

  • 横幅 1200px
  • 縦幅 630px

以上のサイズが推奨されてます

ここまでの目安をふまえたうえで、お次は「理想の画像サイズの決め方」について見ていきましょう🐥

理想の画像サイズを決める際のポイント【メインカラムにムダなく収める】

WordPressブログ「完全初心者」ガイド 見出し a-02

ブログに使う画像で、「理想の画像サイズ」を決めるポイントは個人的に3つあると考えてます

  • メインカラムの幅いっぱいには、最低限届くサイズにする(通常、700pxくらい)
  • かつ、それ以上大きすぎない(容量をセーブ)
  • その2点を基本としつつ、一部例外として「綺麗に見せたい画像」だけは大きいサイズをあえて使う(例えば1200pxとか1920pxとか)

「メインカラム」というのは、「サイドバー」などを除いた記事スペースを指します

まとめると、「ユーザーが快適に見れるための当たり前のポイント」を押さえつつ、そのうえであとは「柔軟な使い分け」が大切なのかなと思ってます

 

メインカラム(記事エリア)の横幅の調べ方【Google Chromeのデベロッパーツールなら一瞬】

WordPressブログ「完全初心者」ガイド 見出し a-03

ブログにおける「メインカラムの横幅」は、「Google Chrome」ブラウザなら簡単にチェック可能です

「デベロッパーツール(別名:検証モード)」というのを使います

まずは「Google Chrome」のブラウザで、ブログにアクセスしましょう

WordPress管理画面にはログインしなくてもOK!

WordPressブログにおすすめな画像サイズ 1-3-01

↑ いずれかの記事ページを開いて、キーボードの「F12」キーを1度押します(右クリック → 検証でもOK!)

すると…

WordPressブログにおすすめな画像サイズ 1-3-02

↑ 右側に、「デベロッパーツール」という画面が開きます

「検証モード」とも言うよ!

このデベロッパーツール内における…

WordPressブログにおすすめな画像サイズ 1-3-03

↑ 左上の「矢印」ボタンを1度クリックし、それから…

WordPressブログにおすすめな画像サイズ 1-3-04

↑ ブログのページ上に、カーソルをもっていきます

すると画面上がブルーに切り替わるので、画像例のように「メインカラム」部分がブルーになった状態で、1度クリックします

普通に左クリックでOK!

すると、右側の「デベロッパーツール」内における…

WordPressブログにおすすめな画像サイズ 1-3-05

↑ ブルーの網掛けエリアに、「メインカラム」の横幅(ピクセル数)が表示されます

今回の例では、横幅は「694px」だとわかりました

この場合、画像サイズの基本的な横幅を「700px」とかで統一しておけば…

  • メインカラムの幅いっぱいに、ちゃんと表示される
  • かつ、それ以上ムダに大きすぎない

のでおすすめです

ちなみに、このデベロッパーツールを閉じるには…

WordPressブログにおすすめな画像サイズ 1-3-06

↑ 右上の「×」をクリックすればOKです

 
 

今回の記事はこちらの章に属しています

WordPressブログガイド 第9章「豆知識」編 

あずきのWordPressブログガイド 総合TOP 

\ このブログでも愛用中! /

WING AFFINGER5 banner-large-01

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

 ✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション!

 ✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「WING AFFINGER5」気に入ってる点・気になる点をガチレビュー

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS

© 2019 あずきのぶろぐ