見出し画像

noteにアカウントミュート機能がないのでCSSで実装してみた

ミュートしたアカウントの記事を記事一覧から非表示します
(※一覧から非表示するだけなのでアカウントページに直接飛べば普通に見れます)

ChatGPTに適当に書かせた○mazonレビュー記事にアソシエイトタグ付きリンクを貼り付けてるだけの100%アフィ専用アカウントとか読みたい記事を探すのに障害なんでちょっとどいてて欲しいなーと思って書きました。note的には多分そういうプレイは推奨方向なんじゃないかと思いますけど。

ユーザーCSSだけでいけるので、Google Chrome拡張機能のStylusを入れるだけですぐ使えます。


Stylusの導入

以前導入用の記事を書いたので下記リンクを参照してください。

ミュート用CSS

section.m-largeNoteWrapper:has(a[href*="/hogehoge/"]),
section.m-largeNoteWrapper:has(a[href*="/fugafuga/"]) {
    display: none !important;
}

解説

sectionから始まる一行分が1アカウントを指定し、hogehoge、fugafugaと代入している部分が実際にミュートしたいアカウントを指定するところです。
スラッシュの間(/~/)に入れることでその文字列を含むAタグを内包する要素を非表示します。
ミュートしたいアカウント名(該当アカウントのホームURLの"note.com/"の後の部分)をコピーしてきて、上記部分に代入してください。
例えばうちのアカウントをミュートしたいなら以下のようになります。

section.m-largeNoteWrapper:has(a[href*="/sameashark/"]) 

追加したい場合は、sectionから,(カンマ)までをコピペして上に追加していくのがわかりやすいかと思います。

追加例

section.m-largeNoteWrapper:has(a[href*="/ariari/"]),
section.m-largeNoteWrapper:has(a[href*="/oraora/"]),
section.m-largeNoteWrapper:has(a[href*="/mudamuda/"]),
section.m-largeNoteWrapper:has(a[href*="/hogehoge/"]),
section.m-largeNoteWrapper:has(a[href*="/fugafuga/"]) {
    display: none !important;
}

いちいちコピペする手間はあるものの、記事一覧がスッキリしてだいぶ見やすくなります。

ちなみに、以下のように書けば、「今日のあなたに」帯のようなジャンル帯をまるごとトップページからミュートすることもできます。

section.m-horizontalScrollingList:has(a[href*="recommends/for_you"]){
    display: none !important;
}

見てわかる通り、書式はアカウント別ミュートとほぼ同じで、対象のリンクを含んだ帯を非表示しています。
ジャンル帯の非表示自体はnoteデフォルトで実装されていて、帯右端の三点リーダー的なボタンを押せば非表示設定が出てくるのですが、機能しないこともあるとかないとかなので一応ご紹介しておくこととしました。

ちなみに、「いいね」通知欄は以下のように書けば、ベルクリック時の通知一覧に表示されなくなります("hogehoge" を対象のアカウントIDに変更してください。追加の仕方は先述通り)

#notifications li:has(a[href*="hogehoge"]) {
    display: none !important;
}

筆者はトップページや各カテゴリーページでの一覧から非表示できれば十分なのですが、それ以外にも「このページでも非表示したい」という要望があればコメントで教えてください。

本当はミュートなんかしないで済むならそれが一番なんですけどね。

こちらもセットでどうぞ

いいなと思ったら応援しよう!