はてなブックマークのエントリページを旧UIみたくするユーザースタイルシート


このエントリーの修正版を
続・はてなブックマークのエントリページを旧UIみたくするユーザースタイルシート - SO NOTE そうのて (;^ω^)
に書いたので、↑をご覧ください。

はてなブックマークのエントリーページを改良しました - はてなブックマーク日記 - 機能変更、お知らせなど
の件。
既にリニューアルされてから一週間が経過してる事もあって、今更感は否めないですが、自分でも旧UIっぽくするユーザースタイルシートを書いてみたのでupしてみます。

ソース

書いてるうちに訳わからなくなってきたので、不要なstyleとか効いてないstyleがあるかもしれません…(;^ω^)
人気のブックマークコメント(#scored-bookmarks)を消せてなかったので追加してます。あと、domainで適用させるのではなく、url-prefixで適用させる様に修正中です。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("b.hatena.ne.jp") {
  #top_keyword,
  #add-bookmark-container,
  #favorite-bookmarks,
  #scored-bookmarks,
  #top-ad-line,
  div.curvebox-header,
  div.curvebox-bottom,
  div[class*="ads"]
  {
    display: none !important;
  }
  div.curvebox-body {
    border-radius: 5px !important;
    border: solid 1px #ccc !important;
    margin-bottom: 20px !important;
  }
  #hatena-bookmark-news-header {
    margin-top: 0 !important;
  }
/*
  #user-navigator, .user-navigator-large {
    height: 20px !important;
    width: 33px !important;
    margin-left: 20px !important;
  }
  #user-navigator-subwindow {
    margin-top: -14px !important;
    margin-left: 20px !important;
  }
*/
  ul.bookmark-list li {
    padding-left: 30px !important;
  }
  div.mode-more ul.bookmark-list li {
    padding-left: 15px !important;
  }
  ul.bookmark-list span.comment {
    display: inline !important;
  }
  ul.bookmark-list img.profile-image {
    height: 16px !important;
    width: 16px !important;
    padding-left: 20px !important;
    margin-top: 3px !important;
  }
  div.mode-more ul.bookmark-list li img.profile-image {
    padding-left: 15px !important;
  }
  div.mode-more ul.bookmark-list li a.username {
    margin-left: 5px !important;
  }
  #user-navigator, #user-navigator-subwindow {
    display: none !important;
  }
}

効果

Before

After


今回のリニューアルでもっとも不評である、ブックマークの最初のエントリーページのアイコンが大きくなったのと、コメントやタグが複数行で表示される様になった点を旧UIライクに表示、その他では、自分のブックマーク追加ボックスとか、お気に入りユーザーボックスとかも消してます。あとはついでに広告とか色々消しました。
右サイドの

については、自分は表示させたいので消してません。
あと、アイコン画像をhoverした時に表示されるボックスで、そのユーザーの各種はてなサービスへリンク出来たりするボックス、プロフィールボックスとでもいうんでしょうか、あれをcssだけで調整しようと頑張ってみたんですが、

  • ブックマークの最初のエントリーページ(ex:http://b.hatena.ne.jp/entry/d.hatena.ne.jp/〜)
  • すべてのブックマークページ(ex:http://b.hatena.ne.jp/entry?mode=more&url=http%3A%2F%2Fd.hatena.ne.jp%2F〜)
  • 自分のブックマークページ(ex:http://b.hatena.ne.jp/so_blue/)

のページごとにそのボックスの表示位置が微妙に異なってくる*1ので、結局、プロフィールボックスは非表示にする事にしました。
プロフィールボックスを表示させたい方は、ソースなかほどのコメントアウトさせてる部分を活かして、代わりに最後の

/*
  #user-navigator, #user-navigator-subwindow {
    display: none !important;
  }
*/

の部分を↑みたくコメントアウトさせればプロフィールボックスは表示されます。ただ、ボックスの表示位置はブックマークの最初のエントリーページに最適化してるので、すべてのブックマークページや自分のブックマークページでは、表示位置がおかしくなっちゃいます(;^ω^)

ブックマークの最初のエントリーページ


このページに最適化してるので、問題無く表示されます。

すべてのブックマークページ



な感じにずれます。

自分のブックマークページ



な感じにずれます。

インストール

中途半端感が否めませんが、よければどうぞ。
legacy_hb | Userstyles.org

っていうか

グリモン版の
新しいはてブが不評と聞いたので、全てのブックマークを見るグリモンスクリプトを作ったよ!(使えるかもしれないものが出来たので追記あり) - 不動産屋のラノベ読み
がすげー軽いので、greasemonkey入れてる方は、このグリモンで充分だと思います。(;^ω^)
あと、自分よりも全然先に書かれてた
はてブの糞すぎるレイアウトをとりあえずどうにかするusercss - いさぢちんメモ
のユーザースタイルシートだと、ブックマークリストが何も表示がされなくなってる様な気が…(;^ω^)

div#new-bookmarksを消すとmode=moreのコメントも表示されなくなるので、そこまで消す必要はないけど。

とある様に、単に自分がちゃんとエントリーを読んでないだけでした。適当な事書いてごめんなさい><

*1:javascriptで位置を制御してるため、cssだけでは駄目でした。もしかすると、自分のstyleの書き方がまずってるだけかもですが…