アメブロ（アメーバブログ）で集客をするためには、
ヘッダー画像のカスタマイズは必須と言っても良いでしょう！
まだ変更していない人は、ぜひ実施する事をお勧めします。
なぜなら。。。
ページの第一印象は2.6秒で決まるからです。
GoogleやYahoo!JAPANなどの検索エンジンから
ページに訪れたユーザが、そのページが自分にとって
「有益なものか？」
「読み進めた方が良いか？」
を判断する時間です。
たった2.6秒です。
インターネットのユーザは本当にせっかちですね（笑）
その2.6秒の間に
こちら側の伝えたい事をしっかりと伝え、
ユーザに有益である事を伝えないと行けません。
そのため、一番最初に目に入る
ヘッダー画像を魅力的なものにするのは
必須と行っても良いでしょう。
このページでは、
そのアメブロにおける
ヘッダー画像のカスタマイズ・変更方法
を整理させて頂きます。
ヘッダー画像のサイズは？
アメブロにヘッダー画像を設定する際には、
最適なサイズがあります。
それは
幅980pxです。
縦の高さは、300pxが上限ですが、
CSSを調整する事が出来るテンプレートを利用すると
上限なく設置可能です。
その方法は下記に整理させて頂きます。
ヘッダー画像の設置方法は？
設置は簡単です！
横幅が980pxで、高さ300px以下の画像サイズのものであれば、管理画面の簡単な操作で設置できますし、横幅が980pxで、高さ300px以上であっても、ちょっとCSSを調整するだけです。
その方法もしっかり整理してありますので、下記をご覧下さい。
高さが300px以下の場合の設定方法
①
アメブロ管理画面の左側メニューにある「デザインの変更」をクリック
②
ここで、デザインテンプレートを選ぶのですが、表示されるページの下部にある「カスタム可能」をクリックします。この「カスタム可能」に表示されるテンプレートでないと、ヘッダー画像のカスタマイズも出来ません。「カスタム可能」をクリックした後に表示される中からテンプレートを選びます。
③
「CSS編集用デザイン」というものが１つありますが、それ以外のテンプレートを選んだ場合は、③の位置に「カスタマイズ」と表示されるので、そこをクリックします。
そして表示されるページで、下記の赤枠内の部分でヘッダー画像を設定します。
「オリジナル画像を使う」のボタンをクリックして、画像をアップロードすればOKです。
①の部分で「ヘッダーの高さ」を設定します。
②の赤枠内のようにヘッダー画像を設置する事が出来ます。
ここまではヘッダーの高さが300px以下の場合の設定方法です。
高さが300px以上の場合の設定方法
高さが300px以上の場合の設定方法は、下記の手順で行います。
と言っても300px以下の画像でもこの方法は使えます。
①部分で「CSS編集用デザイン」を適用します。
②その後表示される「CSS編集」をクリックします。
その後表示される下記の画面にて、
ヘッダー画像に使いたい画像をアップロードします。
アップロード後に表示される「この画像のパス」は後ほど使うので、コピーしておいてください。
そしてその下に表示されている、下記画像の赤枠部分にてCSSの設定をカスタマイズします。
貼付ける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」の部分を探して貼付けます。
下記の
①のように貼付けて
②保存します。
下記のように画像を表示させる事に成功致しました！
このように簡単にヘッダー画像のカスタマイズが可能です。
アメブロヘッダー画像のカスタマイズに利用できる無料素材プレゼント
「ヘッダー画像作ってみたいけど、その素材が無い」っと言う方のために、１００種類の無料素材を用意致しました！
下記よりダウンロード頂けますので、ぜひご利用下さい。
それでもカッコいい画像が作れない！っと言う方。
集客には必須のカスタマイズですので、ぜひ下記のサービスをご利用下さい。