デフォルトの「はてブのブログパーツ」のデザインでも、
「はてブのことだ！」と分かりやすくていいとは思うのですが、
自分のブログデザインに合わせたい！とか、
外部サイトに飛びそうな感じがするから修正したい！という方に読んでもらえたらと思います。

やることとしては、
cssを追加するだけです。

とはいえ、cssを理解してないとちょっと難しいかもしれません。ぷー。

step1 はてブサイトからコードを取得

はてなブックマークブログパーツ

このページの一番下にある、
「ブログのサイドバーに人気の記事を表示」の
「このブログパーツの設定へ」ボタンをクリック！

次のページでURLを入れて

最後に細かい設定をして、
コードをコピペ。
テーマはなしにするのがポイント！

step2 cssでデザイン変更

さてさて、コピペしたコードを見てみると、
class名が設定されているので、
そこにcssをあてていくことで、
自分のブログデザインにあったものに変更できるのです。

構成としては、ざっくりこんな感じ

.hatena-bookmark-widget-title

デフォルトだと「[B]エントリー」と書いてる部分ですね。
いらなかったらdisplay:none;で消してしまってもいいかと思います。

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

.hatena-bookmark-widget-body

この中にul liが含まれていて、
それぞれのliに記事のタイトルとリンク、はてブ数が表示されます。
なので、1例ですが下記のように書いて修正しましよう。

.hatena-bookmark-widget-body ul li {
	margin-bottom:4px;
	padding:2px;
	border-bottom:1px solid #ddd;
}

はてブ数の部分は
spanタグに.hatena-bookmark-countが付いています。
そしてはてブ数10の記事には.hatena-bookmark-countの中にemタグ、
10以上の記事には、strongタグが付くので、
9以下と10、10以上で見せ方を変えることもできます。

このブログでは下記のように、9以下と10以上で分けています。

.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;
}

.hatena-bookmark-widget-footer

デフォルトだと「Hatena::Bookmark」と書いてある部分ですね。
これもいらなければdisplay:none;で消してしまいましょう。

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

以上ですどーん！