【アメブロカスタマイズ】ヘッダー画像の張り方 | Webクリエイターネタ

Webクリエイターネタ

いつのまにか、役に立つ情報を発信していこう!に変更したブログ

■アメブロヘッダー部分に画像をいれたい場合の準備

Webクリエイターネタ

1.画像のサイズをメモ
└980px*334px

2.画像をアップロード(アメブロ内)


■CSSの編集

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
☆ここに記述☆
}/* ←ブログヘッダーに背景画像を敷きたいとき */

1.使うセレクタとプロパティ

background:url();


※CSS初心者の方は
画像を横幅980pxでつくる方が無難です。


▼実装

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background:url(http://stat.blogskin.ameba.jp/blogskin_images/20120425/00/d0/8a/j/o09800334musix-design1335280964881.jpg) no-repeat;
height:334px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

※CSSで画像を張る場合、no-repeatというのも必要になります。
そのままですが、画像をリピートさせないようにということです。

repeatにはrepeat-x、repeat-yなどがあります。
小さい画像を敷きつめたい場合などに使います。