MANIARUのアイキャッチは、WordPressの記事とSNSシェアの両方で使えるように、1200×630pxで作っています。画像ファイルを単体で開いたときは、文字もMロゴも意図した位置に収まっていました。
ところが、記事一覧で確認すると、画像右上に置いたMロゴの一部が切れていました。元画像に問題があるようにも見えますが、今回は画像ではなく、WordPress側の「表示する枠」と画像の比率が合っていないことが原因でした。
この記事では、既存画像を作り直さず、追加CSSで一覧の表示比率を1200×630に合わせた過程を記録します。
記事一覧でアイキャッチのMロゴが切れていた
問題に気づいたのは、作成したアイキャッチを記事一覧で並べて確認したときです。記事ページでは画像全体が表示されているのに、一覧のカードでは右上のMロゴが途中で切れていました。
同じ画像でも、表示する場所によって見え方は変わります。記事ページでは画像本来の縦横比で表示されても、一覧ではテーマが用意した一定の枠へ収めるため、枠からはみ出す部分がトリミングされることがあります。
元の1200×630px画像を確認すると、Mロゴは画像の中に収まっていました。そのため、画像の配置を直す前に、一覧側でどの比率になっているかを確認することにしました。
画像をすべて作り直す必要はある？
最初に考えたのは、Mロゴをもっと内側へ移した画像を作り直す方法です。ただ、元画像のサイズと配置は意図どおりで、問題が起きていたのは記事一覧だけでした。
ここで既存画像を一枚ずつ直しても、一覧側の比率が違うままなら、今後作る画像でも同じ問題が起きる可能性があります。画像制作のルールを変えるより、1200×630pxを基準にしている一覧の表示枠を、その比率へ合わせる方が自然だと判断しました。
変更箇所を表示側にまとめれば、既存画像だけでなく、これから同じサイズで作るアイキャッチにも適用されます。今回は、画像ファイルや記事本文には触れず、WordPressの追加CSSだけを変更しました。
記事一覧の比率を1200×630に合わせる
現在MANIARUで使っている追加CSSは、次の一行です。
.c-postThumb__figure{padding-top:52.5%}.c-postThumb__figureは、MANIARUの記事一覧でアイキャッチを表示する枠です。この枠の上側の余白を、横幅に対して52.5%に指定しています。
52.5%という値は、630 ÷ 1200 = 0.525から決めました。横幅を1200としたときの高さが630になるため、約1.91:1の比率になります。
今回は、外観の「カスタマイズ」から「追加CSS」を開き、この指定を追加しました。画像の大きさそのものを変えるコードではなく、一覧で画像を見せる枠の高さをそろえる指定です。
実際に使っているセレクタと値はこの一行だけです。この記事のために別のコードを追加したり、現在正常に動いているCSSを変更したりはしていません。
PCとスマートフォンで確認する
CSSを反映したあと、AI、BUILD、WEB、CODE、GROW、MONEYの各記事一覧を確認しました。
- Mロゴと重要な文字が切れていない
- 画像が不自然に引き伸ばされていない
- カードの並びや余白が崩れていない
- 横スクロールが発生していない
PCとスマートフォンの両方で確認し、一覧の横幅が変わっても同じ比率が保たれることを確認しました。画像の端を見せるために個別の位置調整を加える必要もありませんでした。
今後追加するアイキャッチにも適用される
一覧側の共通枠を直したため、この変更は既存記事だけに限定されません。今後も1200×630pxでアイキャッチを作れば、同じ約1.91:1の枠で表示されます。
画像制作側で基準サイズを決め、WordPress側も同じ比率で表示する。二つのルールをそろえたことで、記事ごとに画像位置を調整する必要が減りました。
既存画像と記事本文は変更していません。画像を一括で差し替えるより変更範囲が小さく、今後の記事にもそのまま使える方法になりました。
Mロゴ周囲の白背景は別の問題だった
一覧の比率を直したあと、別のアイキャッチでは、Mロゴの周囲に白い矩形が見える問題も見つかりました。
これは今回のトリミングとは原因が異なります。Mロゴが切れる問題は一覧の表示比率、白い背景が見える問題は画像へ配置したロゴ素材と背景のなじみ方に関係していました。追加CSSで比率を直しても、ロゴ素材の白背景までは消えません。
見た目が似た問題でも、元画像、素材、表示枠を分けて確認すると、直す場所を絞れます。一度に複数の変更を入れず、一つずつ原因を切り分けることが大切でした。
画像と表示側のどちらに原因があるか確認する
アイキャッチが切れて見えると、画像を作り直したくなります。しかし、元画像に必要な要素が収まっているなら、WordPress側の表示比率が原因かもしれません。
今回は、元画像が1200×630pxで正しく作られていることを確認し、一覧の枠を同じ比率へ合わせました。画像を直す前に、どこで切れているのかを確認したことで、変更を一行のCSSに留められました。
MANIARUでは、ほかにも公開後に実際の画面を使いながら導線を見直しています。「公開したWordPressサイトを実際に使ってUXを改善してみた」では、公開後に気づいた使いにくさを整理して改善した流れをまとめています。