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

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

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

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

わたしはこんな感じのシンプルなヘッダーにしていました。
目次

ヘッダー画像を作る

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

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を貼り付けます。

(このURLです)

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

これで、完成です!

お疲れ様でした♡

ブログを確認すると、ヘッダーできてるかと思います♡

ちなみに、これ一回ですぐにできる人はあまりいないので、
うまくできなくても落ち込まずに、もう一回やってみてくださいね。

何回やってもできなかったら、ご連絡ください。

よかったらシェアしてね!
  • URLをコピーしました!
目次