  |
はてなキーワード:Stylusとは
はてなブックマークや増田で機能する、NGワードを元に記事を非表示にする方法をまとめました。
現在も機能する方法という観点で調べてみましたが、有力な抜け漏れがあったら教えてください。
ChromeとFirefoxの拡張で、はてなブックマークに有効。デフォルトで非表示になるサイト多数あり。AndroidならFirefox版が動くかも。
はてブの記事を、キーワードやURL でミュートするChrome拡張を作った (はてなミュート)
[はてブ]uBlockOriginで特定のエントリーを隠す方法のメモ
増田でuBlockOriginを使って特定の単語を含むエントリーを隠す方法のメモ
広告ブロック uBlockOrigin を使っている場合に活用できる。同Lite 版でも「カスタムフィルター」機能を使って対応できる。はてなブックマークだけでなく増田にも有効。面倒だろうけどAndroidならFirefox版が動くかも。
Tampermonkeyなどのユーザースクリプトを適用する拡張と共に、またはブックマークレットとして使う。はてなブックマークの増田一覧にだけ有効。スマホの場合アプリでは動かないが、面倒だけどブラウザでは動く※。キーワードはノイズとなりやすいユーザーを中心に常時メンテナンス中。
[増田しぐさ]増田CSSを紹介する記事(英文スパム対策付き)
Stylusなどのスタイルシートを適用する拡張と共に使う。増田にだけ有効。面倒だけどスマホでも動く。スパム対策はビジネスや詐欺のURLを中心に常時メンテナンス中。
※スマホでのユーザースクリプトの動かし方
https://chatgpt.com/share/6936aa6a-e2dc-800f-ab39-021d68a25b87
検索用:はてなブックマークはてブはてな匿名ダイアリー増田スパムキーワードNGワードフィルタミュート非表示 削除 隠すブロックユーザースクリプトユーザースタイルhatenabookmarkanondspam keywordsngwords filter mutehide hidden display none block userscriptJavaScriptjscss style
はてなブックマークの増田一覧の、さらに「すべて」(1user)をチェックしている希有な人向けのユーザースクリプトを公開します。
https://b.hatena.ne.jp/site/anond.hatelabo.jp/?sort=eid
// ==UserScript==// @nameHatenaBookmarkAnond Filter// @namespacehttps://b.hatena.ne.jp/site/anond.hatelabo.jp/// @descriptionはてなブックマークの『はてな匿名ダイアリー』の記事のうち、指定したキーワードが含まれる投稿を非表示にします。// @matchhttps://b.hatena.ne.jp/site/anond.hatelabo.jp/*// @grant none// @version 1.0.2025.12.10.0005// ==/UserScript==(function(){constSCRIPTID = 'HatenaBookmarkAnondFilter';console.time(SCRIPTID);const ONCE = 1,AP = 2, INTERVAL = 3;/*適用タイミング*/const KEYWORDS = [ 'dorawii', 'あおやまちゃん', 'ボスマン', 'れめくん', '自己放尿', '性慾', 'boushi_inst', 'hakaikami',/*電気通信大学駿河台大学鉄道研究会れめくん自己放尿(頻出)*/ /*A-G*/'/akibakko6348', '/anapgoeson', '/asapgoeson', '/buscholarx', '/circlecavok', '/disney1007cla', '/dora22sibuya', '/donkotrain', '/fft_dareka', '/gmhtcyznf_abc', /*H-N*/'/h13_yokohama', '/h2twi', '/hinolovelove', '/inaken17_', '/inte235dy', '/kaoru_ai1991', '/kiha2228', '/kqlex1500', '/kurotamaxxx', '/kt_ruma_1372', '/lightningreen77', '/minamihinawot', '/minori0151', '/mukoroku651', '/nanpyong', '/nimouec', '/norannnde', /*O-U*/'/oreizmmiporin', '/pasotokon', '/pm95uq', '/reme_kun', '/s03_amurtk2731', '/sacchan03110319', '/seisu_bot', '/senanana_cos', '/shinano_115', '/shineleaf1372', '/soroisoroi', '/sweidan821858', '/tarotaromusic1', '/tx9y2cpwdz27255', '/uec15take', '/uecrail', /*V-Z_0-9*/'/wakasato_', '/yuuya_1104_uec', '/100mph_no_yuuki', '/2rtkvn34il2783', /*tadaup.jp*/'/CBUHadpD.jpeg', '/CgJlF4Wr.jpeg', '/CGTtm0Ev.jpeg', '/CIxj8clS.jpeg', '/CqbERPdQ.jpeg', '/CTZsA2wM.jpeg', '/CWY2m7rS.jpeg', '/CZVCEgd1.jpeg', 'テクウヨ', ].map(w => w.toLowerCase());const sites = { 'prefix': [ ['selector', 'modifier', 'REPEAT', '(css)'], ], 'https://b.hatena.ne.jp/site/anond.hatelabo.jp/': [ ['li.js-keyboard-selectable-item', li => KEYWORDS.some(w => (li.textContent.toLowerCase().includes(w)) && (li.querySelector('li.entrylist-contents-category > a').textContent = w) && (!li.classList.add('filtered'))),AP, `.filtered{display: none;}`], ], };const rules = sites[Object.keys(sites).find(prefix => location.href.startsWith(prefix))]; if(rules === undefined) returnconsole.log(SCRIPTID, 'Not foundany sites.');const modify = function(selector, modifier){constelements = document.querySelectorAll(selector);elements.forEach(modifier); }; /* ONCE(一括適用) */ rules.forEach(rule => {const [selector, modifier, repeat,css] = rule;console.log(SCRIPTID, 'ONCE:', selector); modify(selector, modifier); if(css){const style = document.createElement('style'); style.dataset.script =SCRIPTID; style.type = 'text/css'; style.textContent =css; document.head.appendChild(style); } }); /*AP(AutoPagerize) */ rules.filter(rule => rule[2] ===AP).forEach(rule => {const [selector, modifier, repeat] = rule; document.addEventListener('GM_AutoPagerizeNextPageLoaded', e => {console.log(SCRIPTID, 'AP:', selector); modify(selector, modifier); }); }); /* INTERVAL */ rules.filter(rule => rule[2] === INTERVAL).forEach(rule => {const [selector, modifier, repeat] = rule; setInterval(function(){console.log(SCRIPTID, 'INTERVAL:', selector); modify(selector, modifier); },1000); });console.timeEnd(SCRIPTID);})();
検索用:はてなブックマークはてブはてな匿名ダイアリー増田スパムキーワードNGワードフィルターミュート非表示 削除 隠すブロックユーザースクリプトユーザースタイルhatenabookmarkanondspam keywordsngwords filter mutehide hidden display none blockuserscriptJavaScriptjscss style
タイトルに dorawii@ が付いてる増田はこれでトップページから消えるはず
h1 + #intro + #body div.section:has(a.tw-share-button[href*="dorawii%40"]){ display: none;}
導入方法
PC: 【Stylus】ウェブサイトにCSSを適用できる拡張機能。自由にカスタマイズ！ |ナポリタン寿司のPC日記
https://www.naporitansushi.com/stylus/
iPhone: MaKeoverアプリでiPhoneSafariのCSSをカスタマイズ！万博パビリオン予約結果一覧を見やすくする使い方
https://gintachan.com/makeover-app-css-change-safari-how-to/
/* 単にアイコンを非表示にするバージョン */img[src^="https://cdn.profile-image.st-hatena.com/users/"]{ visibility: hidden;}/*マウスを乗せた時だけ表示させるバージョン */img[src^="https://cdn.profile-image.st-hatena.com/users/"]:not(:hover){ opacity: 0;}
空白を残すより、替わりにデフォルトアイコンを表示させるほうがいいと思ったけど、デフォルトアイコン単体の画像URLが見つからなかったのでやめた。プロフィールのデフォルト画像を変更しました の記事の画像を部分指定して上乗せすればできるけど、コードが煩雑になるよなぁ。あと、余白として残さず存在を無くしてしまう方法(display: none;)は、どこかでレイアウトが崩れるかもしれないので避けた。
Chrome系ブラウザには増田を快適に閲覧するためのコンパクトな増田 という古い拡張機能があったが、Chromeの更新に対応し切れておらず、既にChromeには新規インストールできなくなってしまっている。Edgeにはまだインストール可能だが、いずれ対応しなくなる可能性が高い。
そこで、「増田のトップページで、言及エントリ(返信・トラバ)を一覧から除外することで、新規エントリだけを一覧できる」という機能に絞ってコンパクトな増田を再現、ついでにいくつかのおまけ機能を付与したスタイルシート(CSS)を今年の4月に公開していたのだが、今回改めて英文スパム対策を追加したので公開する。
これを導入するにはStylus という拡張が必要で、少し気軽さには欠けるが、増田以外にも活用できるので、この機会にぜひ導入してみてほしい。拡張をインストールしたあとは、下記のコードをコピペして新規スタイルとして導入する方法もあるが、スタイルシートを公開できるuserstyles.world の増田CSSページ(※毎朝9:00直後はアクセスできない)から [Install]ボタンでインストールするほうが、自動更新にも対応するので便利かもしれない。
/*トップページで言及エントリを除外 *//*via:最近ファーストブクマカが静かhttps://anond.hatelabo.jp/20250326171302 */h1/*はてな匿名ダイアリー*/ + #intro/*名前を隠して楽しく日記。*/ + #body div.section:has(h3 > a/*■*/ + a:not(.keyword, .edit)/*anond:YYYYMMDDhhmmss*/){ display: none;}/* うっかりクリックしがちなキーワードリンクを無効に */a.keyword{ pointer-events: none;}/*執筆時のテキストエリアを広く */textarea#text-body{min-height: 50vh !important;}/*執筆時に特殊記号のヒント(疑似要素なので選択してコピペできないのがもどかしいけど) */p.post-submit >span.explain::after{margin-left: 1em;padding-left: 1em; content: "特殊記号: &[&] <[<] >[>]";background:url(/images/common/outsite-wh.gif) 0 3px no-repeat;}/*スパム対策部分は下記URLの [Install]ボタンで事前確認できます(随時更新中) *//*https://userstyles.world/style/23028/ */
なお、このCSSを適用すると、NGワードを含むこの増田自体も、増田トップページからは消えてしまう(この増田単体の個別ページなら閲覧できる)。
念のため、PC・スマホにCSSを適用する方法の解説にもリンクしておく。
PC: 【Stylus】ウェブサイトにCSSを適用できる拡張機能。自由にカスタマイズ！ |ナポリタン寿司のPC日記
https://www.naporitansushi.com/stylus/
※StylusはFirefox版もあるhttps://addons.mozilla.org/ja/firefox/addon/styl-us/
iPhone: MaKeoverアプリでiPhoneSafariのCSSをカスタマイズ！万博パビリオン予約結果一覧を見やすくする使い方
https://gintachan.com/makeover-app-css-change-safari-how-to/
(7/21追記) また、スパムが特に多い時は、1ページまるごとスパムということもあるので、PCならuAutoPagerize (Chrome) やweAutoPagerize (Firefox) などの拡張を使うと、自動でページが継ぎ足されて快適に読み進められる。ただし、継ぎ足ししまくるとメモリ不足などでブラウザが重くなることがあるので、そうなったら page:20 などのページ番号をクリックしてから続きを読もう。
また、スパム対策の簡易NGワードは、下記のスクリプトを使って抽出した「直近の増田の頻出キーワードリンク上位20件」から、誤判定しそうなline とuser を除いた18件を用いた。10件だと生き残る英文スパムがあったので20件にしたが、それでもわずかに洩れはある。しかし日本語による真っ当な(?)増田の直近の誤判定はなかった。はてなキーワードのリンクだけを対象にしているので、URLにはこれらのキーワードが入っていても大丈夫だ。ただし、スパムのトレンドが変われば話は変わってくるかもしれないし、過去や未来の増田の誤判定は当然あるだろう。気になる人は前掲のCSSを行単位で編集してほしい。
//AutoPagerizeでまとまった数のページを読み込ませた後に実行するとよい。(function(){constkeywords = []; //はてなキーワードの集計 document.querySelectorAll('a.keyword').forEach(a => { // 4文字未満は誤検出の可能性が高まるので除外 if(a.textContent.length < 4) return; letindex =keywords.findIndex(k => k.keyword === a.textContent); if(index >= 0)keywords[index].count += 1; elsekeywords.push({keyword: a.textContent, count: 1}); });keywords.sort((a, b) => a.count < b.count); //ランキング配列の出力console.log(keywords); //CSS埋め込み用に上位キーワードのみをURIエンコードして出力console.log(keywords.slice(0,20).map(k => encodeURIComponent(k.keyword)).join('\n'));})();
anond:20250326171302 ←元はこの増田がきっかけでした。
anond:20250701194328 ←キーワード判定に踏み切る後押しとなりました。
Permalink |記事への反応(14) | 23:56
Chromeやめたほうがいいよ
そんでChromeよりちゃんと広告ブロックしてくれるから軽さにも貢献する
FirefoxはChromeと拡張機能ストアが別だから、Chromeと同じ拡張機能があるかは分からんけど
とりあえず主要なとこだと、uBlockOrigin、Enhancer forYouTube、Stylusあたり入れとけば不自由ないだろう
ダウンローダー系拡張ならVideo DownloadHelperってやつをコンパニオンアプリと一緒に入れるのが汎用性高いと思う
あとタブを閉じれないっていうのは、タブをブクマ代わりにしてるってことだと思うが
標準的なタブ検索機能は最近のブラウザはみんなついてて、⇓みたいなボタンから探すことはできるが
どのタブを過去開いてたかってことが重要だから肥大化するんだろ？
そういう人にはTab Session Managerっていう拡張機能がおすすめだ
ブラウザがエラーとかで終了して開いてたタブ情報が全部飛んだときとかでも一発で復元できる
「コンパクトな増田」がどんなものかググる程度の非ファーストブクマカだけど、ファーストブクマカには大変お世話になっています。ひとまずこんなユーザースタイルを当てれば、トラバは除外できます。
/*トップページで言及エントリを除外 */h1/*はてな匿名ダイアリー*/ + #intro/*名前を隠して楽しく日記。*/ + #body div.section:has(h3 > a/*■*/ + a/*anond:YYYYMMDDhhmmss*/){ display: none;}
ユーザースタイルやAutoPagerizeを使ったことない場合は下記を参考にググるなりしてみてほしい。
https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja
uAutoPagerize -Chromeウェブストア
https://chromewebstore.google.com/detail/uautopagerize/kdplapeciagkkjoignnkfpbfkebcfbpb?hl=ja
--
マルウェア問題が起きたのはStylishで、そのユーザー層を引き継いだのがStylus。
紹介したuAutoPagerizeは拡張の更新日付もレビューの日付も新しいし、私自身はFirefoxのweAutoPagerizeを使ってるけどデータベース更新日付は本日付なので、たぶん大丈夫。実際増田のトップページで快適動作してます。
コンパクトな増田が動かなくなったことと関係しているのだろうか。最近見ていなかったから放置しているけれど、あれ使う人は自分でパッケージ作り直すくらいはできそうな気もする。どちらにせよあれ無しで閲覧するのは不可能そうだ。
特定ワードで追っている人もいるが、RSS ってまだあったっけ。
新着が完全に機能していないので、趣味の一部が欠落してしまった。非公開ブクマを新着に載せる理由が無い（スパムが湧いて不便以前に、秘匿性が高い情報だし組み合わせれば誰がブクマしているか特定できる）けれど、そんなに難しいことなのだろうか。難しいなら公開のみのカウントカラムを持つとか、いっそのこと users にカウントしないようにするとかさ。カウントされなくても別に誰も困らないよね。
大して伸びない単なる日記が読みたい。
（追記）
あざます。素でも見れるならファーストさんに頼らず探そうかなと思ったけれど、頼っているのは「望むものが見られる」ことよりも「望まないものを見ないで済む」からなのだなと思いました。いつもありがとう。素、つらい。
「新着」は完全に用語を間違えていて、スマホからだと「検索」でanond.hatelabo.jp を検索した時の結果が非公開ブクマのものばかりで見ることができない、機能していないという意味でした。
はてブの機能としての「新着」は 3 users 以上の新着タブに出るやつですな。それはもう見なくなって長いので意識から外れていた。
非公開しかないブクマは検索結果に出さないで欲しい。セルクマやスパムじゃなくても、非公開の元々の意味からしたら出て欲しくないだろうに。
スマホでしか見なくなるとやりようがなくなって頼り切りだったけれど、休日くらいはPC でカスタムCSS とAutoPagerize でがんばろうかな。AutoPagerize って共同DB がうまく機能しなくて死んでなかったっけ。Stylus ってサプライチェーンでマルウェアになってなかったっけ。その辺りも調べてみるね。
個人的にはPC で閲覧している時はスルー力が強く働くが、スマホだとそれが弱まる、見るものは見たいものであって欲しいという気持ちが強まる気がする。
まあ色々工夫の仕方はありそうだけれど、それはそれとしてはてブの検索は非公開のみを対象から外して欲しいな、という気持ちは変わらず。頼む
MacTypeVersion 2025.1.17 を入れ、macwiz.exeからサービスモードで有効化する(プロファイルはDefaultでOK)
源真ゴシックPとBIZUDPゴシックを落としてきてShift+右クリから全ユーザーにインストールする
noMeiryoUIを入れ、システムフォントに源真ゴシックPを設定する。pt数はお好みで10～12あたり
ブラウザ(FirefoxかBraveがおすすめ)に拡張機能Stylusを入れ、下記のような感じに設定する
/*---------------sans serif---------------*/@font-face { font-family: "メイリオ";src: local("BIZUDPGothic");}@font-face { font-family: "Meiryo";src: local("BIZUDPGothic");}@font-face { font-family: "MeiryoUI";src: local("BIZUDPGothic");}@font-face { font-family: "ＭＳ Ｐゴシック";src: local("源真ゴシックP Regular");}@font-face { font-family: "MS PGothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "MSUI Gothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "YuGothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "游ゴシック";src: local("源真ゴシックP Regular");}@font-face { font-family: "Microsoft Yahei";src: local("源真ゴシックP Regular");}
noMeiryoUIなどのレジストリ編集ソリューションだけではタスクバーやスタートメニューなどのフォントを置換できない
これを弄るにはシステムフォントを改ざんする必要があり、ここから先はやらなくてもいいが
やりたい場合はhttps://github.com/hirobon1690/System-Font-Changer-for-Windows10-11 を参考に実行できる
これらの作業によりWindowsで快適なフォント環境を手に入れることができるが
https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja
.entrylist-item li:has(a[href*="anond.hatelabo.jp"]) {
display: none;
}
.entrylist-header:has(a[href*="anond.hatelabo.jp"]) {
display: none;
}
これを書き、はてなのURLを指定することで頭のおかしい匿名ブログの話題からおさらばできます
URLは
変なスラッシュも全部入れてね
動画の上部にあるグラデーション部分にマウスを乗せたときだけ、サムネが見られるようにしている。
(他とも干渉してるかもしれないので、以下でそのまま動くかはわからん)
/* 上部マウスホバーでサムネイル表示 */#movie_player .ytp-gradient-top{ display: block !important; opacity: 0; pointer-events:auto;}#movie_player.paused-mode:hover .ytp-gradient-top{ opacity: 1;}#movie_player:not(.unstarted-mode) .ytp-gradient-top ~ .ytp-cued-thumbnail-overlay{ display: block !important; opacity: 0; pointer-events: none;}#movie_player .ytp-gradient-top:hover ~ .ytp-cued-thumbnail-overlay{ opacity: 1; z-index: 999;}#movie_player:not(.unstarted-mode:hover) .ytp-gradient-top ~ .ytp-cued-thumbnail-overlay button.ytp-large-play-button{ opacity: 0;}
別にFHDモニタでもいいからとりあえずMacTypeをgithubからインストールして有効化しろ
デフォ設定でかなり綺麗になる
WindowsのシステムフォントはnoMeiryoUIを使って源真ゴシックP Regular 10ptあたりにするといい
ブラウザはStylus入れてこんな感じでダサいフォントを潰してけ
/*---------------sans serif---------------*/@font-face { font-family: "メイリオ";src: local("源真ゴシックP Regular");}@font-face { font-family: "Meiryo";src: local("源真ゴシックP Regular");}@font-face { font-family: "MeiryoUI";src: local("源真ゴシックP Regular");}@font-face { font-family: "ＭＳ Ｐゴシック";src: local("源真ゴシックP Regular");}@font-face { font-family: "MS PGothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "MSUI Gothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "YuGothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "游ゴシック";src: local("源真ゴシックP Regular");}@font-face { font-family: "Microsoft Yahei";src: local("源真ゴシックP Regular");}
p { font-family: "Yu GothicUI";}とか直書きで変なフォント指定しているサイトは、Stylusの拡張機能で
@font-face {src: local("GenShin Gothic Regular"); font-family: "Yu GothicUI"; }
font-family: system-ui;
font-family: system-ui; を殺す方法をだれか教えてくれ。
body { font-family: "GenShin Gothic" !important; }
ブックマークレットでjavascriptをどうぞ。 例えば↓だったら、増田の「言及先エントリを開く」や「ツリーの言及」を全部開くことが出来る。
javascript:document.querySelectorAll(".optimize-get-reference-button,.trackback-header a[onclick]").forEach(function(e){e.click();});
んでブックマークレットに慣れてきたら、Greasemonkey（Tempermonkey）やstylusのような拡張をどうぞ。
→ 言及が全部開かれる
メモ帳に
<!DOCTYPEhtml><html lang="ja"> <head> <title>練習</title> <script> alert("aaaa"); </script> <style> .div1 {color:#ffffff;background:#ff0000; } </style> </head> <body> <h1>練習用のページ</h1> <div class="div1"> ここの色を変えたい </div> </body></html>
をコピペして「test.html」みたいな名前で保存したあと
「script」や「style」のところで何を書いてるのかとか
それでいろいろイジってみればええで。
あとブラウザの「デベロッパーツール」もしくは「開発ツール」っていうのを起動すると
見ているページのHTMLとかが分かるようになるんや。
使いこなすと便利やで。
頑張りや。