トップページ > スタイルシート > スタイルシートもダイエット! NO.9

スタイルシートもダイエット! NO.9

2006年03月23日
NO.8の記事でメインページのテンプレートの不要な部分をスッキリさせましたが、
スタイルシートを見てみるとこれまた複雑でわけわからない・・・ヘ(x_x;)ヘ
こんなにわかりにくいスタイルシートでは、修正したい部分が探せないじゃん!
と思うのは私だけでしょうか(^-^;


スタイルシートのメリットを生かすためにも、スッキリとダイエット♪
必要なスタイルは後から自分がわかるように記述して行きましょう(^^


で、とりあえずメインページのテンプレートに必要なスタイルだけをのこしたものは下記のようになります。
どうぞご自由にコピペしてくださいね。
・・・こんなの欲しいひといないかも知れないけど(汗)


注意!
テンプレートを入れ替えたりするときは、
必ずテキストエディタに作業前のコピーをバックアップとして保存してくださいね。


バックアップがあれば怖いもの知らず。どんなカスタマイズだってどんどん試せます。
もし、このサイトを参考にして不利益があっても金銭的な保障はできかねます。
ですが、デザインとかカスタマイズどころか、崩れちゃったよ~など、
この手の質問はお受けできますので遠慮なくどうぞ♪


【スタイルシート】
・サイトの幅を780pxに変更しました
・メインページの「left」と「right」をfloatで並べています。
・リンクのカラー(色とカーソルを乗せた時の色)を変更してます。
・背景色を白に変更しました。
・他はほとんど指定していません。

/*Copyright (C) 2004 gift-select All Rights Reserved. http://movabletype.gift-select.com/ */

body{
margin: 0;
padding: 0;
background-color: #FFFFFF;
text-align: center;
}

a:link {
color: #00309c;
}

a:visited {
color: #00309c;
}

a:hover {
color: #ff9a00;
}

img {
border: 0;
}

#container{
width: 780px;
margin: 0 auto;
padding: 0px;
background-color: #ffffff;
text-align: center;
}

#banner {
position: relative;
width: 780px;
background: #a3b8cc;
}

#banner a {
color: #ffffff;
text-decoration: none;
}

#banner a:hover {
color: #ffffff;
}

#left {
float: left;
width: 600px;
overflow: hidden;
text-align:left;
}

#right {
margin-top:10px;
line-height: 150%;
text-align: left;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}

« デフォルトのメインページの構造 NO.8 | トップページ | バナーを画像に NO.10 »