今回は、WordPressで画像をアップロードする際に最大サイズを決めて一定のサイズで表示させる方法を紹介します。
通常WEBサイトで写真を投稿するとオリジナルの画像サイズが選択され表示されます。
ただしWordPressの場合は、予め最大サイズ決めそれを表示させる事が可能です。
3パターンの画像サイズが用意されている
WordPressでは、画像をアップロードした時に予め3パターンの画像サイズが自動で作成されるような仕組みが組み込まれています。なので一枚の画像をアップすると3枚の画像がアップされたのと同じ状況になります。
その数値の設定が、WordPress左側の管理ツールバーの設定→メディアの部分で可能になっています。
WordPressでは、小サイズ〜大サイズの画像サイズを一括で作成してくれます。メディア設定では、そのサイズの上限を決めます。
小サイズはサイドバーなど狭いコンテイナーで使用されるサムネイル画像、中サイズはメインのサムネイルに使用される画像、大サイズは投稿コンテンツ内で使用される画像です。
初期設定では、上記の画像のように「小150×150」「中300×300」「大1024×1024」の上限サイズになっています。
初期設定のまま写真を投稿すると下記の様になります。
この写真の元サイズは1100×1100です。アスペクト比は維持されながら、WordPressで設定されている最大サイズの「大1024×1024」の設定に沿って最大幅を超えないようにコンテイナーに入っていきます。
この場合、実際に表示されているサイズは717×712です。（13incの28.73の画面幅の場合）当然、画面幅が大きくなるとそれに応じて写真のサイズも大きくなりますが限界が1024pxになっています。
次に、下記のように「大1024×1024」を「大500×1024」に変更してみます。（幅の最大値を500に変更。）
すると実際の表示は下記のようになります。全く同じ画像を使用しているにも関わらず、先程と比べて明らかに画像サイズが小さくなっているのがわかります。
メディア設定で設定した「大500×1024」の幅が500pxを超えないようになります。それに応じてアスペクト比を維持するため同じ数値だけ縦幅も変動し500pxに置き換えられます。
この様に最大値が思い通りに制御可能となっています。この設定を使って画像のサイズを調整していきます。
注意点
ただ今回の調整方はアップした最大値を制御する方法なので注意が必要です。
あくまでもメディア設定では、上限を決めてあげてコンテイナーに収める手法なので、それ以下の画像サイズは調整されません。
例えば、先程と同じ設定で「250×250」の画像を投稿したら下記のようになります。
冷静に考えれば当たりませなのですが、このメディア設定で全ての画像が一定に調整されると勘違いしているクライアント様もたまにいるので、それは勘違いです。
また、この設定はあくまでアップロードした際の画像が設定値に変換されていきます。なので既にアップされている画像はアップした時点でのメディア設定の数値で画像が作成されています。
EWWW Image Optimizerと言う画像のリサイズプラグインを使えば古い画像も一括で新しい設定のものにリサイズ出来ます。詳しくは以下。
以上が「ワードプレスでアップする画像を一定サイズに統一する方法」でした。
画像メディアって、普段からスマホやカメラで扱っているので、簡単そうに思えますが実は意外とややこしい事が多い部門です。一般的に使ってるスマホ画像とかは色々と難しい仕組みで常に最適化されているだけです。その辺りのロジックを理解すれば簡単ですが…
最後に投稿の画像サイズを細かく調整することも可能です。その方法を下記の記事で書いています。
