アメブロヘッダーの設置方法

ameme

ヘッダーだけでも変わるとイメージが変わるアメブロ。
自作ヘッダーや自分で作ったヘッダーをアメブロに載せたい!
でもどうすればいいの?そんな方は、こちらを見て実践してください。

アメブロヘッダーの設置方法

amebloo

PCでアクセス。アメブロ本体へいきます。
ログインをした後、管理画面→「デザインの変更」→「CSS編集用デザイン」を選択します。

ameblo4 ameblo5

これこれ。

CSSタグを入れる

ameme

現在使用中のブログデザインCSSと書いてあるところをスクロールしていくと

*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

 

(4) その他、拡張
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/

/* その他、拡張があれば記述 */

こんな記述があります。その記述の下に

#header h1,.skinTitleArea{ /* ブログタイトルを消す */
display:none;
}
#header h2,.skinDescriptionArea{ /* ブログ説明文を消す */
display:none;
}

/* アメブロヘッダー画像設定用CSS貼り付けコード */
.skinHeaderArea{
height:ヘッダーの高さサイズをいれるpx;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center top;
}

と入力してください。

ちなみにブログタイトルと説明文を消すタグも入れておきます。(表示されるとかっこわるいからね…)

amebloo2

ブログデザインヘッダ・背景用画像の追加

と書かれている場所に、作った画像をアップロードします。(ちなみに5つまでしか入りません)

アップしたヘッダー画像に「この画像のパス」と書かれているところがありますので、そこに載っているURLをコピーします。

アップした画像のURLを入れる

/* アメブロヘッダー画像設定用CSS貼り付けコード */
.skinHeaderArea{
height:ヘッダーの高さサイズをいれるpx;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center top;
}

画像のURLと書いてあるところにさっきコピーしたURLを載せます。

これで保存です。表示されましたか?