タイトル画像(ヘッダ背景)をリピートさせない | アメブロを自分で素敵にデザインしちゃおう

アメブロを自分で素敵にデザインしちゃおう

アメブロ内においてのcssリファレンス(完全初心者向け)。

こんにちは


今回からcssへの記述が始まります。

cssは難しくありません。

全然難しくありませんからあきらめないでください^^


前回

cssなんかいじらなくてもタイトル画像(ヘッダ背景)は簡単に変えられる

という記事を書きましたが

[スキンのカスタマイズ]でヘッダに画像を挿入した場合

アメブロさんが勝手にcssを書き換えてくれます。

その場合

アメブロのデフォルト(初期設定)横幅より小さい760px以下の画像

横幅760pxになるまで画像がリピートされます。

デザイン的に

『そんな必要ねぇ!』

と思った方には全くうっとおしい限りです。


でも解決方法は簡単です。

[デザインの変更]→[スキンCSSの編集]でcssを開いたら

一番下にある



#header{
background-repeat:repeat-x;

}



repeat-xno-repeatに変えてください。

(ちょっと見づらいですが後ろに ; があります。消さないように注意してね)

これでOKです^^

repeat(くりかえす)x(横軸)をno repeat(くりかえさない)に変えただけです。

簡単でしたね^^


ところで760px以下の画像を

『ヘッダ内の好きな場所に固定したい』

と思っている人がいるかもしれません。

そちらは次回 に。



以下、cssの一番下に上記の記述を見つけられなかった場合。


アメブロさんはcssの記述を時々変更するので

もしかしたら数ヵ月後にこの記事を見ている人は

『あれ?一番下にそんなのありません』

と思っているかもしれません。


ということで

もしccsの記述が変更されていても#header{ }もしくはdiv#header{ }を探してください。

その中にbackground-repeat:repeat-x;はありませんか?

もしなかったら別の場所にある#header{ }を探してください。

ブラウザの[編集]→[このページの検索]で#headerを検索すると早いです。


background-repeat:repeat-x;

は必ず見つかります^^