Movable Typeの標準テンプレートを使うと、ページ背景が濃いグレーになっていますよね。この色を変更するだけで、実はかなり見た目の雰囲気が変わってきます。
では、一緒に変えてみましょう。
デザインの変更ですから、『スタイルシート』で変更できます。
インデックステンプレートの中の『スタイルシート』を開いてください。
ページの背景は、bodyクラスで指定を行います。
スタイルシートの中にはbodyクラスが複数回出てきますので、中でもページレイアウトに関する指定をしている部分を探します。真ん中あたりに『/* page layout */』と書いてある行があり、この後に記載のクラスが、ページレイアウトを指定しています。
body { min-width: 720px; color: #333; background: #36414d; }
これが、bodyクラスでレイアウトを指定している部分です。
『background』が背景色を指定する要素ですので、ここの数字を変更すれば、背景色が変わります。
色見本等を参考に、希望の色番号に書き替えましょう。
※色見本の参考 ⇒とほほの色入門・色見本
書き替えたら、保存&再構築(S&R)して、終了です。サイトを見てみると、書き替えた色の背景になっているはず。
ちなみに、色を変えるのではなく、画像を表示することもできます。
当サイトは水色の背景になっていますが、よく見ると、上が薄く下が濃いグラデーションになっています。これは、水色のグラデーションの画像を表示しているためです。
BODY { min-width: 720px; color: #333; background : url(img/bg.gif) repeat; }
繰り返し画像を表示する場合は、上記のように書き替えて、画像(上記例ではbg.gif)を「img」フォルダにアップロードします。
ストライプや水玉、花柄などを表示しても、にぎやかで楽しいサイトになりますよ。ぜひ自分好みに仕上げてみてください。