アメブロヘッダー画像のカスタマイズ方法

アメブロ(アメーバブログ)で集客をするためには、
ヘッダー画像のカスタマイズは必須と言っても良いでしょう!
 
まだ変更していない人は、ぜひ実施する事をお勧めします。
 
なぜなら。。。
 
ページの第一印象は2.6秒で決まるからです。
 
GoogleやYahoo!JAPANなどの検索エンジンから
ページに訪れたユーザが、そのページが自分にとって
「有益なものか?」
「読み進めた方が良いか?」
を判断する時間です。
 
たった2.6秒です。
インターネットのユーザは本当にせっかちですね(笑)
 
その2.6秒の間に
こちら側の伝えたい事をしっかりと伝え、
ユーザに有益である事を伝えないと行けません。
 
そのため、一番最初に目に入る
ヘッダー画像を魅力的なものにするのは
必須と行っても良いでしょう。
 
このページでは、
そのアメブロにおける
ヘッダー画像のカスタマイズ・変更方法
を整理させて頂きます。

ヘッダー画像のサイズは?

アメブロにヘッダー画像を設定する際には、
最適なサイズがあります。
それは

幅980pxです。

縦の高さは、300pxが上限ですが、
CSSを調整する事が出来るテンプレートを利用すると
上限なく設置可能です。
その方法は下記に整理させて頂きます。

ヘッダー画像の設置方法は?

設置は簡単です!
横幅が980pxで、高さ300px以下の画像サイズのものであれば、管理画面の簡単な操作で設置できますし、横幅が980pxで、高さ300px以上であっても、ちょっとCSSを調整するだけです。

その方法もしっかり整理してありますので、下記をご覧下さい。
 

高さが300px以下の場合の設定方法

 

アメブロ管理画面の左側メニューにある「デザインの変更」をクリック
 

ここで、デザインテンプレートを選ぶのですが、表示されるページの下部にある「カスタム可能」をクリックします。この「カスタム可能」に表示されるテンプレートでないと、ヘッダー画像のカスタマイズも出来ません。「カスタム可能」をクリックした後に表示される中からテンプレートを選びます。


「CSS編集用デザイン」というものが1つありますが、それ以外のテンプレートを選んだ場合は、③の位置に「カスタマイズ」と表示されるので、そこをクリックします。
 
img_header_change01
 


 
そして表示されるページで、下記の赤枠内の部分でヘッダー画像を設定します。
「オリジナル画像を使う」のボタンをクリックして、画像をアップロードすればOKです。
img_header_change02
 


 
①の部分で「ヘッダーの高さ」を設定します。
img_header_change03
②の赤枠内のようにヘッダー画像を設置する事が出来ます。
 


 
ここまではヘッダーの高さが300px以下の場合の設定方法です。
 

高さが300px以上の場合の設定方法

高さが300px以上の場合の設定方法は、下記の手順で行います。
と言っても300px以下の画像でもこの方法は使えます。
 
 
①部分で「CSS編集用デザイン」を適用します。
 
②その後表示される「CSS編集」をクリックします。
img_header_change04
 


 
その後表示される下記の画面にて、
ヘッダー画像に使いたい画像をアップロードします。
img_header_change05
アップロード後に表示される「この画像のパス」は後ほど使うので、コピーしておいてください。
  
そしてその下に表示されている、下記画像の赤枠部分にてCSSの設定をカスタマイズします。
img_header_change07

貼付けるCSSのタグ

下記のタグが貼付け用のタグになります。

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea {
	background-image	: url(アップロードした「この画像のパス」部分のURLをコピペ);
	background-repeat	: no-repeat;
	background-position	: 0px 0px;
	height			: 300px;	/* ←背景画像の高さを設定します */
	width			: 980px;	/* ←背景画像の横幅の設定 */
	text-indent		: -9999px;
	background-color	: #FFFFFF;
	margin			: 0px auto 30px auto;	/* ←画像周りのスペース設定 */
}/* ←ブログヘッダーに背景画像を敷きたいとき */

 
上記のタグを、ページ上ので下記の様に「skinHeaderArea」の部分を探して貼付けます。
img_header_change08
 


下記の
①のように貼付けて
②保存します。
img_header_change09


下記のように画像を表示させる事に成功致しました!
img_header_change10
 
このように簡単にヘッダー画像のカスタマイズが可能です。
 

アメブロヘッダー画像のカスタマイズに利用できる無料素材プレゼント

「ヘッダー画像作ってみたいけど、その素材が無い」っと言う方のために、100種類の無料素材を用意致しました!
下記よりダウンロード頂けますので、ぜひご利用下さい。
img_header_change11

ダウンロードはこちらから

それでもカッコいい画像が作れない!っと言う方。
集客には必須のカスタマイズですので、ぜひ下記のサービスをご利用下さい。

無料PDFダウンロード