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 のスタイルの影響を受けてしまうので、初期化する必要がありますよ。