WordPress｜ヘッダー画像が粗くなる(ぼやける)原因と対処法

「ヘッダー画像を設定したのになんか粗い…、なんで？」

こんな疑問を持ってる方に向けて、
WordPressのヘッダー画像がぼやける2つの原因と対処法を解説します。

ヘッダー画像が粗くなる原因は画像サイズが合ってないからです。
ただ、WordPressのテーマによって最適な画像サイズが違ってたりします。

なので、まずは使ってるWordPressのテーマに最適な画像サイズを調べて、
それでもヘッダー画像が粗くなるなら2つ目の原因を対処する感じですね。

それでは解説していきます。

ヘッダー画像が粗くなる原因

ヘッダー画像が粗くなる原因は2つ考えられます。

画像サイズが合ってない

まず1つ目の原因は画像サイズが合ってないからです。

ヘッダー画像に最適なサイズよりも用意した画像サイズが小さいので、
引き伸ばす感じになり画像がぼやけてしまいます。

解像度が低くなってしまうんですよね。

そもそも画像の解像度が低い

2つ目は、そもそも用意した解像度が低い可能性です。

よっぽど酷い画像ではない限りは考えられないんですけど、
たま〜にあります。

この場合、画像サイズを最適化してもぼやけたままです。

ヘッダー画像におすすめのサイトはこちらで紹介してます。

ヘッダー画像が粗いときの対処法

それではWordPressのヘッダー画像が粗いときの対処法です。

最適なヘッダー画像サイズを調査

まずは最適なヘッダー画像サイズを調査します。

WordPressではテンプレートによって最適なヘッダー画像サイズが違います。
なのでまずは最適なヘッダー画像サイズを調べます。

WordPress管理画面内のヘッダー関連に記載してあることが多いです。

 

もし探しても見つからない場合は横1200px×縦350pxくらいで一旦作るといいですね！

そのサイズをヘッダー画像に当てはめてみて、そこから微調整しましょう。

ヘッダー画像を編集する

つぎにヘッダー画像を編集します。

最適なサイズに合わせてリサイズしたり、切り取ったり、
テキストを挿入したりするといいですね！

もしヘッダー画像内にテキストを入れるなら文字サイズに気をつけてください。
あまりに小さいと見えないです…。

なのでパソコン画面上で最適なサイズを選ぶのではなく、
ヘッダー画像と文字サイズの大きさの割合で考えたほうがいいですね！

 

ヘッダー画像が編集できたらWordPressに設置しましょう！

画像サイズを大きくする

ヘッダー画像を最適なサイズにしてもぼやける場合には、
画像サイズを大きくするといいですね！

画像サイズを大きくするときのポイントは対比です。
最適なサイズが横1,200px×縦300pxだったら、横2,400px×縦600pxにする感じです。

 

対比に合わせてサイズを大きくすれば、
ヘッダーとして見えるサイズはそのままで、画像の解像度は上がります。

なのでもし最適な画像サイズなのに粗い場合には、
対比に合わせてサイズを大きくしてみましょう！

スマホでもヘッダー画像を確認

WordPressのヘッダー画像は、基本的にパソコンの画面に合わせて作成していきます。

そっちのほうが作業はしやすいのでOKなんですけど、
ちゃんとスマホでもヘッダー画像を確認しましょう！

パソコン画面とスマホ画面では見える大きさが違ってくるんですよね。

パソコンだと丁度いいけどスマホだと少し画像が小さくなったり、
テキストが見えにくかったりします。

せっかく気合入れて作ったヘッダー画像が見にくかったら残念ですよね…。

また、ほとんどのユーザーはスマホでブログを見てます。

 

なのでスマホ画面でもヘッダー画像を確認して、
見えやすくて分かりやすいサイズにしておくといいですね！

とくにヘッダー画像内にテキストを入れてる場合には要チェックです。

画像サイズと微調整

WordPressのヘッダー画像が粗くなる(ぼやける)原因と対処法をお話しました。

ヘッダー画像が粗くなる(ぼやける)原因は、画像サイズが合ってない可能性が高いです。
テンプレートに合う推奨サイズを調べて、ヘッダー画像に最適なサイズで作りましょう！

あとは微調整です。

一回でバシッと決まったら嬉しいですが、
推奨サイズであってもスマホで見ると小さく感じることもあります。

パソコンとスマホで見ても綺麗に見えるように、
ヘッダー画像サイズを調整しましょう！