アメブロのヘッダー画像を作ろうとすると、「結局どのサイズで作ればよいのか」、「スマホではどこまで見えるのか」と迷う方が多いのではないでしょうか。
実際、アメブロはデザインタイプによって仕様が異なるため、ひとつのサイズだけを見て進めると、表示が崩れたり、文字が切れたりする可能性があります。
そこで本記事では、2026年時点でよく参照されているサイズ目安をもとに、アメブロヘッダー画像の作り方を整理します。
CSS編集用デザインと簡単カスタマイズ用デザインの違い、Canvaを使った作成手順、画像を軽くきれいに仕上げるコツ、設定方法までまとめて確認できます。
初めて作る方にも、既存ヘッダーを見直したい方にも役立つ内容です。
迷ったら1120×400pxを基準に考えるのが適切です
アメブロヘッダー画像のサイズはデザインによって異なりますが、迷ったら「1120×400px」を基準に考える方法が分かりやすいです。
複数の解説記事やCanva関連情報では、CSS編集用デザインの推奨サイズとして横1120px×縦400pxが広く使われているとされています。
一方で、簡単カスタマイズ用デザインでは横980px、高さは0〜300px程度が目安とされることが多いです。
そのため、現在使っているデザインタイプを先に確認することが大切です。
- CSS編集用デザイン：1120×300〜400pxが中心
- 最新の解説では1120×400〜500px程度まで許容とされる場合がある
- 簡単カスタマイズ用デザイン：980×0〜300pxが目安
まずはご自身のブログがどちらのデザイン方式かを確認し、そのうえで画像サイズを決めると失敗しにくいと考えられます。
サイズが分かれるのはデザイン方式と表示環境が違うためです
CSS編集用デザインは1120px基準で考えられることが多いです
CSS編集用デザインは、ヘッダーまわりを細かく調整しやすい反面、設定方法によって見え方が変わります。
そのため、現在は横1120pxを基準にし、高さは300〜400px、またはやや余裕を持たせて400〜500px程度で作る方法が紹介されることがあります。
特に初めての方には、1120×400pxが扱いやすいサイズです。
大きすぎず、小さすぎず、文字や写真も配置しやすいためです。
簡単カスタマイズ用デザインは980px基準が目安です
簡単カスタマイズ用デザインは、管理画面から比較的手軽に設定できる一方で、テーマごとの差が出やすいです。
一般的には横980px、高さは300px以内が目安とされています。
ただし、テーマによってはヘッダー画像の表示範囲が異なったり、高さ制限が厳しかったりする可能性があります。
そのため、アップロード前にテーマ仕様を確認し、必要であればテスト表示を行うのが安全です。
スマホ表示では中央に情報を集めるのが重要です
PCではきれいに見えても、スマホでは左右が見切れることがあります。
そのため、ブログタイトル、肩書き、キャッチコピーなどの重要な文字は、画像の中央付近に配置するのが基本です。
- 左右に十分な余白を取る
- 文字は小さくしすぎない
- 背景と文字色のコントラストを確保する
- 装飾を増やしすぎない
スマホでの可読性を重視するなら、中央寄せでシンプルにまとめる構成が適していると思われます。
容量と形式も表示速度に関わります
ヘッダー画像は見た目だけでなく、ページの読み込み速度にも影響します。
専門系の解説では、ファイル容量は1MB以内、できれば300KB以下が推奨されることがあります。
- 写真中心：JPEG
- ロゴや文字中心：PNG
- 軽さ重視：WebP
- 解像度の目安：72dpi
特に文字が多いヘッダーは、保存形式によって見え方が変わる場合があります。
画質と軽さのバランスを見ながら、複数形式で書き出して比較すると良いでしょう。
作成から設定までの進め方を具体的に確認します
Canvaで1120×400pxのヘッダーを作る方法
基本手順
現在は、Canvaを使った作成方法が主流と考えられます。
テンプレートが使え、サイズ指定も簡単なため、デザイン経験が少ない方にも向いています。
- Canvaにログインする
- 「デザイン作成」から「カスタムサイズ」を選ぶ
- 幅1120px、高さ400pxを入力する
- 背景画像、配色、文字を配置する
- JPEG、PNG、WebPなどで書き出す
文字は中央にまとめ、上下左右に余白を持たせると、スマホでも崩れにくくなります。
ブログタイトルだけでも視認できる構成にすると、情報が伝わりやすくなります。
PowerPointで作る方法
Office系ツールに慣れている方に向いています
Canva以外では、PowerPointでヘッダーを作る方法もあります。
普段からOfficeを使っている方にとっては、文字配置や図形編集がしやすい場合があります。
- スライドサイズを1120×400px相当に設定する
- 背景に写真や単色を配置する
- テキストボックスでタイトルや肩書きを入れる
- 画像として書き出す
PowerPointはガイド線を使いやすいため、中央寄せや余白調整がしやすい点が利点です。
ただし、書き出し後の容量が大きくなる場合があるため、圧縮は忘れずに行う必要があります。
画像をきれいに見せるデザイン例
読みやすさを優先した構成が有効です
ヘッダーは装飾性よりも、誰のブログで、何が得られるのかが伝わることが重要です。
- 例1：背景写真＋ブログタイトルのみ
- 例2：単色背景＋肩書き＋タイトル＋短い説明文
- 例3：ロゴ＋ブランドカラー＋サービス内容
たとえば個人事業主の方であれば、「肩書き」「ブログ名」「提供分野」の3点に絞るだけでも十分です。
情報を詰め込みすぎないことが、結果として見やすさにつながります。
アメブロへの設定方法
管理画面とデザイン方式を確認します
画像が完成したら、アメブロの管理画面から設定します。
設定方法はテーマやデザイン方式によって異なるため、事前確認が必要です。
一般的には、ヘッダー画像対応のデザインに変更したうえで、画像アップロードまたはCSS編集を行う流れになります。
CSS編集用デザインでは、背景画像として指定してサイズ調整を行うケースがあります。
簡単カスタマイズ用デザインでは、管理画面から画像を設定できる場合があります。
高解像度ディスプレイ向けに、2倍サイズの画像を用意してCSSで縮小表示する方法も紹介されています。
ただし、この方法は設定難易度が上がるため、初心者の方はまず標準サイズで整えるのが現実的です。
失敗を減らすための確認ポイントを押さえておくと安心です
アップロード前のチェック項目
公開前に以下を確認しておくと、差し替えの手間を減らせます。
- サイズは適切か：CSS編集用なら1120×400px前後、簡単カスタマイズ用なら980px基準
- 文字は中央にあるか：スマホで切れにくい配置か確認
- 容量は重すぎないか：1MB以内、できれば300KB以下を目安
- 形式は合っているか：写真はJPEG、文字中心はPNG、軽さ重視ならWebP
- 背景と文字のコントラストは十分か：可読性を優先
この確認だけでも、見栄えと表示速度のバランスが取りやすくなると思われます。
最初の1枚は標準サイズでシンプルに作るのが近道です
アメブロヘッダー画像は、デザイン方式ごとのサイズ差を理解して作ることが大切です。
特に覚えておきたいのは、CSS編集用デザインでは1120×400px前後、簡単カスタマイズ用デザインでは980px幅・高さ300px以内が目安とされる点です。
また、ヘッダーは大きく作るだけでは不十分です。
スマホでの見え方、文字の配置、容量の軽さまで含めて調整することで、読みやすく印象の良いブログに近づきます。
まずは1120×400pxのシンプルな1枚を作成し、実際の表示を見ながら微調整していく方法がおすすめです。
完璧なデザインを最初から目指すより、公開して確認し、少しずつ改善するほうが進めやすいでしょう。
もし今のヘッダーが古いままになっているなら、今回の基準をもとに一度見直してみてください。
ヘッダーが整うだけでも、ブログ全体の印象は大きく変わる可能性があります。
