アメブロは無料で使えるし、テンプレートのデザインも豊富で可愛くできますよね。
でも人とかぶるので、自分らしさを出したい時はアメブロのヘッダーを設定するのがおすすめです♡
ヘッダーが表示されるのはパソコンからだけど、気分上がりますよー♡
よく聞かれるので、わたしのヘッダーの設定方法をここでシェアしますね。
ヘッダー画像を作る
まずはヘッダーの画像を作ります。
簡単にスマホで。
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を貼り付けます。
すると、こんな感じになります！
これで、完成です！
お疲れ様でした♡
ブログを確認すると、ヘッダーできてるかと思います♡
ちなみに、これ一回ですぐにできる人はあまりいないので、
うまくできなくても落ち込まずに、もう一回やってみてくださいね。
何回やってもできなかったら、ご連絡ください。
