【SWELL】アイキャッチ画像の左右をはみ出さないで表示する方法

今日はWordPressの人気テーマ【SWELL】のアイキャッチ画像をキレイに表示する方法を紹介します。

私もSWELLを使い始めた頃、せっかく作ったアイキャッチ画像をSWELLに入れたら見切れる現象が起きました💦

この記事を読めば、アイキャッチ画像を作り直さず、設定を変更するだけでキレイに表示できますよ◎

【SWELL】アイキャッチ画像の推奨サイズ

【SWELL】のアイキャッチ画像の推奨サイズは 1200 × 630px です！

SWELLだけでなく、FacebookやTwitter（X）などSNSにシェアされた際もきれいに表示されますよ。

そもそも…アイキャッチ画像って？

アイキャッチ画像とは、各記事に設定するメインの画像のこと💡

記事の概要を視覚的に伝える重要なイメージ

「ユーザーの目を引きつける（アイキャッチ）」役割があります。

アイキャッチ画像が表示される場所

• 各記事ページのトップ
• ブログのトップページ（記事一覧、記事スライダー、ピックアップバナーなど）
• 記事をSNSでシェアした際の画像（OGP画像未設定時）

【SWELL】アイキャッチ画像を見切れずキレイに表示する方法

【SWELL】でアイキャッチ画像を端までキレイに表示するためには、カスタマイズ機能「サムネイル画像の比率設定」を変更します💡

初期設定はワイド（16:9）に設定されています。

変更方法

カスタマイズ→記事一覧リスト→サムネイル画像の比率設定をOGP（1.91:1）に変更する

私はカード型リストを使用しているので、他の比率は変更しなくても問題ありませんが、ブログ内の画像をすべて1200 × 630px で作成しているので、変更しました。

おまけ：OGP画像の見え方の確認方法

OGP画像＝SNSで記事をシェアした時に表示されるサムネイル画像。メディア共有時の目立たせる役割。

OGP画像の推奨サイズもアイキャッチ画像と同じ 1200 × 630px ですが

SNSや閲覧環境によっては中央と基準に正方形にトリミングされてしまいます。

画像中央の 630 × 630px のなかに入れれば確実に表示できますよ◎

OGP画像の確認方法

以下のサイトにアクセスして、確認したいURLを入力すると見え方を確認できます。

さいごに

アイキャッチ画像はブログ記事の「顔」といえる重要な役割です。

まだアイキャッチ画像を用意されていない方は、この記事をブックマークして後で設定してくださいね☺️