【動画で解説】アメブロヘッダー画像をカスタマイズ

2022-11-112024-05-28

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

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

動画でもやり方を説明しています✨

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

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

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

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

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

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

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

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

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

設定するCSS

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

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

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

変更する箇所

①コピーした「画像のパス」をurl()の中に入れます。

②作成したヘッダー画像の横幅を設定します（推奨サイズは1120px）

③作成したヘッダー画像の高さを設定します（推奨サイズは300~400px）

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

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

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

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

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

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