はてなブックマークで検索フォームを右上に持ってくる

昨日よりはてなブックマークのデザインを変更できるようになりました。それで、b:id:finalvent を見ていて、おっと思ったので僕もフォームを右上に出るようにしてみました。(b:id:naoya)

やり方は結構簡単です。

div.body {
  position: relative;
  width: auto;
  _width: 100%;
  top: 0;
  left: 0;
}

form.hatena-usersearch{
  position: absolute;
  top: 0;
  right: 0;
}

といった具合。div.body を relative 指定で基準に沿えて、検索フォームを absolute で位置指定します。はてなダイアリーの hatena.css にあるように、div.body には　width をつけてやらないとちょっとずれてしまうみたいなので、それも付け足しておきました。

body を relative 指定で他を absolute で、という手法を使うとブックマークにサイドバーを作ったりもできると思います。

• div.main の width を 70 〜 80% ぐらいに
• フッタに div.sidebar で囲まれた領域を作り、サイドバーのコンテンツを配置
• div.sidebar の width を 20% ぐらいに
• body を relative、sidebar を absolute で位置を調整

という感じでしょうか。この場合、タグ一覧が邪魔になると思うので設定画面からタグ一覧んは非表示にして、改めてtagモジュールでサイドバーに表示してやると良さそうです。