crimsonj.net

geeklog.crimsonj.net/article.php/20081110135539820

いや、ずいぶん分かるようになってきた気がする。
custom.sample.cssをcustom.cssに上書きする、これ実は肝ですね。
この作業をした上で、cssを加えていけばデザインが変わってProCSSの本領発揮、となるわけです。
背景色を黒、と文字色を白に変えて、背景画像を指定。

body {
background: #000000;
background-image: url(http://xxxxxxxx.net/layout/ProfessionalCSS/images/xxxx.gif);
background-repeat: repeat;
color: #FFFFFF;
}

link, hover, vlinkの色を変える

a:link {
color:#FF00FF;
}
a:hover {
color:#FFCC66;
}
a:visited {
color:#FFCCFF;
}

headerの背景に画像を指定

/*----- ヘッダ -----*/
div#container div#header {
margin: 0;
padding: 0;
background: transparent;
background-image: url(http://xxxxxx.net/layout/ProfessionalCSS/images/xxxx.gif);
background-repeat: repeat;
}

うんうん、ずいぶん雰囲気が変わってきました。

あとはAugeさんのProCSS解説と逆引き辞典が制作進行中なので、これをよく勉強しよう。
自称、Geeklog筆頭道化師でとても楽しい方です。gltmatrix.com/


それから、
FFで表示問題なかったけどIEで見たら左ブロックの右側と下側、内容が多くて縦長になった記事の右側と下側にスクロールバーが表示されている。気になるので全体の幅を変更。

/*--------------------------------------
[CUSTOM] layout.css
リキッドレイアウトのサンプルです。

幅(全体) : 80%
最小幅(全体) : 800px
最大幅(全体) : 80em

幅(左ブロック) : 20%
幅(中央ブロック): 60%
幅(右ブロック) : 20%
---------------------------------------*/

/*----- コンテナ -----*/
div#container {
width: 80%;
min-width: 800px;
max-width: 80em;
}

これを↓に変更

/*--------------------------------------
[CUSTOM] layout.css
リキッドレイアウトのサンプルです。

幅(全体) : 80%
最小幅(全体) : 800px
最大幅(全体) : 80em

幅(左ブロック) : 20%
幅(中央ブロック): 60%
幅(右ブロック) : 20%
---------------------------------------*/

/*----- コンテナ -----*/
div#container {
width: 90%;
min-width: 900px;
max-width: 90em;
}

スクロールバーは消えました。