はてなブックマークでは、 サイト内のブックマーク数のランクキング(人気エントリー)を表示するブログパーツが公開されています。 今回はこのブログパーツの設置とカスタマイズ方法を紹介します。
以下のページで、サイトのアドレスを入力して得られるコードを取得します。サイトのアドレスは FC2 ブログであれば、トップページのアドレスを指定します。
[種類] の項目を変更しないとうまく設定されないことがあります。(コードの sort の値が空文字"")
デフォルト([人気エントリー]) のままでよい場合も、一度ラジオボタンを選択しておいた方がいいでしょう。
得られたコードをサイトの html に貼り付けます。
FC2 ブログであれば、 テンプレートやフリーエリアのプラグインに記述します。
このブログでもブログパーツをつけていますが、他のプラグインにあわせてカスタマイズしています。(右カラムのはてな人気記事)
カスタマイズするためにはコード取得時にテーマを [なし] にしておきます。
[なし] では装飾が何もないリストになります。これを CSS で見栄えを調節します。
CSS を指定するためには、リストの html 構成や要素のクラス名を知っておく必要があります。この構成は次のようになっています。
このようなスクリプトで作られるパーツの解析方法もついでにちょっと紹介します。
これにはブラウザーの開発用機能を使います。 各ブラウザーの解析機能の呼び出し方法を表にまとめてみました。
個人的には Firefox の機能が一番使いやすいかなと思います。
設置
ブログパーツをそのまま設置するだけなら、結構簡単です。以下のページで、サイトのアドレスを入力して得られるコードを取得します。サイトのアドレスは 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>
カスタマイズ
このままブログパーツをつけた場合、サイトのテーマからブログパーツがちょっと浮いた感じになってしまいます。 気になるという場合はブログパーツをカスタマイズすることもできます。このブログでもブログパーツをつけていますが、他のプラグインにあわせてカスタマイズしています。(右カラムのはてな人気記事)
カスタマイズするためにはコード取得時にテーマを [なし] にしておきます。
[なし] では装飾が何もないリストになります。これを 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 | メニュー → [ツール] → [デベロッパー ツール] |
0 件のコメント:
コメントを投稿