新デザインでアメブロのヘッダー画像を設定する方法

2016年の3月に、アメブロの使用が変わって
CSS編集用デザインが変わりました。
（プロフィール画像が丸いタイプです）

今までのタグが使えなくなったり
色々変更点も出てきているみたいなので
自分自身のメモがてら、色々編集のやり方を載せていこうと思います(o^^o)

今回はアメブロのヘッダー画像を設定する方法です。
自身のブログがどんなブログなのかを
一目で来てくれた人に分かるようにするのが
ヘッダー画像です。
この記事では、アメブロのヘッダー画像の設置方法をご紹介します。

ヘッダー画像を用意する

まず、ヘッダー用の画像を用意します。
カスタマイズのベースとなるCSS編集用デザインではブログの横幅は1120pxに設定されています。
サイズはどのサイズでも大丈夫ですが、ブログの横幅サイズに合わせると綺麗なデザインになります(o^^o)

作成方法は
・商用利用OKのサイトから画像を借りてくる
・ペイントソフトなどを利用して自分で作成する
・制作費を支払って誰かに作ってもらう
などの方法があります。
予算やクオリティに応じて制作してください(o^^o)

アメブロにアップロードできる画像の形式は
「jpg」「png」「gif」のみですので、こちらのいずれかの形式で作成するようにしてください。

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

ヘッダー画像の用意ができたら、アメブロにアップロードをしましょう。
ご自身でサーバーを持っていらっしゃるなら、そちらにアップしても大丈夫です。
持っていない方は、ブログデザインのCSSの編集から
ブログデザインヘッダ・背景用画像の追加のところでアップロードします。

アップロードすると、このようにURLが割り当てられますので
こちらをコピーしておきます。

ヘッダー画像をアメブロに設置する

/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
  background: no-repeat scroll center;
  background-color: 【背景色】;
  background-image: url(【ヘッダー画像のURL】);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [amb-layout="headerInner"] {
  width: 【ヘッダーの横幅】;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout="headerInner"]>a {
  height: 【ヘッダーの高さ】;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
  display: none;
}