アメブロ ヘッダー画像の変更方法

アメブロのヘッダーを変えるだけでも、ブログ自体のデザインがガラッと変化します。

今回はこのアメブロのヘッダー画像の変更方法についてご紹介します。


アメブロのスキンによっては画像ではなく、背景色を指定して表示している場合もありますね。

たとえば、

　ブルー


　ピーチ


　ベーシック

などといった【スタンダード】のシンプルなスキンを使用している方でも、このカスタマイズで変更できます。


と、その前に、準備しておかなければならない重要なものがあります。

それは、ヘッダー用の画像

もちろん自作で作れればいいのですが、
そんな事が出来る人って、たいていアメブロのヘッダーも変更できて、
この記事を読む必要がない人ですからね。

ヘッダー用画像を配布しているサイトがたくさんありますので、
そのサイトからお借りしてくるのが今のところ一番早いですかね。

あとは、当ブログでも配布させていただく予定なのです。
　　（現在は、ブログの更新＆カスタマイズで手一杯でしてそこまで出来ていません）
　それまでは、このアメブロで無料配布しているヘッダー画像をご利用ください。
ブログのヘッダー画像素材を無料配布

では、
あなたのアメブロデザインを
ガラっと変身させる
アメブロヘッダーカスタマイズ

　CSS編集画面でタグを追加する方法 はこちらです。

『追加するタグ』はこちらから。

↓↓↓この下から↓↓↓
/*ヘッダー画像*/
#header {
background-image:url(画像URLを入力してください);
background-repeat:no-repeat;
}
#header{
display: block;
position: relative;
top: 0;
left: 0;
width: 900px; /*ヘッダー用画像の幅*/
height: 350px; /*ヘッダー用画像の高さ*/
}
#header h1, #header h2 {
width: 900px; /*ヘッダー用画像の幅と同じサイズを指定*/
text-align: center; /*ブログタイトルと説明文の位置*/
}
#header h1 {
font-size: 30px; /*ブログタイトルの文字サイズ変更*/
color: #000000; /*ブログタイトルの文字色変更*/
font-weight: bold;
}
#header h2 {
font-size: 15px; /*ブログ説明文の文字サイズ変更*/
color: #000000; /*ブログ説明文の文字色変更*/
font-weight: normal;
}
/*ヘッダー画像・ここまで*/
↑↑↑この上まで↑↑↑

赤文字の部分は、画像のサイズと同じにしてください。
青文字の部分は、あなたの好みに変更してください。

赤文字・青文字の部分の変更方法
文字サイズを変更する
文字色を変更する
文字の太さを指定する

何かご質問がありましたら、お気軽にコメントください。