ブログのアイキャッチ画像を作る方法

KumoEdit 操作ガイド · 更新日：2026-10-16

ブログのアイキャッチは、記事の内容が小さな表示でも伝わることが大切です。ここでは、風景画像に「週末の山歩き」というタイトルを載せ、1200 × 630 px に仕上げます。この寸法は作例用です。使っているブログテーマや投稿先に指定がある場合は、そちらを優先してください。

同じ素材で試す場合は、練習用の風景イラスト（PNG・1200 × 900 px）を保存してください。KumoEdit のガイド用素材で、編集の練習や作例の公開に使えます。以下はパソコン版の操作です。画面が狭い場合は、パソコンでの作業をおすすめします。

1. 横長の出力範囲を作る

エディターで練習画像を開き、「画像」→「キャンバスサイズ（Canvas Size）」へ進みます。幅を 1200、高さを 630 にし、プリセットは「Custom」、「In proportion」はオフのまま確定します。

背景レイヤーを選び、右側の詳細欄で X を 0、Y を -135 にします。高さ 900 px の画像を 630 px の枠の中央に置くため、上下を 135 px ずつ枠の外へ出す設定です。今回の背景では山と空が残りますが、人物写真などでは被写体が欠けないように Y を調整してください。

長い記事タイトルをすべて入れると、文字が小さくなりがちです。画像では短い主題に絞り、詳しい説明は記事本文やページのタイトルへ回すと読みやすくなります。日本語の表示幅は端末やフォントで変わるため、数値を入れた後も目で確認してください。

プレビューで表示倍率を下げ、幅が 300 px 程度になったときにもタイトルが読めるか確認します。山の稜線や顔の上に文字が重なるなら、文字の位置を動かすか、背景の取る範囲を調整します。端ぎりぎりの配置は、ブログの一覧や共有先の切り抜きで欠けることがあります。

今回の作例では背景 1 枚と文字 1 行に絞っています。日付や小さなロゴが必要なら追加できますが、実際の一覧表示でも読めるかを基準にしてください。ロゴの重ね方は画像を重ね合わせるガイドで説明しています。

「書き出し」で PNG、保存対象「すべて（All）」を選んで保存します。今回は線と文字が多いので PNG を作例にしています。写真を使った場合は JPEG や WebP も比較し、見た目と容量で選んでください。

完成例の PNG（1200 × 630 px）を確認できます。自分の画像をブログへ掲載したら、記事ページだけでなく一覧ページとスマートフォン表示もチェックしましょう。テーマ側が別の比率で切り抜く場合は、中央寄りに文字を置くか、テーマに合わせて出力サイズを調整します。

タイトルを再利用する場合は JSON も保存しておきます。画像を小さな寸法へ変更したいときは、完成 PNG を別タブのエディターで開いて縮小すると、文字と背景の配置をまとめて保てます。