アメブロのヘッダー画像のサイズは？カスタマイズ方法も解説！

アメブロってヘッダー画像を変えられるんだよね！

僕も自分で作ったヘッダーを使ってるよ。

どのデザインでもOKとはいかないけど、便利よね。

今回は、アメブロのヘッダー画像を変更する方法など紹介するわ！

アメブロには、かわいいテンプレートが豊富にありますが、芸能人のようにオリジナルのヘッダー画像を設定している方も多いですよね。

今回は、オリジナルヘッダー画像を設定する際に気になる画像サイズと、そのカスタマイズ方法についてご紹介します。

【2024年版】アメブロヘッダーの画像サイズについて
1. アメブロヘッダーをカスタマイズして作成する方法
アメブロヘッダーの設定方法
1. ヘッダー画像が変更できない場合の対処法
アメブロのヘッダー画像を変えてみよう！まとめ

【2024年版】アメブロヘッダーの画像サイズについて

アメブロのヘッダー画像の基本サイズは、横幅1120px、縦幅400pxが標準となっています。

このサイズで作成する方が最も多いです。

ただ、縦幅を少し大きめ(500PXなど)にすることで、余白が生まれ、デザインがより洗練された印象を与えることができるので、あくまでも目安としてください。

アメブロヘッダーをカスタマイズして作成する方法

アメブロのヘッダーをカスタマイズする方法は以下の通りです。

IllustratorやPhotoshopなどのプロ向けソフトを使用して作成する
Canvaを使用して作成する

IllustratorやPhotoshopは、プロのグラフィックデザイナーやWebデザイナーが使用する有料ソフトです。

デザイン経験がない方には、Canvaを使用することをおすすめします（無料会員でも作成可能です）

今回はCanvaを使ったアメブロヘッダーの作成手順をご紹介します。

Canvaにログインし、右上の「デザイン作成」をクリック
「カスタムサイズ」を選択し、幅1120px、高さ400～500pxを入力
開いたキャンバスに、使用したい写真やテキストを配置し、自分の好みに合わせてカスタマイズ

テンプレートを活用することで、オリジナルのヘッダー画像を簡単に作成できます。

アメブロヘッダーの設定方法

次に、アメブロにヘッダー画像を設定する手順をご紹介します。

オリジナルのヘッダー画像を設置する場合、既存のデザインテンプレートは使用できません。

以下の手順で「CSS編集用デザイン」に変更する必要があります。

アメブロにログインし、ブログ管理ページからデザインの設定をクリック
「カスタム可能」をクリック
「CSS編集用デザイン」を選択（真ん中のものを選んでください）
「2カラム・右メニュー」を選択し、「適用する」をクリック
「CSSの編集をする」をクリック
作成したヘッダー画像をアップロードし、表示された画像のURLをコピー
CSS編集画面の最下部に以下のコードを追加します。

/* ▼追加コード▼ */
/* ヘッダー画像を設定 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
}
/* ヘッダーの高さを設定 */
.skin-bgHeader, .skin-bgHeader a {
  height: 400px;
}
/* ブログタイトルと説明文を非表示 */
.skin-headerTitle {
display: none;
}

※引用元：ゆりかご様