tande lab.

はてブのブログパーツをサイトデザインに馴染ませる

今まで、人気記事の表示には WordPress Popular Posts という
WordPress プラグインを使って表示するようにしていたのですが、
はてブのブログパーツに切り換えてみました。

こんな風に。
https://lh4.googleusercontent.com/-KKKC-m94mmo/T_6YN1N-pPI/AAAAAAABGAY/IlbPh-5C9pU/s800/120712-0004.png

はてなブックマークブログパーツ のページで
"ブログのサイドバーに人気記事を表示" を選んで設定できます。

"このブログパーツの設定へ" ボタンを押して次へ。
http://j.mp/LKM60Y

ブログURLを入力します。
https://lh4.googleusercontent.com/-3uVr2WkAkFQ/T_6b4hz32MI/AAAAAAABGAw/5T3sirkL0zg/s640/120712-0009.png

すると、コードが生成されます。
https://lh5.googleusercontent.com/-YHe3F81o-7I/T_6b5e_9ZFI/AAAAAAABGA4/JP1fX007X7k/s800/120712-0010.png

簡単なカスタマイズもできます。

私の場合は、はてブ風の青いデザインになるのは嫌だったので
テーマを "なし" に設定して、自ブログのCSSが適用されるようにしました。
https://lh4.googleusercontent.com/-n91j5MWeMXI/T_6deif7BBI/AAAAAAABGBU/XDsc-jV5dPM/s800/120712-0012.png

ただし、このまま貼付けるとこんな感じになってしまいます。
https://lh6.googleusercontent.com/-eRjA_R-8FzM/T_6cqPEDfXI/AAAAAAABGBE/WR5XaGcv6tg/s800/120712-0011.png

"30Users" のブックマーク数の部分だけは
赤字になってないと、はてブな感じがしませんね!

てことで、自ブログのCSSに以下を追加。

/* はてなブックマーク ウィジェット関係 */
/* USERS {{{ */
em a:link,
em a:hover,
em a:visited,
strong a:link,
strong a:hover,
strong a:visited {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-style: normal !important;
  font-weight: bold !important;
  text-decoration: underline !important;
}

strong a:link,
strong a:hover,
strong a:visited {
  color: #ff0000 !important;
  background: #FFCCCC !important;
}

em a:link,
em a:hover,
em a:visited {
  color: #FF6666 !important;
  background: #FFF0F0 !important;
}

/* }}} */

2012.9.7 追記
上の書き方だと、他の場所で使ってる a タグとかにも影響しちゃうので
下記のように書きなおして、他で影響がでないようにしました。

/* はてなブックマーク ウィジェット関係 */
/* USERS {{{ */
.hatena-bookmark-count {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-style: normal !important;
  font-weight: bold !important;
  text-decoration: underline !important;
}

.hatena-bookmark-count strong a:link,
.hatena-bookmark-count strong a:hover,
.hatena-bookmark-count strong a:visited {
  color: #ff0000 !important;
  background: #FFCCCC !important;
}

.hatena-bookmark-count em a:link,
.hatena-bookmark-count em a:hover,
.hatena-bookmark-count em a:visited {
  color: #FF6666 !important;
  background: #FFF0F0 !important;
}

/* }}} */

すると、ブックマーク数の部分だけ赤字になって
他部分はサイトのデザインに馴染むようになります。
https://lh4.googleusercontent.com/-KKKC-m94mmo/T_6YN1N-pPI/AAAAAAABGAY/IlbPh-5C9pU/s800/120712-0004.png