はてブ人気記事ウィジェットをcssでカスタマイズしてwordpressに設置するコード

久しぶりにブログの右カラムをいじってみた。シンプルに記事リンクと広告のみに絞ってみることに。デザインも統一してすっきりさせるため、はてブの人気記事をカスタマイズした。左から右へ変更。

一目ではてブと分かるデザインも悪くないと思っていたけれど、文字が小さいことが気になっていた。せっかくなので最近の投稿などと同じような表示にする。非常に参考になったのは以下の記事。

参考までに僕のサイトのデザインのcssを貼っておく。

/*ヘッダーとフッターを非表示に*/
.hatena-bookmark-widget-title {
display: none;
}
.hatena-bookmark-widget-footer {
display: none;
}
/*フォント変更*/
.hatena-bookmark-widget * {
font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,sans-serif!important;
}
/*表組みの背景をなくす*/
.hatena-bookmark-widget-body ul {
background: none repeat scroll 0 0 transparent !important;
margin-left:-20px;
}
/*リスト全体：枠を消す、太字解除*/
.hatena-bookmark-widget-body ul {
border: medium none !important;
font-weight: normal !important;
}
/*個別のリスト：枠を消す、リストアイコン*/
.hatena-bookmark-widget-body ul li {
border: medium none !important;
list-style: none !important;
}
/*リンクの設定：色、フォントサイズ、行の幅*/
a.hatena-bookmark-entrytitle, a.entrytitle {
color: #3b5998 !important;
font-size: 14px !important;
line-height: 20px;
}
/*はてブ数リンク：大きくして、ウェイトを普通にして、背景色削除、色を変えて半透明に*/
.hatena-bookmark-widget span.hatena-bookmark-count strong a {
font-size: 13px !important;
font-weight: normal !important;
background: none repeat scroll 0 0 transparent !important;
opacity: 0.8;
}

◆◆◆

横幅はかえられないと書いてあるけれど、メディアクエリーで場合分けして.hatena-bookmark-widget-body ulにwidthを指定すればかえられる。

/*表組みの背景をなくす*/
.hatena-bookmark-widget-body ul {
background: none repeat scroll 0 0 transparent !important;
margin-left:0px;
width;220px !important;
}

さて、効果はあるのだろうか。