はてなブックマークの人気記事ブログパーツの設置とカスタマイズ

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

設置

ブログパーツをそのまま設置するだけなら、結構簡単です。
以下のページで、サイトのアドレスを入力して得られるコードを取得します。 サイトのアドレスは FC2 ブログであれば、トップページのアドレスを指定します。 [種類] の項目を変更しないとうまく設定されないことがあります。 (コードの sort の値が空文字"")
デフォルト([人気エントリー]) のままでよい場合も、一度ラジオボタンを選択しておいた方がいいでしょう。


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

<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>

カスタマイズ

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


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

[なし] では装飾が何もないリストになります。 これを 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 の機能が一番使いやすいかなと思います。


関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
44位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
6位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

05月 | 2017年06月 | 07月
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。