2005年12月14日
はてなダイアリーのヘッダに自由に色をつける方法
CSSを変更しました。tech.nitoyon.com とデザインをあわせてみましたよ。
ヘッダの色をあえて変えてみました。利用規約に抵触するかちょっと怖いのですが、はてな利用規約6条 3.6. によると
本サービス内でのページデザイン変更により、当社が標準的に表示しているヘッダ、フッタ、広告及び著作権表示を当社の許諾なく非公開にする行為
らしく、非表示にはしていないのでたぶん大丈夫でしょう。
このページのヘッダ色を変えるCSSはこんな感じです(抜粋)。
body table{
margin-left: 30px;
width: 770px;
border-left:1px solid #ccc;
border-right:1px solid #999;
border-bottom:0px;
}
body table tr td{ /* 背景色を変えるため */
background-color: #d9eced;
}
body table input{ /* 一列目の高さを広くするため */
margin: 21px 0 21px 0;
height: 20px;
}
div table{ /* 2列目の調整 */
font-size:80%;
width: 100%;
border:0;
border-top: 3px solid #42b8d4;
border-bottom:1px dashed #ccc;
margin:0;
}
div table tr td{ /* 2列目の背景色を変える */
background-color: #eee;
border:0;
}
ヘッダ部分は table タグで実現されてます。さらに、2列目の「ようこそ〇〇さん」の部分は入れ子の table。div タグに囲まれてます。要点だけ抜き出したらこんな感じ。上の CSS と見比べると納得していただけるかと。
<table>
<tr>/* 一列目 */</tr>
<tr>/* 高さ 3px のスペース*/</tr>
<tr>
<td width="100%">
<div align="center">
<center>
<table>/* 二列目 */</table>
</center>
</div>
</td>
</tr>
</table>
1つだけ注意。本文内でテーブルを用いている場合は、div.day table のスタイルが body table のスタイルの影響を受けてしまうので、初期化する必要がありますよ。