アメブロのヘッダーの作り方と設定方法

アメブロは無料で使えるし、テンプレートのデザインも豊富で可愛くできますよね。
でも人とかぶるので、自分らしさを出したい時はアメブロのヘッダーを設定するのがおすすめです♡

ヘッダーが表示されるのはパソコンからだけど、気分上がりますよー♡

よく聞かれるので、わたしのヘッダーの設定方法をここでシェアしますね。

ヘッダー画像を作る

まずはヘッダーの画像を作ります。
簡単にスマホで。

canvaというアプリを使います。

アプリを開いて右下の＋マークを押します。

「＋カスタムサイズ」を押して
１１２０×４００pxと入力します
（これがヘッダーのサイズ）。

お好みの画像を読み込んで、ブログのタイトルなどお好みの文字を入れます。

テンプレートからもデザインが選べると思うので、
好きな感じのをたのしみながら探してみてくださいね。

アメブロをCSS編集デザインにする

ここからはパソコンで設定していきます。

アメブロの管理画面を開きます。

【デザインの設定】ページを開きます。

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

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

ヘッダーをアップする

ちょっとややこしいけど、あとちょっとです！！

先ほどの【デザインの設定】ページ上の方の【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を貼り付けます。