続・はてなブックマークのエントリページを旧UIみたくするユーザースタイルシート
昨日の
はてなブックマークのエントリページを旧UIみたくするユーザースタイルシート - SO NOTE そうのて (；^ω^)
の修正エントリー。ユーザースタイルをdomainで適用させるのではなく、url-prefixで適用させる様に修正しました。本当は昨日のエントリーに追記すべきだと思うんですが、追記追記でごちゃごちゃになりそうだったので、別エントリーに。
ソース
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document url-prefix("http://b.hatena.ne.jp/entry/") { #top_keyword, #add-bookmark-container, #favorite-bookmarks, #scored-bookmarks, #top-ad-line, div.curvebox-header, div.curvebox-bottom, div[class*="ads"], div.tweets, span.retweet-count { 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; padding-top: 3px !important; padding-bottom: 4px !important; } ul.bookmark-list li:nth-child(even) { background-color: #efefff !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; } } @-moz-document url-prefix("http://b.hatena.ne.jp/entry?mode=more") { #top_keyword, #add-bookmark-container, #favorite-bookmarks, #scored-bookmarks, #top-ad-line, div.curvebox-header, div.curvebox-bottom, div[class*="ads"], div.tweets, span.retweet-count { display: none !important; } ul.bookmark-list li { padding-top: 6px !important; padding-bottom: 3px !important; } ul.bookmark-list li:nth-child(even) { background-color: #efefff !important; } }
効果
Before
インストール
まだ無駄なstyleが残ってそうですが、よければどうぞ。
legacy_hb | Userstyles.org
thanks to
ブコメでコメント頂いたid:mosshmさん、サンプル画像を使わせて頂いたid:tailtameさん、ありがとうございました！( ^ω^)
はてなブックマークのエントリページを旧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の書き方がまずってるだけかもですが…
発言小町のトピック一覧にはてなブックマーク数を表示する
発言小町のトピック一覧ページに、はてなブックマーク数を表示させる方法。百聞は一見にしかず、こんな感じになります。
一応、発言小町がどんなサイトかを説明しておくと、YOMIURI ONLINEのコンテンツの一つで、ざっくり言うと、女性向け身の上相談掲示板ってとこでしょうか。日々立てられる、様々なトピ*1に対して、回答者の方々が懇切丁寧に回答(時に罵倒)し、相談を解決へ導くというサイトです。
http://komachi.yomiuri.co.jp/
トピック一覧ページにはてなブックマーク数を表示させる方法
早速、はてなブックマーク数を表示させる方法を説明します。ブラウザはFirefoxです。他のブラウザでのやり方は調べてません。(；^ω^)
1.はてなブックマーク拡張のインストール
トピック一覧ページにはてなブックマーク数を表示させるには、はてなブックマーク拡張が必要です。インストールしてない場合は、インストールしましょう。
スマートフォンアプリ・ブラウザ拡張
2.HBUsersCount.user.siteinfo.jsファイルの作成
Windows Vistaの場合、以下ディレクトリに「HBUsersCount.user.siteinfo.js」ファイルを作成します。
C:\Users\ユーザ名\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default\hatenabookmark
3.SITEINFOの記述
2で作成した「HBUsersCount.user.siteinfo.js」ファイルをテキストエディタで開き、以下をコピペして保存します。これで完了です。Firefoxを再起動して、発言小町のトピック一覧ページを表示すると、キャプチャ画像の様にはてなブックマーク数が表示されているはずです。
[ { domain: /^http:\/\/komachi\.yomiuri\.co\.jp\//, paragraph: './/table[@class="topicslist"]//td[@class = "hd"]', link: './a', annotationPosition: 'last', style: '.hBookmark-widget { margin: 0 !important; padding: 0 !important; } .hBookmark-widget-add-button { display: none !important; }' }, ]
これだけだと
id:Cherenkovさんの以下エントリーのパクリ(；^ω^)で終わってしまうので、
人力検索はてな及びはてなブックマーク拡張ユーザ様へブックマーク可視化による新しいユーザ評価のご提案 - Cherenkovの暗中模索にっき
発言小町のはてなブックマーク獲得数トップ50をお届けして締めとさせて頂きます。
トップ50
こういったはてなブックマーク数トップxxとかを調べるのって初めてだったんですが、はてなのテーブル記法に変換するのに、Firebugのconsoleであれこれやったり、その結果をExcelに貼りつけて更にごにょごにょやったりと、結構面倒臭いですね…(；^ω^)
こういった記事をちょこちょこ書いてる人は、それ用のプログラム作って、簡単に出来る様にしたりしてるのかしらん。
参考にしたサイト
人力検索はてな及びはてなブックマーク拡張ユーザ様へブックマーク可視化による新しいユーザ評価のご提案 - Cherenkovの暗中模索にっき
2011-02-12
Web ページ内にはてなブックマークの情報を表示する · hatena/hatena-bookmark-xul Wiki · GitHub
最後に
手前みそではありますが、発言小町の見た目をスッキリさせるユーザースタイルシートもあわせてどうぞ。
komachi_cleaner | Userstyles.org
はてな横断を改良(!?)しました。
先日、Firefox 4 正式版がリリースされました。
これは早速インストールせねばとインストールしたはいいものの、愛用してるgreasemonkeyの一つ、id:kitsさん作成のはてな横断にてエラーが…
エラーメッセージは以下。
Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMHTMLDocument.createElementNS]
エラー箇所は63行目の
var box = d.createElementNS(xulns, 'box');
の部分。createElementNSメソッドでこけてる様なんですが、エラーの原因がわからない…orz
かといって、はてな横断グリモン無しだと、はてなーのストーキングの際に色々不便なので、じゃあもう、自分で作るか!!という訳で作ってみました。いや、作ったは語弊がありますね、kitsさんのを改良*1してみました。kitsさんのをほぼ踏襲していて、多少、見映えをよくしただけって感じです。(；^ω^)
説明
効果の程はkitsさんのエントリにある通りです。
はてなの各サービスのページには、或るユーザの別のサービスでの公開ページに移動できるリンク(所謂「サービス間移動リンク」)というものがあるにはあるのですが大変使いづらいので、各サービスへ直に移動できるリンクを生成するスクリプトを試しに書いてみました。
はてな横断 - 徒書
はてな横断同様、インストールすると画面左上にボタンが追加されます。
ボタンをクリックすると、ボタンの下にメニューがビローンと展開されます。
後は移動したいリンクをクリックするだけです。
インストール
thanks to
id:Cherenkovさん、ありがとうございました。
わからない事がある時、twitterって便利。オレオレgreasemonkeyのエラーも直す事が出来たし、ホント助かりました。
感想
サービスへのリンクがわかり易くなるかなと、リンクメニューの左端に対応する各種サービスアイコンを表示させる様にしたんですが、サービスアイコンファイルのありかがわからなくて色々面倒でした。あれやこれや探してたら、GitHubで公開されてたので、そちらを拝借させて頂きました。
hatena-toolbar-xul/icons.png at master · hatena/hatena-toolbar-xul · GitHub
dataスキームuriへの変換は以下のサイトで。
[JavaScript] dataスキームURI生成（画像データのBase64変換）
見た目は自分なりに小洒落た感じにしてみましたが、透明度やhover時の背景色等は好みに応じて弄ってもらえればと思います。
若干、動作が重い気がしなくもないでの、もう少し高速化出来ればなぁと。
動作確認しきれてないので、ちゃんと動かない事があるかも…その際はコメントするなりしてもらえれば、頑張って対応してみます。
*1:改悪!?(；^ω^)
ブログのテーマ変えた
見ての通りですが、ブログのテーマを変えました。コレ↓
http://d.hatena.ne.jp/designset/1484
全体の幅を少し広げたり、日付んとこ狭めたり、他にもちょこちょこいじった。
キーワードクラウドと、カテゴリーをもう少しなんとかしたいのと、右肩の写真をオリジナルの写真に差し替えようと思う。
hover時にborder部分に三角(▽△)が出るのを画像を使わずに実現する
タイトルがひど過ぎて何の事言ってるのかさっぱりわからないので、画像で説明。リンクにオンマウス(hoverですね)すると、↓みたいな▽が出たりするヤツ。たまにみる。それを画像を使わずに実現する。
ソース
cssを少し変更しました。 floatで横並びにしてたのを、inline-block要素にして、横並びにする様にしました。
こんなhtmlに
<ul id="menulist"> <li><a href="#" title="リンク1">リンク1</a> <li><a href="#" title="リンク2">リンク2</a> <li><a href="#" title="リンク3">リンク3</a> </ul>
こんなcssで
#menulist { list-style-type: none; } #menulist li { display: inline-block; text-align: center; position: relative; line-height: 50px; width: 100px; height: 50px; border: solid 1px #ddd; margin-left: -1px; } #menulist li a { display: inline-block; width: 100px; height: 50px; text-decoration: none; } #menulist li a:hover:before { border-top: solid 10px #ddd; border-bottom: 0; border-left: solid 10px transparent; border-right: solid 10px transparent; width: 0; height: 0; content: ''; position: absolute; left: 40px; } #menulist li a:hover:after { border-top: 0; border-bottom: solid 10px #ddd; border-left: solid 10px transparent; border-right: solid 10px transparent; width: 0; height: 0; content: ''; position: absolute; left: 40px; bottom: 0px; }
こうなる。
DEMO
:before擬似要素、:after擬似要素使ってるので、IE6、IE7ではアウトだけど、その他は問題無いはず。*1
参考にさせてもらったエントリ
っていうか、ほとんどパクってるんじゃないかっていう…(；^ω^)
枠線付きの吹き出し - Hail2u
画像を一切使わずにCSSだけで吹き出しツールチップを実装する | CSS-EBLOG
三角になる理屈は、CSS-EBLOGさんの記事を読むと理解出来た。
宿題
垂直板の宿題も対応済み。単にソース間違ってただけだという…(；´Д｀) 理解出来たって、理解出来てねーよ！ハァ…
水平版は簡単に出来た*2んで、垂直版(垂直方向に並んだリンクリストで、左右に▽を出す)も簡単にいけるだろうとタカをくくってたんだけど、なんかうまくいかないので、垂直板は後日の宿題にする。って、このままほったらかしにしそうだけど…
