takahirosuzuki.com

地域おこし協力隊、田舎暮らし、漫画、ボードゲーム、謎解き、自転車世界一周について書いています

wordpress

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

投稿日:2013年6月26日 更新日:

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

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

はてブ人気記事ウィジェットを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;
}

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

336×280

336×280

-wordpress

執筆者:


comment

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

関連記事

wordpressのテーマを自作して、ブログのデザインをオリジナルに変更!

ワードプレスのテーマは、カスタマイズに自由が効いたsuffusionを使っていた。細かいところまで設定できるので便利だったけれど、自分でテーマを制作できるようになったので、ブログのデザインも作りなおす …

WordPress専用で評判のレンタルサーバー「WpX」がおすすめ!3000人のリアルタイムアクセスでも大丈夫!

どーも。wordpress用のサーバーを比較検討する会代表の自然人タカ(@viatortaka)です。 1年ちょい前にサーバーをミニバードからwpXレンタルサーバーに移転した。そのおかげか最近は月10 …

wordpressのテーマをSEOに強いと評判の「stinger」に変更

2012年年末から2013年頭くらいまで、wordpressのテーマを自作していじっていた。 ・wordpressのテーマを作成して、ブログのデザインを変えてみたよ! ・メディアクエリーを使って、テー …

お問い合わせとサイトマップ作成には、wordpressのプラグイン「Contact Form 7」と「PS Auto Sitemap」が超便利!

今更ながら、 お問い合わせとサイトマップがあったらいいな~ という願望が再びむくむくと立ち上がった。ちゃんとしたページっぽくなるしさ。 すごく分かりやすいwordpressの本「WordPressの教 …

おすすめレンタルサーバーのミニバードがキャンペーンしているよ!

当ブログのレンタルサーバーはネットオウル社のミニバードである。先月のアクセス数は46000PVほどで、過去には月10万PVを超えたときもあったが、サーバー落ち等のトラブルは起こっていない。月額263円 …

メールアドレスを記入して購読すれば、更新をメールで受信できます。