デザイン変更記録：テーマを町屋に

町屋、いいですね。

Hatena_machiya_blueにしました。*1

ついでに、以前から放置していた「記事一覧から検索」をデフォにする作業をしました。

<div class="header">
	<div class="search-box">
		<form method="get" action="/facet/searchdiary" class="hatena-searchform">
			<span class="link2archive"><a href="/facet/archive">記事一覧</a></span>
			<input type="text" name="word" class="hatena-searchform" value="*[*">
			<input type="submit" name=".submit" value="検索" class="hatena-searchform">
			<input type="hidden" name="type" value="list"><!-- 一覧 -->
		</form>
		
	</div>
</div><!-- /.header -->

ついでに、検索窓を町屋に忍ばせてみました。

.hatena-body {
position: relative;
overflow: visible !important;
}
.search-box {
position: absolute;
top: -163px;
right: 0px;
color: white;
}
.search-box a {
color: white;
font-size: small;
vertical-align: text-top;
}
.search-box input {
color: white;
background: transparent;
border-width: 1px;
}
.search-box input[type="text"]:hover {
color: black;
background: white;
}

input:hoverは、IEでは動かないみたいですね。

あと、input:hover {border-width: medium;}をしたかったんだけど、これはFirefoxでも効果なしでした。
# なにか間違えたかも？

いや、本当は:hoverじゃなくて、入力欄を一度クリックした後にマウスをどこかに移動しちゃっても普通の入力欄のように文字黒＆背景白のままでいてくれるようにしたかったんですが、CSSだけでそれをするのはどうしたらいいのか分からず。（未調査）

その他、このテーマだとdiv.mainの幅が狭いのでdiv.footerを作ってみたんですが、IEだとdiv.sidebarと被ってます。orz ←
…上部にあるカテゴリ一覧の背景も、妙な挙動をしていたり。orz ←

スタイル変更は時間がかかるなあ。FireBugがなければもっと時間がかかるかも。FireBugさまさまです。

PS
preにmax-heightを付けてみたら、スクロールバーが出ませんでした。
widthを95%にしてみたらOK。
99%だとスクロールバーが半分以上隠れました。
（Firefox1.5）
ということで、適当に width: 96%; に。
なんだかな…。

*1:他のはウチのディスプレイでは字が見づらかったので。残念。