webカスタマイズ

【アメブロカスタマイズ】ヘッダー画像を変えてみました。

一応一通り、htmlやHPの知識はあるもので、気まぐれですが、トップのヘッダー画像をオリジナルにしてみました。Newバージョンでの方法です。

 

 

まず、トップのヘッダーに入れたい画像を用意します。

今回はこちらを用意しました。

(即席で作っちゃったので、また変更するつもりですが)

 

 

画像は980x300ピクセルで作成しました。

 

 

まず、マイページの[管理トップ]から、[デザインの変更]を選びます。

 

 

CSSの編集が可能な、デザインを選ぶ必要があります。

「タイル」デザインの中の[CSS編集用デザイン]を選択します。

 

[表示を確認する]を押します。

 

 

 

 

2カラム・メニューの左か右か選択して、適用する。

こちらの画面になるので、歯車マークの横の[CSSの編集]をクリック。

 

 

デザインのCSSの編集画面になりました。

 

 

用意しておいた画像をアップロードします。

 

参照を押すと、画像選択画面のポップアップが出ます。

選択して[アップロード]をクリック

 

 

 

上記ではこの後使います。

 

先に、画像アップロード画面のしたにある、現在使用中のブログデザインCSSのしたの編集画面を見てください。

 

 

 

 

その中に

(2)ヘッダーエリアのスタイル

 

のすぐ下にある

 (2-1) ヘッダー背景

 

を探しましょう。

 

 

 

そこには次のように書いてあると思います。

 

/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}

 

ここをこのように変更します。

 

/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
background-image:url(画像のURL);
  height:300px;
  background-repeat:no-repeat;
  background-position:center top;
}

 

画像のURLに先ほどのにあるURLをコピペします。

 

 

 

 

 

このようになりました。

 

 

確認後、保存を押します。

 

 

これで変更されました。

 

 

お疲れ様でした。

 

 

以上、アメブロ簡単カスタマイズでした♪おしまい。

 

 

 

 

 

 




-webカスタマイズ