更新日: 2014年11月7日
HTML & CSS

はてなブックマーク人気記事ブログパーツのデザイン変更

ブログのサイドバーに、はてなブックマーク人気記事のブログパーツを掲載しました。それで、デフォルトのウィジェットのデザインがちょっと当ブログのデザインに合わない感じだったのでカスタマイズしたのですが、意外に苦労しましたのでシェアしておきます。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

以下のように、当ブログのデザインに合わせるようにカスタマイズしました。

hatebu-popular
デザインは得意じゃないのですが、案外上手くいったかなーと思います。

ブログパーツ用のCSSを設定

続いて、CSS（スタイルシート）の設定です。以下のようにカスタマイズを行いました。

/* --- Hatena bookmark widget --- */
/* not display title */
.hatena-bookmark-widget-title {
  display: none;
}

/* not display footer */
.hatena-bookmark-widget-footer {
  display: none;
}

/* entry list */
.hatena-bookmark-widget-body ul {
  list-style-type: none;
}
.hatena-bookmark-widget-body ul li {
  background: url(images/some_icon.png) no-repeat;
  list-style: none;
  padding-left: 11px;
  padding-bottom: 3px;
}

/* hatebu count */
.hatena-bookmark-widget-body span.hatena-bookmark-count strong a {
  color: #FF2E6C;
  padding-left: 5px;
}