Alphaテンプレートに適切な画像サイズとピンボケの解決法

こんにちは、あさぺん（@asapen01）です。

こちらのサイトで使用しているWordPressテンプレート『Alpha』に、適切な画像サイズについて情報をシェアしていきます。

”適切な画像サイズ”と書いていますが、ただ挿入するだけなら、画像サイズを気にする必要はありません。

どんなサイズの画像でも、とりあえずは表示されます。

ですが、画像サイズがカラム幅に合っていない場合、画像がピンボケすることがあります。

「ユーザーにとって読みやすいように」という思いで埋め込んだ画像が、ピンボケして見にくくなってしまうのは残念ですよね。

ですから、こちらの記事では、各カラムごとに合った画像サイズ（主に幅）を提案していきます。

1カラムの場合（デフォルト）

デフォルトの状態で、entry-contentの幅は850pxに設定されています。

画像を挿入する際は、850px以下にリサイズしてから挿入すると、ピンボケがなくなります。

2カラムの場合（デフォルト）

デフォルトの状態で、entry-contentの幅は620pxに設定されています。

画像を挿入する際は、620px以下にリサイズしてからアップロードすると良いです。

ちなみに、このサイトの画像は幅600pxにリサイズしています。

3カラムの場合（デフォルト）

デフォルトの状態で、entry-contentの幅は560pxに設定されています。

画像を挿入する際は、幅を560px以下にリサイズしてからアップロードすると良いでしょう。

と、ここまではデフォルト状態（カラム幅を調整していない状態）を前提として話を進めてきましたが、実はカラム幅そのものを変更することもできます。

カラム幅を変更して対応する

実は、「ダッシュボード」→「オプション」→「サイズの設定」で、各カラム幅を変更することができます。

ただし、「カラム幅＝entry-content幅」ではないので注意が必要です。

例えば、2カラムのメインカラム幅を700pxに変更した場合、entry-content幅はもう少し小さくなります。

ですので、あなたがカラム幅を変更したら、検証などの機能を利用して、entry-content幅を再度調べなおす必要があります。

この点だけ注意しておいて下さい。

まとめ

そして、オプションからカラム幅を変更する場合は、再度entry-contentの幅を調べなおした方が良い。

この2点を覚えておくと良いです。