ブックマーク数のランクキング(人気エントリー)を表示するブログパーツ

はてなブックマークでは、 サイト内のブックマーク数のランクキング(人気エントリー)を表示するブログパーツが公開されています。 今回はこのブログパーツの設置とカスタマイズ方法を紹介します。

設置

ブログパーツをそのまま設置するだけなら、結構簡単です。
以下のページで、サイトのアドレスを入力して得られるコードを取得します。サイトのアドレスは FC2 ブログであれば、トップページのアドレスを指定します。

• ブログパーツの設定
  

[種類] の項目を変更しないとうまく設定されないことがあります。(コードの sort の値が空文字"")
デフォルト([人気エントリー]) のままでよい場合も、一度ラジオボタンを選択しておいた方がいいでしょう。


得られたコードをサイトの html に貼り付けます。
FC2 ブログであれば、 テンプレートやフリーエリアのプラグインに記述します。

エントリー

• TypeScript のインストールとコンパイル (Windows) | プログラマ...9users
• プログラマーズ雑記帳 Redmine - Wiki マクロの追加方法9users
• プログラマーズ雑記帳 Redmine入門 - バグ管理システムとして...8users
• PlantUML の使い方 | プログラマーズ雑記帳7users
• プログラマーズ雑記帳 Redmine入門7users

Hatena::Bookmark

<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://yohshiy.blog.fc2.com/";
Hatena.BookmarkWidget.title = "エントリー";
Hatena.BookmarkWidget.sort  = "count";
Hatena.BookmarkWidget.width = 0;
Hatena.BookmarkWidget.num   = 5;
Hatena.BookmarkWidget.theme = "default";
Hatena.BookmarkWidget.load();
</script>

カスタマイズ

このままブログパーツをつけた場合、サイトのテーマからブログパーツがちょっと浮いた感じになってしまいます。 気になるという場合はブログパーツをカスタマイズすることもできます。
このブログでもブログパーツをつけていますが、他のプラグインにあわせてカスタマイズしています。(右カラムのはてな人気記事)


カスタマイズするためにはコード取得時にテーマを [なし] にしておきます。


[なし] では装飾が何もないリストになります。これを CSS で見栄えを調節します。
CSS を指定するためには、リストの html 構成や要素のクラス名を知っておく必要があります。この構成は次のようになっています。

<!-- ヘッダー -->
<div class="hatena-bookmark-widget-title">
  <a href="xxxx"> <img src="xxxx"> エントリー</a>
</div>

<!-- リスト -->
<div class="hatena-bookmark-widget-body">
  <ul>
    <li>
      <a href="xxxx" class="hatena-bookmark-entrytitle">
 タイトル
      </a>
      <span class="hatena-bookmark-count">
 <em>
   <a href="xxxx"> ユーザー数 </a>
 </em>
      </span>
    </li>
      : 
  </ul>
</div>

<!-- フッター -->
<div class="hatena-bookmark-widget-footer">
  <a href="xxxx">
    <span> Hatena::Bookmark</span>
  </a>
</div>

例えばユーザー数だけ元のような表示にする場合には CSS で次のように指定します。

.hatena-bookmark-count a {
    color: rgb(255, 102, 102);
    background: none repeat scroll 0% 0% rgb(255, 240, 240);
    font-family: "Arial","Helvetica",sans-serif;
    font-style: normal;
    font-weight: bold;
    text-decoration: underline;
}

html 構成の解析方法

前節の html 構成ですが、単に html のソースコードを見てもJavaScript のコードが書いてあるだけで、構成を知ることはできません。
このようなスクリプトで作られるパーツの解析方法もついでにちょっと紹介します。

これにはブラウザーの開発用機能を使います。 各ブラウザーの解析機能の呼び出し方法を表にまとめてみました。

ブラウザー	呼び出し方法
IE	F12 キー
Firefox	メニュー → [web 開発] → [調査]
Chrome	メニュー → [ツール] → [デベロッパー ツール]

個人的には Firefox の機能が一番使いやすいかなと思います。