トップ > その他-雑記 > 揚げ鳥番外編　はてなのトピックやサークルからNot for meを消すCSS
最終更新日

揚げ鳥番外編　はてなのトピックやサークルからNot for meを消すCSS

その他-雑記
  • 2024.03/12一部修正
    • この記事の画像は記事を書いた2023年08/26のものです。2024年3月現在とはレイアウトが異なります。

説明

  • これは何？
    • はてなのトピックやサークルから興味のない物を非表示にするものです。
    • 身近にこういったフィルターを求めている人がいたため、ド素人ながらはてブロ版を公開してみる事にしました。CSSなのはこのブログのようにごくごく単純なことならば学習コストが低く、導入や修正が簡単だからです。ブロックフィルターとしてはベストではありませんが、日常の「こうしたい」の解消に知っているとちょっとお得になれる手段です。
  • どうやって使うの？
    • Webブラウザ（Chromeなど）にStylusなどのユーザーCSSを設定できる拡張を入れて下さい。使い方は雰囲気で。
  • 留意事項
    • はてなブログ側のページリニューアルで使えなくなる事があります。
    • 質問には答えられません（まず無いとは思いますが、念のため。適切に答えられるスキルがないので！）
  • 推奨される使い方

例：グループ画面

例として1ページ目の1件以外を非表示に設定した物です。
通常は左側にある枠内画像の状態で、ベース（右側）はCSSを適用したものになります。
（アイコンとアイキャッチは青く塗りつぶしてあります。他ちょっとこざっぱりしているのは不要な表示をついでに消しているためです）

必須拡張　Stylusの使い方

  1. 上のリンクから拡張を入れます。
  2. はてなのトップページ　https://hatena.blog/　を表示します
  3. ブラウザに表示されるStylusのアイコンを押すと出て来るポップアップ内「次のスタイルを書く」の「hatena.blog」を選択します。
  4. 白紙のページが現れるので、そこにCSSを追加して保存。あとは感覚と雰囲気と検索でGO！
    • コピーするのは↓記事内で黒背景になっている部分でOK。

コード内に日本語を書き残したい時

適用先ドメイン（このCSSが働くサイトやページ）を増やす

  • 上記説明の段階では、URLがhttps://hatena.blog/以下の時のみで、URLが異なるページでは適用されません。そのページでもStylusの設定を有効にするには次の設定が必要です。
  1. はてな用stylus　右側の上（1カラムの時はページ上部）にある適用先（「ドメイン上のURL」「次で始まるURL」などがあるプルダウンの行）の-+のプラスを押す。
    • [（適用先プルダウン）▼] https://hatena.blog/- +　の右端「+」です。
  2. 新しく出て来た行の適用先を [次で始まるURL▼] にして、右隣りの空白に新しく有効にしたいURLを入れて保存します。

適応先URL

  • 指定するURL　https://hatena.blog/
  • この指定でStylusが有効になるページ（例）
    • トップページ
    • お題をさがす
    • トピックページ
    • グループページとランキング

トップページから削除する

きょうのはてなブログとおすすめ記事で非表示にします。

/*トップページから削除*/　
div.entryUnit-staffPick:has([href^="ブログURL"])
{
display: none !important;
}

トピックスページから削除する

 /*トピックスから削除*/
div.mixed-topic-entry-item:has([href^="ブログURL"])
{
display: none !important;
}

グループページから削除する

/*グループから削除*/
li.list-item:has([href^="ブログURL"])
{
display: none !important;
}

/*参加ブログ一覧から削除*/
div[class^="participating-list-"]:has([href^="ブログURL"])
{
display: none !important;
}

ランキングページから削除する

/*ランキングから削除*/
li.top10:has([href^="URL"]),
{
display: none !important;
}

お題から削除する

/*お題の「みんなからの投稿」から削除する*/
li.odai-blog-entry:has([href^="URL"])
{
display: none !important;
}

はてなブログタグのページから消す

d.hatena.ne.jp

  • 適用先ドメインにhttps://d.hatena.ne.jp/keyword/を追加。
/*はてなブログタグから消す*/
div.sc-hUpaCq.eTGxBZ:has([href^="URL"])
{
display: none !important;
}

URL指定の説明

  • 非表示にしたいブログのアドレスはトップページのアドレスを指定してください。トップレベルドメイン[～.com/]や[～.jp/]までで、/entryなどは含みません。
    • 例：揚げ鳥コーヒーを非表示にしたい場合は
      https://agedori-coffee.hateblo.jp/です。
    • 実際に指定するとこうなります。
      div.entryUnit-staffPick:has([href^="https://agedori-coffee.hateblo.jp/"])
  • 例ではブログアドレス（URL）を前方一致で指定しています。これは指定したキーワードで始まる物を全て対象にする指定です。よってトップレベルドメインまでの指定であっても、/entry（個別記事）以下も非表示対象になります。

複数指定する場合

li.list-item:has([href^="URL1"]),
li.list-item:has([href^="URL2"]),
li.list-item:has([href^="URL3"])
{
display: none !important;
}

※例はグループページから削除するCSSです。

この様に並べてください。一番最後に指定する物だけカンマ(,)をつけません。
非表示対象を増やす場合は上にカンマ付きの1行をコピーで追加しながらURLを書き換えて行くと楽です。

ということで知っているとネットの不快指数がちょっと和らぐかもしれないミニTipsでした。