【2023年版】アメブロにヘッダー画像を設置する方法

今回はアメブロにヘッダー画像を使う方法と設置したヘッダー画像をクリックしてトップページへ行けるようにリンクを設置していきます。

アメブロのヘッダー画像を変更できるのは「カスタム可能」なデザインだけです。

それ以外のデザインだとヘッダー画像の変更はできないので注意。

アメブロのヘッダーのサイズは？
ヘッダー画像を用意してない方・自分でデザインできない方
ヘッダー画像を設置する手順（CSS編集用デザインの場合）
1. 「アップロードに失敗した可能性があります」と表示されてヘッダー画像がアップロードできない場合
2. ヘッダーに画像を設置する
ヘッダー画像が表示されない場合

アメブロのヘッダーのサイズは？

アメブロの「カスタム可能」デザインの中には2種類のテンプレートがあります。

「CSS編集用デザイン」とそれ以外（簡単カスタマイズ）のデザインでそれぞれヘッダーのサイズが違います。

↓CSS編集用デザイン

■CSS編集用デザイン（ヘッダー以外もカスタム可能なデザイン）
⇒ヘッダーサイズ（最大）は幅が1120pxで高さが400px。

■簡単カスタマイズ：（ヘッダー・タイトル・背景のみ変更可能なデザイン）
⇒ヘッダーサイズ（最大）は幅が980pxで高さが300px。

上記のような違いがあるのでそれぞれのサイズに合わせたヘッダーを用意してください。

ヘッダー画像の高さは高いほどコンテンツまでの距離は遠くなるので、バランスを考えて画像を用意してください。

画像がない場合はフリー素材で探してもいいですし自分で撮影した画像でも大丈夫です。

ヘッダー画像を用意してない方・自分でデザインできない方

ヘッダー画像を用意してない方、デザインがうまくできない方は「ココナラ」で依頼すると専門家の方にヘッダーの作成依頼できます（1,500円くらい～）。

ココナラはいろんな専門家にネットで仕事を依頼できるスキルマーケットです。

依頼する場合はヘッダーにブログタイトルも入れて作ってもらうのがデザインが統一されるのでおすすめです。

それぞれ作成者の評価なども見れますので参考にしてみてください。

⇒ココナラでヘッダーのサンプルを見る

【図解】ココナラの無料登録からサービス購入の流れ

ココナラは、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできる...

ヘッダー画像を設置する手順（CSS編集用デザインの場合）

まずブログの幅のサイズの画像を用意したら画像をアップロードしていきます。

アメブロのマイページから「ブログ管理」⇒「デザイン設定」⇒「CSSの編集」をクリック。

CSS編集のページに「ブログデザインヘッダ・背景用画像の追加」という項目があるのでここで「参照」をクリックしてファイルを選択し「アップロード」をクリック。

アップロードすると「この画像のパス」とかかれたURLが表示されているのでこれをコピーしてメモ帳等に貼り付けておきます。

「アップロードに失敗した可能性があります」と表示されてヘッダー画像がアップロードできない場合

画像のアップロードはgif、jpg、pngのみ、5枚(各1MB以内)までアップロード可能です。

「アップロードに失敗した可能性があります。更新を押して再度確認してください。」

と表示されている場合は、この1MBという制限が原因の可能性があります。

1MB以上の画像は画像を圧縮してくれるサイト「tinypng」などで軽量化してください。

⇒tinypng

軽量化した画像をダウンロードして再度チャレンジしてみてください。

ヘッダーに画像を設置する

画像のパスをコピーしたらヘッダーを追加するコードを書きます。

/* アメブロヘッダー画像設定 */
.skin-bgHeader {
  background: no-repeat scroll center top;
  background-image: url(画像のパスURL);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader a[href*="//ameblo.jp/"] {
  height: 300px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
}
/* ヘッダーの背景色 */
.skin-bgHeader {
  background-color: fff;
}

「画像のパスURL」という文字を消して（）の中に先ほどの画像のパスURLを貼り付けてください。

ここの「height:300px」はヘッダー画像の高さです。お好みで変更して下さい。

完成したコードはCSS編集ページの一番下（最後）に貼り付けます。