はてなダイアリーにはてなブックマークウィジェットをつけてみた

はてなダイアリーはてなグループでの利用は可能です。ただし、日記本文への表示は現在のところ不可能となっております。デザイン設定画面からお使いください。

はてなブックマークウィジェットの公開について - はてなブック

はてなダイアリーにもできるようなので早速やってみた。

<div class="hatena-module">
<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url   = "http://d.hatena.ne.jp/teramako/";
Hatena.BookmarkWidget.title = "人気のあった記事";
Hatena.BookmarkWidget.sort  = "hot";
Hatena.BookmarkWidget.width = 0;
Hatena.BookmarkWidget.num   = 10;
Hatena.BookmarkWidget.theme = "notheme";
Hatena.BookmarkWidget.load();
</script>
</div>

テーマに合わせる

今現在使っているHatena2-whiteに合わせてCSSを追加

  • Hatena.BookmarkWidget.themedefaultだと浮いてしまうので、nothemeにすると良い
  • サイドバーに入れる時はhatena-moduleクラスのdiv要素にしておくとCSSの手間が省けそう
ウィジェットのタイトル
  • タイトル部分はCSSが効かないので、hatena-bookmark-widget-titleクラスをテーマに合わせてhatena-moduletitleのものをコピペ
  • アイコンもあると浮くので.hatena-bookmark-widget-title img { display:none; }で非表示に
ブックマーク数
  • hatena-bookmark-countクラスのspan要素になっている
    • エントリのタイトルとくっつくのでmargin,paddingを追加
  • ブックマーク数に応じてem要素だったりstrong要素だったりする
    • 要素に合わせてcolorを定義

ってな感じで以下のCSSを追加してる

.hatena-bookmark-widget-title {
  padding: 3px 0.5em 3px 0.7em;
  font-family: "times new roman", "geogia", serif;
  color: #8c929c;
  font-weight: bold;
  font-size: 100%;  
  background: #ffffff;
  text-align: center;
  border-bottom: 1px solid #d6d7de;
}
.hatena-bookmark-widget-title img { display:none; }
.hatena-bookmark-count { padding:0 0 0 5px; }
.hatena-bookmark-count em a { color:#CCAAAA !important;}
.hatena-bookmark-count strong a { color:#FFAAAA !important;}