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

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

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

はてブ人気記事ウィジェットをCSSでオリジナルのデザインに変えてみませんか。 | Love&pointcard

参考までに僕のサイトのデザインの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,’MS Pゴシック’,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;
}

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







古民家宿泊はじめました!

管理人タカが住んでいる古民家で民泊をはじめました。良かったら遊びに来てください。語りましょう。ボードゲームやりましょう!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

管理人のたかです。1984年4月20日生まれ。不動産会社での開発業、自転車世界一周、地域おこし協力隊を経て、愛知県新城市の古民家で宿泊事業をはじめました。SNSでフォローしていただくと最新記事を読むことができます。よろしくお願いします。