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

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

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

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

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

1 ヘッダー画像を準備する
2 画像をアップロードして画像のURLを取得する
3 CSSにコードを追加する
4 CSSに追加したコードを編集する
5 ヘッダー画像の表示のしかたに応じてコードを追加
6 保存して確認
7 まとめ

ヘッダー画像を準備する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSにコードを追加する

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

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

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

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

/************************************************
  旧CSS：ヘッダー画像を表示する
************************************************/
/* ヘッダー上の余白を無くす */
.skinFrame {
  padding-top: 0;
}
/* ヘッダーの背景に画像を設定する */
.skinHeaderArea {
  background: no-repeat scroll center;
  background-image: url("画像のURL");
}
/* ヘッダーの高さを設定する */
.skinHeaderArea, .skinTitle {
  height: 400px; /* 画像の高さ */
}
/* ヘッダー画像の隅までクリック可能にする */
.skinBlogHeadingGroupArea, .skinTitleArea {
  padding:0;
}
/* ブログタイトルを非表示にする */
.skinTitle {
  display: block;
  text-indent:-9999px;
}
/* 説明文を非表示にする */
.skinDescriptionArea {
  display: none;
}
/* ヘッダー下の余白を調整 */
.skinContentsArea {
  padding-top: 20px;
}

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

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

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

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

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

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

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

ヘッダー画像を表示する：応用（note）

保存して確認

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

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

まとめ

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

まとめると、

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

という手順になります。

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