2013年02月07日 category : Blog tags : ,

ブログのスタイルに合わせた「はてブ」ランキングの設置方法

このエントリーをはてなブックマークに追加

hatena-ranking

”PV増加に一役買う「はてブ」ランキングをサイドバーに設置し、カスタマイズしてみました。”

これまで「よく読まれている記事」と題してPVベースのランキングは表示していましたが、新たに日本最大のオンラインブックマークツールであるはてなブックマークのブログ内での人気エントリーをサイドバーに表示してみました。

はてブが付いているエントリーを表示することでページ内循環が増えるかも知れませんし、管理者自身が思っていなかった記事が上位エントリーしていたりと新たな発見があるかもしれません。では設置方法の紹介です。

01 . まずは公式でベース作り

ブログのサイドバーに人気の記事を表示にアクセスします。

hatena-ranking-01

URLにはあなたのブログ(サイト)のURLを入力します。タイトルは自由に変更できます。表示するランキングの種類を選択し、幅、エントリー数を決め、URL横のプレビューをクリックすると下のプレビューが表示されます。

hatena-ranking-02

あとのステップでタイトルや幅を変更する手順を紹介しますので自分のブログのスタイルに合わせて変更したい人もまずは公式のまま作成すればOKです。

02 . ブログに表示する

hatena-ranking-03

プレビューの下にHTMLコードが表示されるのでこれをコピーしてブログの表示したい箇所に貼り付ければOKです。

hatena-ranking-04

03 . はてブ表示のカスタマイズ

表示は出来ましたがブログパーツそのままで、他の項目とちょっとスタイルが異なっていますので自分のブログに合わせてカスタマイズしていきます。文字のサイズも小さいですしね。このあたりも調整してみます。

まずは横幅を調整してみます。貼りつけたHTMLコードの中にHatena.BookmarkWidget.width = 250;という部分があると思います。これが横幅になりますのでここの数値を変更してやれば横幅が変わります。

次にタイトルとフッターを取り除きます。下の画像の部分です。

hatena-ranking-05

ここからはHTMLコードではなくCSSでの調整になります。それぞれclassが振られているのでCSSで非表示にします。以下をCSSに書き込みます。

.hatena-bookmark-widget-title{display: none;}
.hatena-bookmark-widget-footer{display: none;}

こんな感じになります。

hatena-ranking-06

次にフォントサイズを変更してみます。これもCSSで調整します。数値は調整してください。最後の!importantは他の指定無視してこっちねという意味です。

a.hatena-bookmark-entrytitle, a.entrytitle{ font-size: 14px !important; }

最後に枠自体の調整をしてみます。背景色の変更と枠線の色を変更します。同じくこれもCSSです。背景色を白色、枠線の色を変更しています。

.hatena-bookmark-widget-body ul{
	background-color: #FFFFFF !important;
	border: solid 1px #CCCCCC !important;
}

最後に他のサイドバーと同じようにh属性でタイトルを付加すれば見た感じが揃います。

hatena-ranking-07

今回の変更で使ったCSSをまとめると以下の通りです。

/* hatena-bookmark */
/* ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄*/
a.hatena-bookmark-entrytitle, a.entrytitle{ font-size: 14px !important; }
.hatena-bookmark-widget-title{display: none;}
.hatena-bookmark-widget-footer{display: none;}
.hatena-bookmark-widget-body ul{
	background-color: #FFFFFF !important;
	border: solid 1px #CCCCCC !important;
}

04 . おわりに

はてブ1,000超えとかよく見かけますけどすごいですよね。いつか一度くらい体験してみたいものです。ただ今回の設置でPV数でのよく読まれている記事とは別の項目が表示されているのが新鮮でした。

検索からHITする記事と、はてブを貰える記事とはまた特徴が違うのでしょうね。この辺りもう少し考えてみて目指せ1,000はてブです!はてなブックマーク表示のカスタマイズでした。

HOME >>  Blog > ブログのスタイルに合わせた「はてブ」ランキングの設置方法