アメブロ ヘッダー画像の入れ方(新デザイン)

お仕事ブログとしてアメブロを使う方にとって、アメブロはできれば既存デザインではなく、自分のサービスのイメージに合ったヘッダーにしたいと思いますよね。

お仕事ブログへのカスタマイズの第一歩は、ヘッダーの設置!

アメブロヘッダーの設置は、難しいのかな???

と思うアメブロカスタマイズですが、設置はヘッダーやメニューバーなどはコツを押さえれば意外と簡単です。

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

アメブロカスタマイズ ヘッダー画像の入れ方

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

ヘッダーのサイズ
横1120px×縦は自由です。

ただし、350px以上あった方が見栄えが良いかと思います。

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

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

丸が付いているものが、新デザインのものです。 その隣のリストタイプのものも新CSSなので使えますよ。

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

この画像のパスというところに、画像のURLがアップされますので、あとでコピーして貼り付けます。

CSS編集デザインに記載されているCSSタグの一番最後に下記を入れます

タグはこちら

/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: 【背景色】;
background-image: url(*);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [data-uranus-layout=”headerInner”] {
width: 1120px;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [data-uranus-layout=”headerInner”]>a {
height: ヘッダーの高さを入れるpx;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}

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

設置例

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

カンタンなので、自分でヘッダーが作れる方はぜひお試しください!