ヘッダー挿入方法【アメブロの『CSS編集用デザイン』２】

●背景とメイン画像の2枚（炎のみ、真ん中のラーメンの方のみ）を用意し、これらを上手く組み合わせることで画像が横に自然い広がってみえる方法です。

１．『ブログ管理』→『デザインの設定』を選択

２．一番上にある、『適用中のデザイン』で、テンプレート名を確認。

３．特定のテンプレートを選択している場合には、下にスクロールし、『カスタム可能』を選択

４．ここらへんを選んでください。

5．お好みのカラムスタイルを選択し、『適用する』を選択。

６．『CSSの編集をする』をクリック

７．『ファイルを選択』をクリック。今回アップロードする画像をあげる。

中心に置く画像と背景の2枚をそれぞれあげて、×ボタンで閉じてください。

８．さて、とうとうCSS編集に入ります♪

一番下までスクロール。

矢印の箇所から新たにCSSを記載します。

９．以下をコピーしてください。

/* ヘッダー画像を設定する */

.skin-bgHeader {

background: url(上に置く画像のURL), url(背景画像のURL);

background-repeat: no-repeat, repeat-x;

background-position: center;

}

/* ヘッダーの横幅を設定する */

.skin-bgHeader [data-uranus-layout="headerInner"] {

width: 100%;

}

/* ヘッダーの高さを設定する */

.skin-bgHeader [amb-layout="headerInner"]>a,

.skin-bgHeader [data-uranus-layout="headerInner"]>a {

height: 345px;

}

/* ブログタイトルと説明文を非表示にする */

.skin-headerTitle {

display: none;

}

１０．オレンジの矢印の箇所にペーストします。

こんな感じです。

※上に置く画像のURL、背景画像のURLは、先ほどアップロードした↓の箇所をそれぞれコピペしてください。

※ヘッダーの高さは345pxとなっておりますが、作成した画像の高さを入れてください。

(^^♪これで完成です🎵