はてブのブログパーツを自分のブログデザインに合わせる方法

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

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

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

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


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

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

次のページでURLを入れて

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

step2 cssでデザイン変更

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

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

.hatena-bookmark-widget-notheme
┣.hatena-bookmark-widget-title
┣.hatena-bookmark-widget-body
┃┗ul
┃ ┗li
┗.hatena-bookmark-widget-footer

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

以上ですどーん!

この記事に関連する記事

コメントをどうぞ