サイドバーの一部だけを別色にする

うちのダイアリーははてなの公式テーマ「hatena_fabric-green」を加工したものですが、あれって別色バージョンがあります。
で、同じデザインの色違いならば、部分的に流用も可能なので……。「hatena_fabric-red」からCSSを拾い、前から目立たせたかったサイドバーの「おしらせ」に赤系統の色を配色してみました。
作り方。
まず、日記のデザインのフッタ欄に、以下のように記入。

<div class="hatena-module-announcement">
    <div class="hatena-moduletitle-announcement">おしらせ(2007年05月11日更新)</div>
      <div class="hatena-modulebody-announcement">
        <ul class="hatena-recentcomment-announcement">
           <li><a href="http://konzert.cocolog-nifty.com/ongakumura/2007/03/post_81aa.html" target="_self">次回の自由演奏会参加予定は『自由演奏会 in 南足柄』</a></li>
          <li><a href="http://imart.dum.jp/" target="_self">7月4日(水)から7月8日(日)のイマキュレートハート作品展</a>に作品準備中。ジャンルは創作楽器の予定です。</li>
          <li><a href="http://d.hatena.ne.jp/Yuny/20061013/p3" target="_self">トロンボーン用の音階練習楽譜</a>を配布中。練習に役立つかも!?</li>
 <li>……と、多忙な中でも、心と体を守るために、<strong class="red">パソコン1時間→10分アナログワーク</strong>で能率アップを!</li>
      </ul>
      </div>
    </div>

class名に注目してください。カスタマイズできるために新しい名前をつけています。
普段は「hatena-module」などのところを、末尾に「-announcement」とオリジナルで。


次にスタイルシートに次のように記入。

/*サイド告知*/
.hatena-module-announcement{background:#F8EBE8;
  border-top:1px dashed #EAC6BD;
  border-right:1px dashed #EAC6BD;}
.hatena-module-announcement .hatena-moduletitle-announcement{font-size:100%;
font-weight:900;
  padding:0.5em;
  line-height:100%;
  background:#E4AEA1;
  color:red;
  border-bottom:1px dashed #E9F0F5;}
.hatena-module-announcement .hatena-moduletitle-announcement a{color:#FFF;}
.hatena-module-announcement .hatena-moduletitle-announcement a:hover{text-decoration:underline;}
.hatena-module-announcement .hatena-modulebody-announcement{
  padding:1em;}

.hatena-module-announcement .hatena-modulebody-announcement ul{
  margin-bottom:0.5em;
}
.hatena-module-announcement .hatena-modulebody-announcement ul li{
  padding:0.2em;
  list-style:circle;
  margin-left:15px;
}
.hatena-module-announcement .hatena-modulebody-announcement ul.hatena-photo li{
  background:transparent;
  display:inline;
  margin:0;
  padding:0;

}

このソースは「hatena_fabric-red」から拾ってきたものです。class名に先ほどの「-announcement」と付けています。また、「.hatena-module-announcement .hatena-moduletitle-announcement」(見出し)は文字の色をFFF(白)からcolor:red;(赤)にしました。

すると、現在のメニューのように、その場所だけ赤にできるわけです。