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

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

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

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

著作情報

この記事を書いた人

sigezo

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする

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

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

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

↓CSS編集用デザイン

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

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

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

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

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

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

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

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

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

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

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

affiliate150.com

2023.03.09

ヘッダー画像を設置する手順（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編集ページの一番下（最後）に貼り付けます。

こんな感じになりました。

ちなみにヘッダーの背景色というのは赤枠で囲んだこの部分です。

以上でアメブロのヘッダー画像設置は完了です。

ヘッダー画像が表示されない場合

ヘッダーの画像を設定しても反映されない場合、考えられる原因は２つです。

• CSSに追加したコードが間違っている
• キャッシュ（以前のデータ）が残っている

まずは再読み込みして確認。

ダメなら違うデバイス（スマホ・PC）や違うブラウザで確認。それでも反映されていなければコードの記述ミスです。

違うデバイスやブラウザで反映されているならキャッシュが原因ですのでキャッシュを削除するか時間がたったら解決します。