アメブロのヘッダー画像サイズと設定方法｜CSSで表示する手順【動画付き】

この記事では、オリジナルのヘッダー画像をアメブロに設定していく方法を解説しています。

before

after

簡単に設定できますので、ぜひやってみてくださいね。

Step1. ヘッダー画像を用意する#

アメブロの画像サイズは横幅1120px、縦幅300~400pxです。（2022年時点）

大人かわいいブログヘッダーの作り方

Step2. ヘッダー画像をアップロードする#

ヘッダー画像が完成したら、アメブロの管理画面を開きます。

ブログ管理 > デザインの設定 > CSSの編集

ヘッダー画像を選択してアップロードします。

アップロードが完了したところ

あとで使うので「この画像のパス」をコピぺしてください。

Step3. CSSを編集して、ヘッダー画像を表示#

設定するCSS#

下記のコードの中で、①画像のURL、②ヘッダー画像の横幅、③ヘッダー画像の高さは書き換えます。

編集したコードをコピーします。

1
/***** ここから：ヘッダー画像の設定 *****/
2
/* ヘッダー画像 */
3
.skin-bgHeader {
4
  background: no-repeat scroll center;
5
  background-size:100%;
6
  margin: 0 auto;
7
  /* ①画像のパス */
8
  background-image: url( https://stat.blogskin.ameba.jp/blogskin_images/20221031/20/2a/21/j/o22400800emi-web1667214766860.jpg );
9
  /* ②ヘッダー画像の横幅 */
10
  width: 1120px;
11
  /* ③ヘッダー画像の高さ */
12
  height: 400px;
13
}
14
/* ブログタイトルと説明文を非表示 */
15
.skin-headerTitle {
16
  display: none;
17
}
18
/***** ここまで：ヘッダー画像の設定 *****/

ヘッダー画像をクリックして、ホームに戻るには？

このコードでは、ブログタイトルと説明文を非表示にしているため、リンクが機能しません。

1
/* ブログタイトルと説明文を非表示 */
2
.skin-headerTitle {
3
  display: none;
4
}

もし、表示させたい場合は、コード内の上の部分を以下のように書き換えてください。
③ヘッダー画像の高さは、使う画像のサイズにあわせて変更ください。

1
/* ブログタイトルと説明文を非表示 */
2
.skin-headerTitle {
3
  display:block;
4
  padding:0;
5
  text-indent:-9999px;
6
   /* ③ヘッダー画像の高さ */
7
  height:400px;
8
}
9
.skin-blogSubTitle{
10
  display:none;
11
}

全てのケースで検証できていないので、もしかたらうまく動作しない場合もあるかもしれません?

CSSの変更方法#

ブログ管理 > デザインの設定 > CSSの編集

現在使用中のブログデザインCSSの下にある

入力欄にコピーしたコードを差し込みます。

差し込む箇所は（2-2）ヘッダータイトル、説明文の中で、(3)メインタイトルと書かれている箇所の前です。

コードを追加した状態

編集できたら「保存ボタン」をおします！

自由にアメブロのヘッダー画像を変更しよう♪#

ブログを表示させてみましょう。

アメブロのヘッダー画像が表示されない場合#

もし、うまく画像が表示されていなかったら、画像のパスが間違っている確率が高いので、改めて確認してみてください。

コードの中に「全角の空白」など、余計な文字が入ってしまうと表示されないので注意してください。

ヘッダー画像のサイズが合わない場合#

はじがみきれている場合は「ヘッダー画像の横幅」が1120pxに設定します。
そして、横幅が1120pxになるように、比率をあわせて「ヘッダー画像の高さ」を調整してみてください。

また、何度か更新していると、古い状態のまま表示されてしまうこともあります。その場合はキャッシュをクリアを試してみてください。

まとめ#

今回はアメブロのヘッダー画像を変更方法のご紹介でした！

ぜひ、ブログの印象をアップさせてみてくださいね＾＾

他にもアメブロカスタマイズ方法を紹介しています。↓

自分でできる。アメブロのおしゃれなカスタマイズまとめ