背景
はてなブックマークの公式サイドバーウィジェットをブログのサイドバーに仕込む、という要件は少なくないと思います。
勢いが衰えたとはいえ、はてなブックマークでのホッテントリ入りによるPVブーストはまだまだ起こりうるようです。また、ブクマを集めた記事を一覧化しておくことは、「サイトの個性」を閲覧者に知ってもらうのに、有効な方策といえるでしょう。
この公式ウィジェットをいじくり回す機会があったので、各パラメータの値をまとめました。
ウィジェット取得方法
サイドバーウィジェットは下記リンクから取得することができます。
http://b.hatena.ne.jp/guide/blogparts.show?type=widget
デフォルトで取得できるソースは以下の通りです。
<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 = "";
Hatena.BookmarkWidget.title = "エントリー";
Hatena.BookmarkWidget.sort = "hot";
Hatena.BookmarkWidget.width = 0;
Hatena.BookmarkWidget.num = 5;
Hatena.BookmarkWidget.theme = "default";
Hatena.BookmarkWidget.load();
</script>
それでは、次の項で各パラメータの値について解説します。
ウィジェットのパラメータについて
パラメータ名とデータ型、デフォルト値を表にまとめました。詳細については後述します。
param | data type | default | overview |
---|---|---|---|
url | String | 抽出対象となるサイトURL | |
title | String | エントリー | ウィジェットのタイトル |
sort | String | hot | エントリーの抽出・表示順 |
width | Number | 0 | ウィジェットの幅(px) |
num | Number | 5 | 抽出・表示するエントリー数 |
theme | String | default | ウィジェットのテーマ |
Hatena.BookmarkWidget.url
url
にはエントリー抽出対象となるサイトURLを指定します。未指定の場合、はてなブックマーク全体を対象とします。
Hatena.BookmarkWidget.title
title
にはウィジェットのタイトルを指定します。未指定の場合、何も表示されません。
Hatena.BookmarkWidget.sort
sort
には抽出順を指定します。
hot
を指定した場合、最近ブックマークされたエントリーが抽出されます。
count
を指定した場合、サイト全体で最もブックマークされたエントリーが抽出されます。
未指定の場合、hot
を指定した場合と同じ値が返ります。
data | sort target |
---|---|
hot | 新着エントリー |
count | 人気エントリー |
新着エントリー |
Hatena.BookmarkWidget.width
width
にはウィジェットの幅(px)を指定します。
画面上で「デフォルト」を選択した場合、0
が指定されますが、これは250
と同じ結果が返るようです。
Hatena.BookmarkWidget.num
num
には抽出するエントリー数を指定します。
どうでもいいですが、このパラメータだけ略称になっていて気持ちが悪いのは私だけでしょうか。
Hatena.BookmarkWidget.theme
theme
にはウィジェットのテーマを指定します。
default
、hatenadiary
、notheme
という値の指定が可能であり、それ以外の値を指定した場合はdefault
と同じ表示になります。
CSSでカスタマイズする場合は、notheme
を指定するとよいでしょう(出力されるHTMLについては後述)。
data | theme |
---|---|
default | デフォルトテーマ |
hatenadiary | はてなダイアリー向けテーマ |
notheme | テーマなし |
notheme
を指定した際に出力されるHTML
次のようにパラメータを指定した際に出力されるHTML(2015年10月18日9時現在)を転載します。
param | data |
---|---|
url | http://staff.hatenablog.com/ |
title | エントリー |
sort | hot |
width | 0 |
num | 10 |
theme | notheme |
<div id="hatena-bookmark-widget0" class="hatena-bookmark hatena-bookmark-widget-notheme">
<div class="hatena-bookmark-widget-title">
<a href="http://b.hatena.ne.jp/entrylist?url=http://staff.hatenablog.com/&sort=hot">
<img src="http://b.hatena.ne.jp/images/widget/favicon.gif">エントリー
</a>
</div>
<div class="hatena-bookmark-widget-body">
<ul>
<li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/10/13/140000">スマートフォンでも「引用ストック」ボタンを表示するよ...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/10/13/140000">16users</a></strong></span></li>
<li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/10/01/163000">編集画面にクリップボードから画像を「貼り付け」できる...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/10/01/163000">22users</a></strong></span></li>
<li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/10/01/140000">目次記法で、続きを読む記法と併用した際の改善や、アプ...</a><span class="hatena-bookmark-count"><em><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/10/01/140000">10users</a></em></span></li>
<li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/28/143000">はてなブログのガイドライン改定と、SmartNewsでの独自ドメ...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/28/143000">33users</a></strong></span></li>
<li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/20/103500">iOSアプリ「はてなブログ」バージョン3.2をリリース。文字...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/20/103500">26users</a></strong></span></li>
<li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/09/152158">記事中の見出しから目次を自動的に作成する「目次記法」...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/09/152158">207users</a></strong></span></li>
<li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/04/153000">他のブログで引用されている文章を、そのまま自分の記事...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/04/153000">39users</a></strong></span></li>
<li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/03/180000">【修正済み】メールで記事を投稿した際、自身のAmazonアソ...</a><span class="hatena-bookmark-count"><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/03/180000">4users</a></span></li>
<li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/02/154500">スマートフォンで「引用スター」をつけられるようにしま...</a><span class="hatena-bookmark-count"><strong><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/02/154500">104users</a></strong></span></li>
<li><a class="hatena-bookmark-entrytitle" href="http://staff.hatenablog.com/entry/2015/09/01/172700">日常の出来事をきれいに書き残せる公式デザインテーマ「Bl...</a><span class="hatena-bookmark-count"><em><a href="http://b.hatena.ne.jp/entry/http://staff.hatenablog.com/entry/2015/09/01/172700">10users</a></em></span></li>
</ul>
</div>
<div class="hatena-bookmark-widget-footer"><a href="http://b.hatena.ne.jp"><span>Hatena::Bookmark</span></a></div>
</div>
ここでデザイン改変のキモになると思われるのが、.hatena-bookmark-count
です。
ブックマーク数による表示の切り替えを生かすには、以下のようなCSS指定が必要となるでしょう。
.hatena-bookmark-widget-notheme .hatena-bookmark-count {
/* code */
}
.hatena-bookmark-widget-notheme .hatena-bookmark-count em {
/* code */
}
.hatena-bookmark-widget-notheme .hatena-bookmark-count strong {
/* code */
}