はてブウィジェットのスタイルを Epic テーマに合わせて変更しました

以前から気になっていた、はてブウィジェットの見た目を変更しました。

このエントリを書いてる時点のテーマは、公式テーマ内の人気No.1 Epic です。


当初

標準の見た目はコチラ。

浮いてるはてブウィジェット

ざっと問題点を挙げると、

  • タイトルが重複している
  • サイドバーの他のコンテンツと見た目が調和していない

といったところが気になっていました。


ちなみに最新の記事用のコンテンツがコチラ。

Epic Recent Entries

はてブと見た目が全然違います。


変更後

こうなりました。

マッチしたはてブウィジェット

変更点は大きく2つ。

  • ヘッダー・フッターを非表示
  • 背景色・罫線をテーマに合わせた


スタイルシートはコチラ。

<style>
.hatena-bookmark-widget div.hatena-bookmark-widget-title, .hatena-bookmark-widget div.hatena-bookmark-widget-footer {
  display: none;
}

.hatena-bookmark-widget ul {
  border: none;
  background-color: #fff;
}

.hatena-bookmark-widget, .hatena-bookmark-widget ul li {
  font-size: 1.0em;
}
.hatena-bookmark-widget ul li {
  height: 5.1em;
}

.hatena-bookmark-widget ul li a.hatena-bookmark-entrytitle {
  padding: 0.7em 0;
}

.hatena-bookmark-widget a:visited {
  color: #7d9ab7;
}

.hatena-bookmark-widget a:link {
  color: #256fba;
}

</style>


最後に

見た目が整うのは気持ちがいいですね。


ノンデザイナーズ・デザインブック [フルカラー新装増補版]

ノンデザイナーズ・デザインブック [フルカラー新装増補版]