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

※『簡単カスタマイズ』のブログのタイトルと説明文を削除したい場合も同様に以下の手順で作業してください。

こちらは

●横に長い画像を配置したい（つまり画像のサイズを変える）

●画像の左右の色と同色になるようにアメブロのヘッダー箇所の背景色を変更したい

場合にご利用ください。

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

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

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

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

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

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

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

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

一番下までスクロール。

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

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

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

.skin-bgHeader {

background: no-repeat scroll center top;

background-image: url(画像のURL);

background-color:#fff;

}

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

.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は、先ほどアップロードした↓の箇所をコピペしてください。

※ヘッダー画像両端の色を変えたい場合には、

background-color:#fff;

の#fffをご変更ください。

・・・ちなみに#fffとは白、#000は黒です。

16進法であらわすのが一般的ですが、

おおざっぱで良ければ、↓こんな感じで英語表記でも行けますよ。

background-color:green;

background-color:white;

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

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