アメブロに横幅いっぱいのヘッダー画像を設置する方法

他のアメブロ等を見ていると、
ヘッダー画像が横幅いっぱいに表示されているブログありますよね。

あれってどうやるの？という、お話です。

手順

画像を用意してアップロードする

「デザインの変更」=>「CSSの編集」と進み、
自分のパソコン内にある画像をアップロードしましょう。

CSSコードを貼り付ける

「デザインの変更」画面から、以下のCSSを貼り付けます。

.skinFrame {
  padding-top: 0px;
}
.skinHeaderArea {
  background: url(● ● ● ● ● ) top left no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 226px;
}
.skinTitle {
  display: none;
}
.skinDescription {
  display: none;
}
.skinContentsFrame {
  margin-top: 20px;
}

●●●●●の部分に先ほどアップロードした画像のURLを、
heightには画像の高さを指定して下さい。

以上で、横幅いっぱいにヘッダー画像を設置できます。お試し下さい。

「幅100%の場合」「背景画像のみ」「CSSだけで作る」など
他にもヘッダー画像の設置方法は色んなパターンがあるので、
別記事でも色々紹介していきますねー。