はてなブックマークのエントリページを旧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; } }
効果
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の書き方がまずってるだけかもですが…