はてなダイアリーのカスタマイズ！No.1　シンプルヘッダの構造

はてなダイアリーのカスタマイズにあたり、基本的な構造を知りたい！
テンプレートが何も適応されていない状態のシンプルヘッダの構造を調べてみました
標準で適応されているcssを直接弄ることはできないくさいので、これに上書きしていく形になります、、、Firebugでネチネチするのかなぁ…めんどくさすぎる＞＜

構造

+【div】(シンプルヘッダー全体)[id:simple-header]

	+【a】(はてなトップページへのリンク)
		-【img】(リンク用画像)[id:logo-hatena]

	+【a】(はてなダイアリーへのリンク)
		-【img】(リンク用画像)[id:logo-diary]

	+【form】(検索用フォーム)[class:search-form]
		-【input type:text  】(検索文字入力欄)[class:search-word]
		-【input type:name  】(検索フォームに自身のダイアリーのidを渡す「多分」)
		-【input type:submit】(日記内検索用ボタン)[class:search-button]
		-【input type:submit】(全文検索用ボタン)[class:search-button]

	+【ul】(各種リンク)[class:menu]
		+【li】
			-【a】(最新の日記へのリンク)
		+【li】
			-【a】(記事一覧へのリンク)
		+【li】
			-【a】(日記を書くへのリンク)
		+【li】
			-【a】(管理画面へのリンク)
		+【li】
			-【a】(ログアウトへのリンク「ログインしていない時は、ログイン画面へのリンク」)
		+【li】
			-【a】(ヘルプへのリンク)

詳細は以下から

実際のコード

<div id="simple-header">
  <a href="http://www.hatena.ne.jp/"><img src="http://d.hatena.ne.jp/images/hatena-simple_de.gif" alt="Hatena::" title="Hatena::" id="logo-hatena" width="65" height="17"></a>
  <a href="/"><img src="http://d.hatena.ne.jp/images/diary-simple_de.gif" alt="Diary" title="Diary" id="logo-diary" width="43" height="17"></a>
  <form method="get" action="/search" class="search-form">
  <input type="text" class="search-word" name="word" value="">
  <input name="name" value="hdcustom" type="hidden">
  <input type="submit" name="diary" value="日記" class="search-button">
  <input type="submit" name="submit" value="検索" class="search-button">
  </form>

  <ul class="menu">
    <li><a href="/hdcustom/">最新の日記</a></li>
    <li><a href="/hdcustom/archive">記事一覧</a></li>
    <li><a id="editlink" href="/hdcustom/edit">日記を書く</a></li>
    <li><a href="/hdcustom/admin">管理</a></li>
    <li><a href="https://www.hatena.ne.jp/logout?backurl=http://d.hatena.ne.jp/">ログアウト</a></li>
    <li><a href="http://hatenadiary.g.hatena.ne.jp/">ヘルプ </a></li>
  </ul>
</div>

標準で適応されているスタイルシート

#simple-header {
  position: relative;
  text-align: left;
  padding: 5px 0 10px 0;
  background: #5e7cb4;
}

#simple-header img, #simple-header input {
  vertical-align: middle;
}

#simple-header img {
  margin-top: 2px;
  border:none;
}

#simple-header a img {
  border: none;
}

#simple-header img#logo-hatena {
  margin-left: 10px;
}

#simple-header form.search-form {
  display: inline;
}

#simple-header input, #simple-header select{
  margin: 0 5px 0 0;
  font-size: 12px;
  height: 18px;
  padding: 0;
}

#simple-header input.search-word {
  width: 10em;
  font-size: 12px;
  border: 1px solid #4a5973;
  background: #fff;
  margin-left: 5px;
}

#simple-header input.search-button {
  background: #7697d6;
  border: 1px solid #4a5973;
  width: 38px;
  color: #ffffff;
  font-family: sans-serif;
}

#simple-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 6px;
  right: 8px;
}

#simple-header ul li {
  display: inline;
  font-size: 80%;
  padding-left: 5px;
  font-family: sans-serif;
}

#simple-header ul li a {
  color: #ffffff;
  text-decoration: none;
}

#simple-header ul li a:hover {
  text-decoration: underline;
}