アメブロに幅980pxのヘッダー画像を設置する方法

アメブロのヘッダー画像を変えてみましょう。

「CSS編集可能」の初期デザインだと
下のようにちょっと味気ないので・・

ヘッダー画像を用意して
下のようにしてしまおう！という事です。

　

ちょうど記事部分の左端から、
サイドバーの右端までの幅で、
ヘッダー画像が貼られるイメージですね。

手順

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

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

CSSコードを貼り付ける

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

.skinHeaderArea {
  background: url(●●●●●) top left no-repeat;
  height: 226px;
}
.skinTitle {
  display: none;
}
.skinDescription {
  display: none;
}
.skinContentsFrame {
  margin-top: 20px;
}

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

以上で、幅980pxのヘッダー画像を設置できます。お試し下さい。

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