大きさや向きがバラバラな画像の表示サイズを自動で揃える

一覧ページなどでそれぞれの記事の画像をアイキャッチとして表示させることがあると思いますが、この時画像の縦横の向きやサイズが不統一だと少し不格好に見えます。

サービスメニュー一覧などの場合ですとトリミングしたりして統一し、意図した通りに表示することがベストですが、ブログなどの場合スマホでカジュアルに撮影した写真をそのまま使うことも多く、不揃いになってしまうこともあるかと思います。

そういう時に良い感じに使える「画像比率固定トリミング」という表示設定をすると、一つ一つ画像を加工しなくても、画像の縦横比を維持したまま自動でトリミングして一律同じサイズで表示されます。

例えば、上記のように画像のサイズや縦横の向きがバラバラなブログ一覧ページを、画像の加工をせずに

この↑ような形で自動的にトリミング表示できます。

設定手順は、

プレビュー画面でブログ一覧ページを表示して、

ブログ見出しの左肩に表示されている緑色の歯車ボタンをクリックし、

画像比率固定トリミング欄を、「正方形」、または、「16:9」に設定し、下部の「保存」をクリックします。