はてなブックマークの新「コメントを一覧表示するページ」でユーザスクリプト「replace star by profile icon」のアイコン表示場所が乱れて困ってる人へ
新ページでは各々のブックマークの先頭に表示されるアイコンの位置を調整するために、body.entry #bookmarks .profile-icon に新たなルールが加えられとります。
んで、「replace star by profile icon」でスターと置き換えられた要素もクラス .profile-icon に属していて、body.entry #bookmarks の子孫だからそのルールが適用されてしまうと。
なので、
- CSSでルールを上書きする
- 生成する要素のクラス名を変更する
のどちらかで、この問題は解決可能。私は--一つの問題を解決するのに、ユーザスクリプト・ユーザCSSへと記述が分散するのは嫌。かといってjavascriptでCSSをいじる方法を調べるのとか面倒。そもそも .profile-icon にまた新たなルールが加わるかも知れんじゃないか--等の理由で後者を選びました。
ごちゃごちゃ言っとらんと、ソースをよこせ?
以下に貼るのは私が使っているスクリプトですが、元のソースにちょこちょこ変更を加えているので、あなたの用には適さないと思われます。今回の変更個所をコメントで強調しておくので、自分で使用中のスクリプトと見比べて挿入するのがよろしいかと。
(function(global){ if (!global && typeof unsafeWindow !== 'undefined') { var s = document.createElement('script'); s.textContent = '(' + arguments.callee.toString() + ')(this);'; s.addEventListener('load', function(){ document.body.removeChild(s); },false); document.body.appendChild(s); return; } else if (document.readyState === 'loading' || document.readyState === 'intaractive'){ window.addEventListener('load', arguments.callee, false); } var COLOR = true; const STAR_COLOR = { undefined: 'rgb(254,205,105)',//orange green : 'rgb(77,231,51)', red : 'rgb(254,94,101)', blue : 'rgb(0,176,249)', purple : 'rgb(205,52,227)' }; if (this.Hatena && this.Hatena.Star){ var pushStars = Hatena.Star.Entry.prototype.pushStars; Hatena.Star.Entry.prototype.pushStars = function(stars, color){ stars = stars.map(function(star) { var image = Hatena.Star.User.getProfileIcon(star.name); var style = image.style; style.margin = '0.5px'; style.height = '10px'; style.width = '10px'; if(star.quote){ style.borderBottom = "2px dotted black"; style.backgroundColor = STAR_COLOR[color]; }else{ style.borderBottom = "2px solid " + STAR_COLOR[color]; } /*===この行を適切な場所へ追加!===*/ image.className = "substitute_star"; /*========================*/ image.removeAttribute("title"); star.img = image; return star; }); pushStars.call(this, stars, color); }; var showName = Hatena.Star.Star.prototype.showName; Hatena.Star.Star.prototype.showName = function(e){ this.screen_name = this.name; showName.call(this,e); }; } })();
私が変更した部分については今回の個所に限らずパブリックドメイン扱いという事で。