SWELLでアイキャッチ画像を設定する方法｜Codexで作ってスマホ表示まで確認

アイキャッチ画像は、記事を開く前に最初に目に入るものです。だからといって、凝った画像を毎回ゼロから作ろうとすると、本文を書き終えた後の作業が重くなります。

ナマズ髭ブログでは、CodexとSWELLを使いながら月3万円を目指しています。前回の記事を公開したときは、Codexで画像を用意し、WordPressへ設定して、PCとスマホの表示、公開後のOGP画像まで順番に確認しました。

前回の記事で使った画像は1280×670px、269,039バイト（約263KB）です。390px幅のスマホ表示でも横にはみ出さず、公開ページのOGPにも同じ画像が設定されていました。

この記事では、わたしが実際に行った流れを、そのまま初心者向けにまとめます。記事全体の確認順は、AIで作ったブログ記事をWordPressで公開する前のチェックリストにもまとめています。

アイキャッチ画像の設定場所はWordPressの投稿サイドバー

最初に整理しておくと、アイキャッチ画像そのものを選ぶ場所はSWELL独自の機能ではなく、WordPressの投稿設定です。

投稿編集画面の右側にある「投稿」サイドバーを開き、「アイキャッチ画像」からメディアライブラリ内の画像を選びます。サイドバーが閉じている場合は、画面右上の設定アイコンを押すと表示できます。

WordPress公式ドキュメントでも、投稿・固定ページの設定サイドバーにアイキャッチ画像の項目があり、画像ブロックのメニューから「アイキャッチ画像に設定」する方法も案内されています。

1. Codexで1280×670pxの画像を作る

わたしは、まず記事タイトルを短い言葉へ分けてから、Codexにアイキャッチ画像を作ってもらっています。

今回なら、画像に入れる言葉は次の4つに絞りました。

本文の見出しをそのまま画像へ詰め込むと、スマホで文字が小さくなります。わたしは「何の記事か」が分かる言葉を大きくし、補足は1行だけにしています。

背景、図解、日本語テキストは、Codexの画像生成で1枚の完成画像として作りました。生成後に文字を追加せず、構図を変えない範囲で1280×670pxへ切り出してJPEGに変換しています。この比率なら、現在のナマズ髭ブログの記事上部で大きく崩れず、SNS共有用の横長画像としても確認しやすいためです。

ただし、SWELL公式がすべての記事へ1280×670pxを必須指定しているわけではありません。SWELL公式のNO IMAGE画像の説明でも、横幅1600pxは目安で、縦幅は自分のサイトで使う他のアイキャッチ画像の比率に合わせることが勧められています。大切なのは、サイト内で比率をそろえることです。

2. WordPressへアップロードしてアイキャッチに設定する

画像ができたら、投稿編集画面の右サイドバーから「アイキャッチ画像」を開きます。

今回の画像なら、altは「SWELLでアイキャッチ画像を設定しPCとスマホで確認するイメージ」とします。画像内の文字を全部繰り返すのではなく、画像が何を表しているかを短く書きます。

ファイル名も、アップロード前に 2026-07-22-swell-featured-image-guide-eyecatch-1280x670.jpg のように内容が分かる英数字へ変更しました。後からメディアライブラリで探すとき、image-1.jpg より見つけやすくなります。

3. SWELL側でアイキャッチ画像を表示する

WordPressで画像を選べても、SWELLの表示設定がオフなら記事上部に出ない場合があります。

SWELL公式では、カスタマイザーの「投稿・固定ページ」→「アイキャッチ画像」から、記事上部への表示・非表示を切り替えられると案内されています。また、サイト全体では表示する設定でも、記事ごとに上書きできます。

画像を設定したのに公開ページへ出ないときは、次の順番で見ます。

わたしは、画像ファイルを何度もアップロードし直す前に、まずこの4か所を確認します。設定の見落としなら、同じ画像を増やさずに直せます。

SWELLのボックスやボタンなど、本文側の見た目も整えたい場合は、SWELLで記事を読みやすくする方法で初心者向けの装飾5つを紹介しています。

4. PCと390px幅のスマホで確認する

投稿サイドバーに画像が見えていても、そこで作業を終わらせません。公開前プレビューを開き、PCとスマホの両方で確認します。

下の画像は、前回公開した記事をPC幅で確認したときの実画面です。タイトルの直後にアイキャッチ画像が表示され、記事本文との幅もそろっています。

スマホは390px相当の幅で確認しました。画像内の「AI記事 公開前チェック」「4段階で確認」という文字が読め、画像や本文による横スクロールはありませんでした。

5. 公開後は記事上部とOGP画像を確認する

公開した後は、管理画面ではなく実際の公開URLを開きます。

わたしが最後に見るのは、次の4点です。

2026年7月21日に公開した記事では、og:image にWordPressへ登録したアイキャッチ画像のURLが出力されていました。記事上部に表示されているだけで安心せず、SNSへ共有するときに使われる画像まで確認しています。

OGPの確認方法が難しい場合は、まず公開ページをPCとスマホで開き、画像が正しく表示されるところまで確認してください。その後、SNSの投稿画面へURLを貼り付け、意図した画像がプレビューされるかを見る方法でも確認できます。投稿ボタンを押す必要はありません。

よくあるつまずき

アイキャッチ画像を設定したのに記事に表示されません

SWELLのカスタマイザーで「投稿・固定ページ」→「アイキャッチ画像」を確認します。記事単位の表示設定で非表示へ上書きしていないかも見てください。

PNGとJPEGはどちらがよいですか？

写真中心ならJPEG、透明部分やくっきりした図形が必要ならPNGが扱いやすいです。この記事用の画像は、公開用をJPEGにして1280×670px、195,872バイト（約191KB）に収めました。画質を落としすぎず、ファイルが大きくなりすぎないところを目指しています。

画像の中に記事タイトルを全部入れたほうがよいですか？

全部入れる必要はありません。スマホで縮小したときに読める量へ絞ります。記事タイトルはページ内にも表示されるため、画像ではテーマが伝わる短い言葉を優先します。

altにはSEOキーワードを入れますか？

キーワードを並べる場所ではありません。画像が何を表しているかを、見えない人にも伝わる短い文章にします。WordPress公式でも、メディアライブラリの代替テキストはアクセシビリティや画像情報の管理に役立つと案内されています。

まとめ

SWELLでアイキャッチ画像を使うときは、画像を選ぶだけで終わらせず、公開後まで順番に確認すると失敗を減らせます。

前回の記事公開では、1280×670pxのJPEGを使い、PCと390px相当のスマホ、公開ページのOGPまで確認しました。毎回同じ順番にすると、「画像を作ったのに設定を忘れた」「PCではよいのにスマホで文字が読めない」という見落としを減らせます。

まずは次の記事で、画像内の言葉を「主見出し」と「短い補足」に絞るところから試してみてください。

SWELLを使い続けて感じた良かった点と注意点は、SWELLを約1年使った感想にまとめています。

参考にした公式情報

• SWELL公式：投稿・固定ページでのアイキャッチ画像の表示方法
• SWELL公式：NO IMAGE画像の設定方法
• WordPress公式：Page/Post Settings sidebar
• WordPress公式：Image block