アメブロは無料で使えるし、テンプレートのデザインも豊富で可愛くできますよね。
でも人とかぶるので、自分らしさを出したい時はアメブロのヘッダーを設定するのがおすすめです♡
ヘッダーが表示されるのはパソコンからだけど、気分上がりますよー♡
よく聞かれるので、わたしのヘッダーの設定方法をここでシェアしますね。

ヘッダー画像を作る
まずはヘッダーの画像を作ります。
簡単にスマホで。
canvaというアプリを使います。
アプリを開いて右下の+マークを押します。

「+カスタムサイズ」を押して
1120×400pxと入力します
(これがヘッダーのサイズ)。

お好みの画像を読み込んで、ブログのタイトルなどお好みの文字を入れます。
テンプレートからもデザインが選べると思うので、
好きな感じのをたのしみながら探してみてくださいね。
アメブロをCSS編集デザインにする
ここからはパソコンで設定していきます。
アメブロの管理画面を開きます。
【デザインの設定】ページを開きます。

下までスクロールして【カスタム可能】を押します。

その中の【CSS編集用デザイン】の中からお好みのものを選びます。
ちなみにわたしはこの3つの中の真ん中のデザインを使っていました。

ヘッダーをアップする
ちょっとややこしいけど、あとちょっとです!!
先ほどの【デザインの設定】ページ上の方の【CSS編集】というところを押します。

【ファイルを選択】を押して先ほどcanvaで作った画像をアップロードします。

その下のボックスのところに、
よくわからない文字がたくさん並んでいますが、
その文字時列の一番下までスクロールします。

下記のCSSコードをコピペして、貼り付けます。
/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url
(ここに画像URLを貼り付ける);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader
[amb-layout=”headerInner”]>a,
.skin-bgHeader
[data-uranus-layout=”headerInner”]>a {
height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}
このコードの中の
【ここに画像URLを貼り付ける】のところに、
さっきアップした画像のURLを貼り付けます。

すると、こんな感じになります!

これで、完成です!
お疲れ様でした♡
ブログを確認すると、ヘッダーできてるかと思います♡
ちなみに、これ一回ですぐにできる人はあまりいないので、
うまくできなくても落ち込まずに、もう一回やってみてくださいね。
何回やってもできなかったら、ご連絡ください。