瞬Makerカスタマイズその２

瞬Makerで作成するページはデフォルトの
テンプレートが使用されますが、基本的に
バナー画像などを使用しておりません。

バナーを入れることで、さらにオリジナル性が
アップしますので、ちょっとカスタマイズしてみましょう♪

１、バナー画像を用意

サイズはデフォルトテンプレートに収まるよう

670×90

にしましょう。仮にこのページのように
shun001-680-90.jpgという画像を用意したとします。


２、tempフォルダに入れておきます。

tempフォルダ内にimgフォルダを作成し、
画像を放り込んでおきます。


３、ＣＳＳを修正しましょう。

どのＣＳＳでも構いませんが、今回は
右グラデーションバイオレット2.cssを修正してみます。
HTMLsampleフォルダ内にある、ＣＳＳをメモ帳などに
ドラッグして開いてください。

すると、以下のようなタグがあります。


#header {

filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,StartColorStr=#FFFFFF,EndColorStr=#EB50B0);
POSITION: absolute;
TEXT-ALIGN: right;
BORDER-bottom:#DCDCDC 2px solid;
WIDTH: 680px;
HEIGHT: 90px;
}

ここの部分を全て削除し、
以下のようなタグに変更します。


#header {
BACKGROUND: url(img/shun001-680-90.jpg);
MARGIN: 0px;
POSITION: relative;
TEXT-ALIGN: left
BORDER-bottom:#DCDCDC 2px solid;
WIDTH: 680px;
HEIGHT: 90px;
}





これを入れます。
少しテンプレが崩れますので以下を修正します。


#main {
MARGIN: 100px 0px 0px 5px;

↑ここを↓これに修正（MARGINを変えます）


#main {
MARGIN: 10px 0px 0px 5px;


もう１箇所。


#left {
padding-left: 0;
margin-top: 100px;


↑ここを↓これに修正（同じくMARGIN変更）


#left {
padding-left: 0;
margin-top: 10px;


これで、瞬Makerで作成する際、選ぶテンプレを
右グラデーションバイオレット２にあわせて、
記事を作成して、ＰＣ上にＨＴＭＬを出力。

ＰＣ上に出力したサイトを確認、と押すと・・

ＴＯＰバナーがこのようにつきます＾＾

ＦＴＰ送信すると、tempフォルダ内の全てのファイルが
ＵＰされますので、作成したimgフォルダも一緒に
ＦＴＰ送信されます♪

画像をいくつか用意し、imgフォルダに放り込んで、
CSSのBACKGROUND: url（＊＊.jpg）を修正すれば
バリエーションがどんどん増えていきます♪
色々やって見て下さいね＾＾