瞬Makerカスタマイズ法その4

背景がちょっとさびしいかな。。と思ったら、
背景画像を入れてみちゃいましょう♪

まず、２０００×１００の背景画像を用意します。

サンプルはこちら

サンプルのように真ん中の色が無いものだと
このページのように記事部分には背景なし、
記事の無い部分には背景アリに出来ます＾＾

用意した背景画像はHTMLsampleフォルダと
tempフォルダの中にimgフォルダを作って、
その中にぶち込んでおきましょう。


背景画像を用意したら、CSSを修正します。
修正するのはどのＣＳＳでも構いません。


#body {
MARGIN: 0px;
BACKGROUND: url(img/back3.jpg) #ffffff repeat-y center 50%;
TEXT-ALIGN: center;
}


↑このタグを↓こんな感じで追加します。


#header {

〜〜〜
}


#body {
MARGIN: 0px;
BACKGROUND: url(img/back1.jpg) #ffffff repeat-y center 50%;
TEXT-ALIGN: center;
}



#container {
〜〜〜

で、修正し終えたら、上書き保存。
保存後に、修正したテンプレを選んで、
「この内容でＰＣ上に。。。」をポチっと。

あとはいつも通りポチポチ押すと
こんなページになります♪

背景素材次第でオリジナル性も増しますし、
見栄えもぐっと良くなる場合がありますので
色々試してみてくださいね＾＾


〜追記〜
背景素材のサイズは2000x100としましたが、
素材を作る際はテンプレートの記事部分を
考えて調節してみましょう。