アメブロにヘッダー画像を設置・表示するカスタマイズ方法

アメブロの新CSS編集用デザインで、ヘッダー部にヘッダー画像を設置・表示するカスタマイズ方法をご紹介します。

旧CSS編集用デザイン向けはこちら

アメブロの旧CSS編集用デザインで、ヘッダー部にヘッダー画像を設置・表示するカスタマイズ方法について解説します。基本的な設定から画面いっぱいに表示する方法まで詳しく説明しています。

ヘッダー画像を設置すると、ブログの雰囲気を一気に華やかにしたり、伝えたいことを一瞬で読み手に知らせることができるようにするのに役立ちますのでお勧めです。

1 ヘッダー画像を準備する
2 画像をアップロードして画像のURLを取得する
3 CSSにコードを追加する
4 CSSに追加したコードを編集する
5 応用（ヘッダー画像の表示のしかたに応じてコードを追加）
6 トップページだけヘッダー画像を変える方法
7 保存して確認
8 まとめ

ヘッダー画像を準備する

まずは、アメブロに設置するヘッダー画像を準備する必要があります。

ヘッダー画像は、好みや予算に応じて、

プロに依頼して作成してもらう
画像編集ソフトや画像編集サイトを使って自作する
有料・無料で配布されている既成のヘッダー画像を流用する

などの方法で入手できます。

管理人は、こちらの無料のデザイン作成サイトをよく利用します。

日本の会社が日本人向けに作っているので、個人的には海外製よりも使いやすいように思います。

アメブロにアップロードできる画像形式はjpg、png、gifのみですので、ヘッダー画像の保存形式もこれらの何れかにする必要があります。

通常はjpgで良いと思いますが、例えば透過が必要な場合はpng、アニメーションが必要な場合はgifなど、必要に応じて画像形式を決定して下さい。

ヘッダー画像の横幅や高さは自由ですが、新CSS編集用デザインのコンテンツ幅に合わせるなら、横幅は、1120ピクセルとなります。

高さは本当に自由ですが、アメブロはヘッダー画像がすべてのページに表示されるため、あまり大きすぎると読み手にとって邪魔に感じることが多くなりますので注意が必要です。

画像をアップロードして画像のURLを取得する

ヘッダー画像の準備ができたら、アメブロにアップロードして画像のURLを取得します。

カスタマイズに使う画像のアップロード方法と画像のURLの取得方法

アメブロで画像を使ったカスタマイズをする場合に必要な、カスタマイズで使用する画像をアメブロにアップロードする方法と、アップロードした画像をCSSなどから呼び出すために必要な画像のURLを取得する方法について解説します。

画像のURLは後ほど使いますので、メモ帳に貼り付けておくなど、分かるようにしておいて下さい。

CSSにコードを追加する

次は、アメブロのアップロードした画像をヘッダー部に表示するために、CSSを編集します。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

以下のようなコードをCSSの末尾に追加して下さい。

/************************************************
  新CSS：ヘッダー画像を表示する
************************************************/
/* ヘッダーの背景に画像を設定する */
.skin-bgHeader {
  background: no-repeat scroll center;
  background-image: url("画像のURL");
}
/* ヘッダーの高さを設定する */
.skin-bgHeader, .skin-bgHeader a {
  height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
  display: none;
}

これが、基本コードとなります。

CSSに追加したコードを編集する

CSSに基本コードを追加したら、アップロードした画像に合わせて修正します。

まず「画像のURL」と書いてある箇所を、アメブロにアップロードした画像のURLに書き換えます。

また、画像の高さ(仮に400pxと記述してあります)には、ヘッダー画像の高さ（ピクセル数）を設定して下さい。

応用（ヘッダー画像の表示のしかたに応じてコードを追加）

通常は、上記の基本コードでヘッダー画像を表示できると思いますが、希望するヘッダー画像の表示のしかたによっては、コードを追加する必要があります。

画像の幅がコンテンツ幅よりも広い場合

ヘッダー画像がコンテンツ幅（1,120px）よりも広い場合、「基本」のままでは、はみ出した部分がトップページへのリンクになりません。

それを解消するためには、CSSに更に以下のようなコードを追加します。

/* 画像の幅がコンテンツ幅よりも広い場合 */
.skin-bgHeader > div {
  width: 1200px;
}

画像の幅(仮に1200pxと記述してあります)には、ヘッダー画像の幅（ピクセル数）に書き換えてください。

これで、ヘッダー画像全体がトップページへのリンクになります。

ヘッダー画像を画面幅いっぱいに表示する場合

もし、ヘッダー画像を画面幅いっぱいに表示したい場合は、「基本」に以下のようなコードを追加します。

/* ヘッダー画像を常に画面幅いっぱいに表示 */
.skin-bgHeader {
  background-size: cover;
}
.skin-bgHeader > div {
  width: 100%;
}

この方法の場合、ヘッダー画像の横方向は常に画面幅いっぱいまで（小さければ拡大されて）表示されますが、高さ方向は中央部分が切り取られて表示されますので、その前提でヘッダー画像を作成する必要があります。

高さ方向も画像の全体を表示したい場合は、次項をご覧ください。

画面幅いっぱいで画像全体を表示する場合

横方向を画面幅いっぱいに表示しながら、高さ方向も画像全体を表示したい場合は、「基本」に加えて以下のようなコードを追加します。

/* 画面幅いっぱいで高さ方向も画像全体を表示 */
.skin-bgHeader {
  position: relative;
  height: 0;
  padding-top: calc( 400 / 1200 * 100% );
  background-size: cover;
}
.skin-bgHeader > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.skin-bgHeader a {
  height: 100%;
}

縦横比には、ヘッダー画像の縦横比を％（縦の高さ / 横の高さ * 100%）で設定します。

上記コードは、縦400pxが横1200pxという画像の場合に縦横比(％)を計算する設定ですので、400の部分に高さ、1200の部分に横幅のピクセル数(数字のみ)を設定すれば大丈夫です。

画面サイズに合わせて画面全体に大きく表示する場合

もし、ヘッダー画像を画面サイズに合わせて全体に大きく表示（いわゆる「ヒーローヘッダー」的に）したい場合は、「基本」に加えて以下のようなコードを追加します。

/* 画面サイズに合わせて大きく表示 */
.skin-bgHeader {
  position: relative;
  height: calc( 100vh - 49px - 91px ); /* ヘッダー画像を表示する高さ */
  background-size: cover;
}
.skin-bgHeader > div {
  width: 100%;
  height: 100%;
}
.skin-bgHeader a {
  height: 100%;
}

ヘッダー画像を表示する高さは、画面の高さから、アメブロに共通の最上部の情報バー（49px）と、無料ユーザーのアメブロで画面下に表示される広告（91px）を引いたサイズを指定しています。

なので、広告を非表示にしている場合は- 91pxは不要です。

また、ヘッダー下にグローバルナビを表示していて、ナビも同時に表示したい場合は、グローバルナビの高さ分も引くとうまくいくと思います。

なお、この方法で表示したヘッダー画像は、常に全体が表示される訳ではなく、上下左右の画面からはみ出した部分は表示されないことにご注意下さい。

トップページだけヘッダー画像を変える方法

アメブロではあまり一般的ではありませんが、WordPressで制作されたサイトなどを見ていると、トップページのみ大きいヘッダー画像（メインビジュアル）を表示して、他のページは控えめなヘッダーとなっていることがよくあります。

もし、アメブロでこのようにしたい場合は、トップページにメッセージボードを表示すれば、メッセージボードの有無でトップページを識別できます。

これによって、トップページだけ別のヘッダー画像を表示したり、ヘッダー画像の表示サイズを変えたりすることができます。

例えば、新CSS編集用デザインで、トップページ専用のヘッダー画像を画面いっぱいに（ヒーローヘッダー風に）表示したい場合、以下のようなコードを追加します。

/* トップページ専用の設定（メッセージボードがある場合） */
.skin-page:has(.skin-message) {
  /* トップページ用のヘッダー画像 */
  .skin-bgHeader {
    background-image: url("画像のURL");
  }
  /* 画面サイズに合わせて大きく表示 */
  .skin-bgHeader {
    position: relative;
    height: calc( 100vh - 49px - 91px );
    background-size: cover;
  }
  .skin-bgHeader > div {
    width: 100%;
    height: 100%;
  }
  .skin-bgHeader a {
    height: 100%;
  }
}

CSSのネストを使うことで、メッセージボードの有無判定以外は、ここまででご紹介したコードを概ねそのまま使えます。

ただし、同時にCSSのネストがサポートされていない「とても古いブラウザ」では正常に表示されません。

その場合は、以下のように個々のセレクタにメッセージボードがある場合の記述をする必要があります。

/* トップページ専用の設定（メッセージボードがある場合） */
/* トップページ用のヘッダー画像 */
.skin-page:has(.skin-message) .skin-bgHeader {
  background-image: url("画像のURL");
}
/* 画面サイズに合わせて大きく表示 */
.skin-page:has(.skin-message) .skin-bgHeader {
  position: relative;
  height: calc( 100vh - 49px - 91px );
  background-size: cover;
}
.skin-page:has(.skin-message) .skin-bgHeader > div {
  width: 100%;
  height: 100%;
}
.skin-page:has(.skin-message) .skin-bgHeader a {
  height: 100%;
}

保存して確認

一通りCSSの編集ができたら、編集内容を保存して確認して下さい。

うまくヘッダー画像が表示できていれば完了です。

まとめ

以上、新CSS編集用デザインのアメブロのヘッダー部にヘッダー画像を設置・表示するカスタマイズ方法を紹介しました。

まとめると、

画像を準備する
準備した画像をアップロードする
CSSにコードをコピペする
コピペしたコードに画像の情報を反映する
必要に応じてコードを追加・編集する
保存して確認する

という手順になります。

よかったら参考にして下さい。