アメブロ新CSS編集デザインのヘッダー画像の入れ方

ameblo3

アメブロの新デザインに対応したCSS編集デザインテーマがリリースされました。
こちらのデザインはかなりシンプルなデザインのため、サイドバーなどあれこれデコレーションする感じではありません。
ヘッダーのデザインが勝負!

ということで、早速ヘッダー画像の入れ方をお伝えします。

アメブロ新CSS編集デザインのヘッダー画像の入れ方

その前に、ブログのヘッダーを作ります。

ヘッダー1

ヘッダーのサイズですが、横は1120px、縦は自由に作ることができます。
ヘッダーの部分全体にデザインを設定するのであれば横は2000px、縦は自由で設定します。
(解像度が異常に広いPCの場合は厳しいですが…)

作り終わったら、設置をします。

ameblo

管理画面→デザインの変更から、新デザインに対応したCSS編集用デザインを選択します。

ameblo2

ブログのヘッダーデザインをアップ。

CSS編集デザインのCSSタグの最後に

/* ヘッダーの背景色とヘッダー画像 */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: #fff;
background-image: url(**);
}
/* ヘッダーの横幅 */
.skin-bgHeader [amb-layout="headerInner"] {
width: 1120px;
}
/* ヘッダーの高さ */
.skin-bgHeader [amb-layout="headerInner"]>a {
height: **px;
}
/* ブログタイトルと説明文非表示 */
.skin-headerTitle {
display: none;
}

こちらを入力します。
background-image: url();のところに、ヘッダー画像のURLを入れてください。
ヘッダーの高さはヘッダーの高さに合わせて入力してください。

設置例

ameblo3

こんな感じで設置されました。

ヘッダー部分全体で設定する場合は、こんな感じです。

ameblo4

新CSSでのグローバルメニュー設定はこちらに記事を書きましたので、気になる方はお読みください。