WPに縦長写真を入れたら正方形サムネで頭が切れた – NPC

コーポレートサイトのリニューアルや人物紹介ページの更新をWordPressで対応していると、「写真を差し替えたはずなのにどこかおかしい」という状況に出くわすことがあります。自分もあります。しかも、サイト内22箇所の画像置き換えを終えて「完了した！」と思った矢先、チェックしてたら気づくというパターンが多いです。

WordPressに縦長の人物写真をアップロードすると、正方形で表示されるサムネイルのところで顔や頭頂部が切れてしまうことがあります。今回はその実体験と、同じ失敗を避けるための対処方法をまとめます。

「作業おわったー！」って思ったら

あるコーポレートサイトで、代表者の写真を全面的に新しくするという作業がありました。既存のポートレート写真から新しいバストアップ写真に差し替える、という内容です。

用意した画像は縦長のポートレート（500×640px）、やや小さめのバリアント（270×330px）、高解像度版（1669×2500px）の3種類。それぞれWordPressにアップロードし、REST APIでサイト内の画像IDを一括で書き換えました。作業後に自分でページを確認したところ、メインのコンテンツエリアでは問題なく表示されていました。

「完了しました」と報告して数日、別件でサイトチェックをしてたいたらなんと、頭が切れているサムネイルを見つけました。

慌てて確認すると、ニュース一覧や投稿アーカイブのサムネイル（150×150pxで表示される箇所）で、首から胸のあたりしか映っていない状態になっていました。顔も頭頂部も見切れています。「報告前にここを確認しておけばよかった」と後悔しながら対処した記憶があります。

なぜ縦長写真の正方形サムネで頭が切れるのか

WordPressは画像をアップロードすると、複数のサイズを自動で生成します。thumbnail（150×150px）やmedium（300×300px）がその代表例です。

このとき、縦長の写真から正方形サムネイルを作る場合、WordPressは「画像の中央から正方形を切り出す」という処理を行います。これが問題のすべての原因です。

縦長写真の「中央」とは、ポートレートの場合は胸から腹部のあたりを指します。顔や頭頂部は上端に寄っているため、中央クロップでは範囲外になってしまいます。

以下は、縦長写真から正方形サムネが生成される仕組みの概略です。

元画像が1669×2500pxのような極端に縦長の場合はさらに深刻で、中央クロップの切り出し範囲は腰あたりになります。顔はもちろん胸元も写らないケースがあります。

これはWordPressの仕様によるものです。テーマや投稿設定の問題ではないため、後からCSSでobject-fit: coverなどを当てても「見た目上の修正」にしかなりません。画像ファイル自体はアップロード時点で中央クロップで生成されています。

解決策：正方形用の元画像を別に用意する

根本的な対処法は、縦長写真とは別に「正方形サムネイル用の元画像」を用意してWordPressに登録することです。

縦長写真の上端から正方形の領域を切り出した別ファイルを作り、これをWordPressにアップロードします。すると、自動生成される150×150サムネイルは「上端から正方形の中央＝頭の位置」を基準にクロップされるため、顔が切れなくなります。

対応の流れはこうなります。

縦長元画像はプロフィールページや詳細ページなど縦長表示が必要な箇所で使い、正方形元画像はニュース一覧やアーカイブなど正方形サムネが使われる箇所で使います。

実際の対処手順

1. ffmpegで正方形切り出しファイルを作る

ffmpeg（画像・動画を変換できるコマンドラインツール）を使うと、1行で処理できます。元画像の左上端（x=0, y=0）から正方形の領域を切り出し、600×600pxにリサイズする例です。

ffmpeg -i original.jpg -vf "crop=1669:1669:0:0,scale=600:600" -q:v 2 portrait-square.jpg

「crop=幅:高さ:x開始:y開始」という形式で、0:0は左上端からの切り出しを意味します。顔の位置によってy開始値を微調整することもありますが、バストアップ写真なら上端起点でほぼ問題ありません。

切り出した画像は必ずブラウザや画像ビューアで開き、顔・頭頂部・胸元がきちんと収まっているかを目視で確かめます。ファイル名はportrait-square.jpgのように縦長版と区別できる名前にしておくと、メディアライブラリの管理がラクになります。

2. 表示箇所ごとに使う画像を分岐させる

サイト内で人物写真が使われている箇所を確認し、縦長表示と正方形表示でどちらの元画像を使うかを分けます。

どちらを使うかは、ページのHTMLで<img>のwidth・height属性や、URLに含まれるサイズサフィックス（-150x150.jpgや-240x240.jpgなど）を見ることで判断できます。

3. 置き換えたあとは正方形サムネを目視で確認する

今回の失敗の本質は、「作業完了後にメインのコンテンツエリアだけ確認して満足してしまった」ことでした。

ニュース一覧、投稿アーカイブ、サイドバー、ウィジェットなど、正方形サムネが使われている箇所は複数あります。メインコンテンツが正常でも、これらが崩れている可能性は十分あります。置き換え作業の後は、正方形表示が出る箇所をひとつずつ確認してから完了報告する習慣をつけておくことが大切です。

縦長写真を扱うときのチェックポイント

同じ失敗を繰り返さないためにまとめたポイントです。人物写真を差し替えたり新たに登録したりするときに意識しています。

「縦長の写真1枚でサイト全体をまかなおう」という発想で進めると、どこかで破綻します。事前に正方形表示の箇所を洗い出し、用途に応じた画像を準備しておくのが安全策です。

まとめ

WordPressの自動サムネイル生成は「中央クロップ」で動くため、縦長の人物写真をそのままアップロードすると正方形サムネで頭が切れます。

解決策は、縦長表示用と正方形表示用の元画像を別々に用意すること。正方形用は縦長写真の上端から正方形を切り出したファイルを作り、正方形サムネが使われる箇所に割り当てます。

自分自身、「完了報告のあとに気づく」という最悪のパターンで学んだことです。WordPress上で人物写真を扱う際の参考になれば幸いです。
まぁ、ちゃんとチェックするなんて、当たり前のことなんですけどね。
忙しかったりするとついつい。なんてこともあったりするので！

※この記事はNPCの中の人の実務経験をもとに書いています。