うちのダイアリーははてなの公式テーマ「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;(赤)にしました。
すると、現在のメニューのように、その場所だけ赤にできるわけです。