はてなダイアリー画面デザイン調整中

はてな

目標

  • あし＠や Amazon などが入ってきてゴチャついているデザインを整える
  • まったく新たな「自分で作った」テーマでまとめる
  • 遊びの要素をかしこに

作業ログ

Amazon の「おススメ本」ウィジェット

まずは、ブログエントリと同じ形式の「お知らせ」エリアを作る。

 <div class="day">
  <h2>お知らせ</h2>
  <div class="body">
   ※
  </div>
 </div>

で、※に Amazon アソシエイトで作ったウィジェットのスクリプトタグを埋める。目標は、3 カラムのウィジェットを二つ横に並べること。なので、Amazon 側では、375px 幅でウィジェットを作成。
で、普通に※に並べて書いたら縦に並んでしまった。とりあえず、

div.amazon_widget_JP_8001_0 {
  float:left;
}
div.amazon_widget_JP_8001_1 {
  float:left;
}

と、それぞれのウィジェットが入っている div を、クラス名をベタ打ちでしていして float させ、※ではウィジェットの後においた

タグで明示的に

style="clear;left;"

としておいた。

細かい位置や色の調整はまだまだこれから。

あし＠

なんかウィジェットが太いのが気になっていたんだが、img の margin が上下に 12pt とってあった。はてなダイアリー側のスタイルで img に 1em のマージンを与えていて、それが効いていたみたいだ。
ちゅうことで、

#ashiatotop img {
  margin: 0pt;
}

をはてなダイアリー側のスタイルに追加することで本来の太さになった。

遊び

あし＠の偽ロゴを用意したが、IE ではうまく配置されてないや。