瞬Makerテンプレートの真ん中よせ
瞬Makerで作ったサイトはデフォルトのままだと
左寄せになっています。やっぱり真ん中よせに
したいなぁ。と言う場合は、以下の方法で
カスタマイズする事が出来ます。
1、CSSを修正
【HTMLsampleフォルダ】を開きます。
デフォルトのテンプレートファイルがあるので、
カスタマイズしたいスタイルシート(CSSファイル)を
メモ帳にドラッグして開きます。
#headerと#containerの間にタグを追加します。
#body {
MARGIN: 0px;
TEXT-ALIGN: center
}
↑これを↓こんな感じで入れます。
}
#header {
background-color: #f66801;
border: 1px solid #CCCCCC;
}
#body {
MARGIN: 0px;
TEXT-ALIGN: center
}
#container {・・・・
2、index.htmlを修正します。
index.htmlをメモ帳などにドラッグして開きます。
<div id="body">
このタグ↑を
</head>
<body>
のすぐ下に入れます。
↓こんな感じ。
</head>
<body>
<div id="body">
<div id="container">
・・・・
※<div>を追加したので、</div>で閉じます。
ページの一番下にある、</body>の前に</div>を1個入れます。
↓こんな感じ。
・・・
</div>
</div>
</div>
<!-- フッター部分終了 -->
</body>
</html>
修正した分のCSSは全て真ん中よせになりますが
index.htmlに上記のタグを追加しないと反映されません。
左寄せになっています。やっぱり真ん中よせに
したいなぁ。と言う場合は、以下の方法で
カスタマイズする事が出来ます。
1、CSSを修正
【HTMLsampleフォルダ】を開きます。
デフォルトのテンプレートファイルがあるので、
カスタマイズしたいスタイルシート(CSSファイル)を
メモ帳にドラッグして開きます。
#headerと#containerの間にタグを追加します。
#body {
MARGIN: 0px;
TEXT-ALIGN: center
}
↑これを↓こんな感じで入れます。
}
#header {
background-color: #f66801;
border: 1px solid #CCCCCC;
}
#body {
MARGIN: 0px;
TEXT-ALIGN: center
}
#container {・・・・
2、index.htmlを修正します。
index.htmlをメモ帳などにドラッグして開きます。
<div id="body">
このタグ↑を
</head>
<body>
のすぐ下に入れます。
↓こんな感じ。
</head>
<body>
<div id="body">
<div id="container">
・・・・
※<div>を追加したので、</div>で閉じます。
ページの一番下にある、</body>の前に</div>を1個入れます。
↓こんな感じ。
・・・
</div>
</div>
</div>
<!-- フッター部分終了 -->
</body>
</html>
修正した分のCSSは全て真ん中よせになりますが
index.htmlに上記のタグを追加しないと反映されません。

