はてなダイアリーにはてなブックマークウィジェットをつけてみた
はてなダイアリー、はてなグループでの利用は可能です。ただし、日記本文への表示は現在のところ不可能となっております。デザイン設定画面からお使いください。
はてなブックマークウィジェットの公開について - はてなブック
はてなダイアリーにもできるようなので早速やってみた。
<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.theme
がdefault
だと浮いてしまうので、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;}