記事プレビューの写真を、縦横比を保って整える

記事の位置づけ：表示確認の記録あり

企業・個人・内部構成が特定されないよう、内容を一般化して紹介しています。

背景と課題

記事の写真が既存の記事より大きく見える相談で、横幅だけでなく写真の高さと縦横比を比較しました。

対応・整理した内容

過去の対応では、表示枠の高さをそろえ、写真を歪めずに必要な部分が収まるようトリミング位置を調整しています。PCとスマートフォンの表示をそれぞれ確認した記録があります。

記録で確認できる結果

対象のプレビュー画面で表示サイズと見え方の確認が記録されています。プレビューの変更と、公開サイト全体への適用は別の範囲として扱います。

同じ課題に取り組む際の確認事項

写真の主題、文字の重なり、画面幅、縦横比を確認します。表示枠をそろえる場合も、顔や重要な要素が切れないかを画像ごとに確認します。

対応手順と図解

同じ課題に対応するときの確認手順です。対象環境と権限を確認してから進めてください。

手順 1

元画像の比率と一覧・詳細それぞれの表示枠を確認する。

手順 2

用途に合う表示方法と余白を調整する。

手順 3

PCとスマートフォンで画像全体と文字の見切れを確認する。

完了の判断

最後の手順で期待する結果が得られたことを記録します。設定変更や処理の受付だけで完了とせず、利用者の操作と実際の結果を確認してください。うまく進まない場合は、停止した手順・発生時刻・対象・確認済みの結果を担当者に伝えます。