はてブ数表示ウィジェットのCSSをコピペでカスタマイズする

この記事は2016年3月25日に更新しました。
情報が古くなっている可能性があるのでご注意ください。

この記事の読了時間は約3分です。

嬉しいことに、「はてブ」がつくようになってきました。

アクセス数も少ない弱小ブログなのに、はてブがつくのはすごいですね。

僕がではなく、はてなユーザーの検索力、察知力が。

100ブックマークつけてもらえるような記事を作れるよう尽力していきます。

今後に備えて、はてブ数を表示するウィジェットをサイドバーに設置しました。

デフォルトだとブログのデザインになじまないので、CSSをカスタマイズする方法を紹介します。CSSがわからなくてもコピペでOK。

目次(クリックでワープ)

1 はてブとは？
2 はてブ数ランキングを表示するウィジェット

はてブとは？

はてブというのは、はてなブックマークの略称のことです。

はてなは日本のオンラインブックマーク会社の最大手。

オンラインブックマークについては過去に記事にしました。

参考Yahooブックマークが2016年2月でサービス終了！オンラインブックマークはオワコン

今話題になっている「日本死ね」ブログもはてなが運営する匿名ブログです。

はてブ数ランキングを表示するウィジェット

はてなからウィジェットのHTMLコードをコピーしてきます。

ウィジェットのコードを発行する

まずはhttp://b.hatena.ne.jp/guide/blogpartsにアクセスし、一番下の「ブログのサイドバーに人気記事を表示」の「このブログパーツの設定へ」をクリック。

ブログURLを入力する。

以下の図のように設定を変更する。

URL：自分のブログURL

タイトル：非表示にするので全部消しても、エントリーのままでもいい

種類：人気エントリー（新着エントリーは、はてブがよくつくブログ専用）

幅：デフォルト

表示するエントリー：弱小ブログは３～５推奨。10にしてもいいが、はてブがついてないと空白が生まれ、悲しい表示になってしまう。

テーマ：なし

作成されたコードを表示したい場所に貼り付けて準備OK

あとはCSSで見栄えを編集するだけ。

ウィジェットのCSSを編集する。

CSSがよくわからなくても大丈夫。

先達の人たちが皆に使えるようにCSS例を記事にしてくれている。

僕が使用したCSSコード

/* --- Hatena bookmark widget --- */
/* not display title */
.hatena-bookmark-widget-title {
  display: none;
}

/* entry list */
.hatena-bookmark-widget-body ul li {
	margin-bottom:4px;
	padding:12px;
	border-bottom:1px solid #ddd;
}
/* hatebu count */
.hatena-bookmark-count a {
	color: #F66;
	font-weight: bold;
	background: #FFF0F0;
}

.hatena-bookmark-count em a,
.hatena-bookmark-count strong a {
	color: #FF0808;
	font-weight: bold;
	background: #FCC;
}
 
/* not display footer */
.hatena-bookmark-widget-footer {
  display: none;
}