忘却まとめ

Blenderの中級者・上級者向けの踏み込んだ情報や、アドオン・3DCGに関する情報を記事にします

【CSS・Stylish・Stylus】pixivの見たくないユーザー作品や不要なレイアウト要素を非表示にする方法【新仕様対応版】

その他

更新日:

pixivのアップデートによる仕様変更に対応した、要素を非表示にする方法を紹介する。
「nth-of-type(数字)」を利用してクラス名を使わずに要素を非表示にする。

外部からcssを適用する拡張機能であるStylish・Stylusなどを利用して、サイトレイアウトをいじることができる。

外部からpixivサイトをいじる際の問題

UIアップデートによりクラス名を使って要素を指定をすることができなくなった。
クラス名が文字の羅列で自動生成される仕様に変更されたため、外部からpixivサイトをいじるのが難しくなった。

そのため、クラス名に関係なく要素を指定する方法を紹介する。

検索結果の不要な要素を非表示にする

除去前

UIアップデートで検索結果画面の大部分が作品以外の要素に埋め尽くされ、スクロールしないと作品が見れないようになった。

このような検索に不要なpixiv百科事典や関連タグを除去する。

コード

/*メインイラストリストのヘッダーの空白削除*/
body> #root > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(5) > div:nth-of-type(1) > section:nth-of-type(2){
    padding-top:0px!important
}

/*ヘッダーの空白*/
body> #root > div:nth-of-type(1) > div:nth-of-type(2),

/*ソート順*/
body> #root > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(5) > div:nth-of-type(1) > div:nth-of-type(1),
/*人気イラスト*/
body> #root > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(5) > div:nth-of-type(1) > section:nth-of-type(1),
/*〇〇fav入り*/
body> #root > div:nth-of-type(2),
/*関連タグ*/
body> #root > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1),
/*辞典*/
body> #root > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2),
body> #root > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(3),
#hoge
{
      display: none!important;
}

指定するURL

次で始まるURLで下記を設定する。

https://www.pixiv.net/tags/
除去後

解説

クラス名を指定しなくても「nth-of-type(数字)」を利用して、何番目のタグかを指定することで、特定の階層まで指定することができる。

あくまで要素の並び順で指定しているので、さらなるアップデートで要素が増えたりすると意図しない動作が起こりやすい

例

body > div:nth-of-type(1) > div:nth-of-type(3)


boby
……div
…………div
…………div
…………div ← ここが指定される

ユーザーをミュート

特定の作者の作品サムネを検索一覧に表示しないようにする。
cssでは属性も指定できるので、属性のaltにあるユーザー名を指定する事ができる。

コード

必要な文だけ1行目をコピーする

section > div:nth-of-type(2) > ul > li [alt*="作者名"],
section > div:nth-of-type(2) > ul > li [alt*="作者名"],
section > div:nth-of-type(2) > ul > li [alt*="作者名"]{
      display: none;
}

注意点

この方法では作品項目をまるごと削除することができない。
あくまで画像のalt属性の中にある作者名に一致している画像を除去しているだけである。
作者名が短すぎると意図しない作者までヒットして誤動作しやすい。

属性指定のオプション

今回の目的では部分一致が最適だが、他にも行頭や行末・部分一致にすることができる。

  • E[foo="bar"] 属性の値に完全一致
  • E[foo*="bar"] 部分一致
  • E[foo^="bar"] 行頭
  • E[foo$="bar"] 行末
  • E[foo~="bar"] 空白区切りの1単語の一致
  • E[foo|="en"] | 言語の一致

リンク

【CSS】実はこんなに便利!cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。

属性セレクタ(完全一致) | Selectors Level 3 | CSS3 | Reference. - Study at 8am.

CSSのセレクタチートシート | webliker


記事の更新履歴

  • 2020-05-25
    • 検索結果ページのソースコードを、2020-05-25時点でのレイアウトに対応させました

3Dモデルなどの制作依頼はこちら

-その他
-,

Copyright© 忘却まとめ , 2020 All Rights Reserved Powered by STINGER.