スッキリはてブエントリー

hatebu_uzai.css

/*******************************************************
# これは何か
はてなのエントリーページをすっきりさせるcss

## 動作確認用
- 新ページ http://b.hatena.ne.jp/entry/www.google.co.jp/
- 旧ページ http://b.hatena.ne.jp/entry?mode=more&url=http%3A%2F%2Fwww.google.co.jp%2F
  - 及び旧ページの「コメントのみ表示」チェック状態

## エントリーページ場合分け用セレクタ
- 旧ページ #container.mode-more     
  - 「コメントのみ表示」 .nocomment-hide #container.mode-more 
- 新ページ #container:not(.mode-more)

## 元ネタ
- https://gist.github.com/913019
*******************************************************/

/*** 全体的に詰める 
originaled by mode=more のこれ適用すると一覧性上がる — Gist https://gist.github.com/913019
***/
.bookmark-list  li{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-right: 0px !important;
}

/*** 「コメントのみ表示」のチェックを外したようなスマートさを「コメントのみ表示」で維持 ***/
/*   一行表示 */
div.header {
  display: inline !important;
}
div.header a {
}

/***  左詰め ***/
.nocomment-hide #container.mode-more .bookmark-list > li {
  /* 旧ページコメントのみで左詰め */
  padding-left: 4px !important;
}
#container:not(.mode-more) .bookmark-list > li,
#container.mode-more .bookmark-list > li  {
   /* 旧ページコメントありと新entryページで左詰め */
  padding-left: 24px !important;
}
.bookmark-list img.profile-image {
  /*  アイコン小さく */
  width: 16px !important;
  height: 16px !important;
}
#container:not(.mode-more) .bookmark-list img.profile-image {
  /*  左詰めにするとアイコンが左にはみ出るので戻す */
  margin-left: -20px !important;
}
.nocomment-hide #container.mode-more .bookmark-list img.profile-image {
  margin-left: 0px !important;
  margin-right: 4px !important;
}

/**** TwitterのRT を詰めたい ****/
p.retweet-count {
  /* RT数を詰める */
  margin-left: 0  !important;
  padding-right: 0  !important;
}
ul.retweet-tree, div.retweet-images {
  /* RTコメントツリーを左に詰める */
  padding-left: 0  !important;
  margin-left: 0  !important;
  /* RTコメントツリーがRT数を回りこむようにする */
  clear: none  !important;
  overflow: hidden !important;
  border-top: none !important;
}
ul.retweet-tree li.retweet-node {
  /* RTコメントツリーの中身を左に詰める */
  padding-left: 24px  !important;
  margin-left: 0  !important;
}
ul.retweet-tree + div.retweet-images {
  /* 前にRTのコメントツリーある場合はRTのみ画像群をインデントする */
  /* 逆にいうと、コメントツリーない場合は詰まる */
  padding-left: 56px  !important;
}