はてなダイアリーのヘッダに自由に色をつける方法

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