ヘッダーとサイドバーの色の変更の仕方

現在ヘッダーやサイドバーの色が黒なのですが、ＣＳＳのどの部分を変えることで変更可能ですか？黒はリラクゼーションには不向きなので#660033の色に変更したいのです。 どうか助けてください。
/* その他、拡張があれば記述 */

.skinHeaderFrame {
text-align:center;
}

#navi {
list-style:none;
margin:0 auto;
padding:0;
width:605px;
}


#navi li {
display:inline-block;
padding:0 15px;
*display:inline;
*zoom:1;
}


#navi li a {
padding:5px;
display:block;
}


#navi1 a:hover, #navi2 a:hover, #navi3 a:hover, #navi4 a:hover, #navi5 a:hover {
background:#996666;
color:#FAF3F1;
text-decoration:none;
}



#header {
margin:20px 0 40px 0;
text-align:center;
width:100%;
height:301px;
background:url(http://www.gird.jp/ameblo/p2/images/header_bg_li …
}

.skinHeaderArea2 {
margin:0 auto;
width:980px;
height:301px;
position:relative;
background:url(http://www.gird.jp/ameblo/p2/images/header_bg.jp …
}

.skinBlogHeadingGroupArea {
width:340px;
position:absolute;
top:50px;
left:50px;
}

#gallery {
width:450px;
height:210px;
position:absolute;
top:46px;
right:55px;
background:#000;
}

#gallery img {
position:absolute;
top:0;
left:0;
}

.skinArticle {
background:none;
border:none;
padding:0;
}

.skinArticleHeader {
text-align:center;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
margin:0;
padding:10px 0;
}

.detailOn img {
margin:0;
}

.skinSubA .skinMenuHeader {
color:#faf3f1;
padding:23px 0 0 30px !important;
width:270px;
height:41px !important;
background:url(http://www.gird.jp/ameblo/p2/images/side_header. … no-repeat center top;
}

.skinSubB .skinMenuHeader {
color:#faf3f1;
padding:23px 0 0 25px !important;
width:155px;
height:37px !important;
background:url(http://www.gird.jp/ameblo/p2/images/side_header2 … no-repeat center top;
}

.skinSubA .skinMenu2 {
width:300px !important;
background:url(http://www.gird.jp/ameblo/p2/images/side_footer. … no-repeat center bottom;
padding-bottom:32px !important;
}

.skinSubB .skinMenu2 {
width:180px !important;
background:url(http://www.gird.jp/ameblo/p2/images/side_footer2 … no-repeat center bottom;
padding-bottom:19px !important;
}

.skinSubA .skinMenuBody{
margin:0;
width:260px;
padding:20px 20px 0;
background:url(http://www.gird.jp/ameblo/p2/images/side_body.jp …
}

.skinSubB .skinMenuBody{
margin:0;
width:140px;
padding:20px 20px 0;
background:url(http://www.gird.jp/ameblo/p2/images/side_body2.j …
}

#footer {
position:relative;
width:100%;
height:65px;
background:url(http://www.gird.jp/ameblo/p2/images/footer_bg.jp …
}

#myad {
width:251px;
height:31px;
display:block;
background:url(http://www.gird.jp/ameblo/p2/images/myad_btn.png);
position: absolute;
left:50%;
top:20px;
margin:0 0 0 -125px;
text-indent:-9999px;
}

#myad:hover {
background-position:left bottom;
}

No.1 回答者： Enomory25 回答日時： 2012/04/16 22:55

現物を見ていないのでなんとも言えないのですが

#header {
margin:20px 0 40px 0;
text-align:center;
width:100%;
height:301px;
background:url(http://www.gird.jp/ameblo/p2/images/header_bg_li …
}

この部分を

#header {
margin:20px 0 40px 0;
text-align:center;
width:100%;
height:301px;
background: #660033 url(http://www.gird.jp/ameblo/p2/images/header_bg_li …
}

にすればいけないでしょうか？
そしてサイドのクラスがどれかわかりませんが、まぁ .skinSubA がサイドバーだと仮定して
この .skinSubA に対してCSS側で 「background-color: ##660033; 」と指定してあげればできると思います。

No.2 回答者： ORUKA1951 回答日時： 2012/04/22 16:43

多分、誰にもわからないと思います。

HTMLが、とても酷い--文書構造をまったく示していないためスタイルシートを見ただけじゃ、どれがどの部分の指定なのかさっぱりわかりません。本人でもわからないのですから、他人にはわかる手立てがありません。
　たとえば、
div.header div.nav{
　position:absolute;left:10px;top:100px;width:200px;
　background-color:#000;
}
なんて書かれていたら、「ああ、ヘッダに書かれているナビゲーションを左に200px幅で、おいて、背景色が黒に指定してあるな」と誰にでもわかる。
　スタイルシートのみならず、HTMLもわかり易く、メンテナンスも簡単でしょう。もちろん検索エンジンもこれらのクラス名を理解しますからSEO的にも良い。

　HTMLは文書構造を示すもの--タグだけで足りなければdivにclass名をつけて文書構造を誰にもわかるように記述する。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　.skinSubB .skinMenuBody .skinMenuHeaderなんてするから、自分でもわからなくなります。他人には、まったく理解不能になってしまいます。CSS2.1でしょうから、ちゃんと要素名まで書くほうが良いです。
　div.skinSubB ul li{}というふうに・・・.skinSubBと書けば、*.skinSubBとみなされます。(*は全称セレクタ)
　HTMLもさることながら、CSSも酷すぎます。CSSはその数分の一の文字数で事足ります。しかも、もうすこし、わかり易く書いておかないと・・

　ここからは対策です。
★それぞれのclass名が、HTMLのどの要素に対する指定かを確認してください。
★firefox+firebug( https://addons.mozilla.jp/firefox/details/1843 )
　を使用すると簡単です。継承などもきちんと示してくれるので便利です。

　該当するスタイル指定が見つかったら、firebugでその部分を書き換えてテストする。