pixivのアップデートによる仕様変更に対応した、要素を非表示にする方法を紹介する。
「nth-of-type(数字)」を利用してクラス名を使わずに要素を非表示にする。
外部からcssを適用する拡張機能であるStylish・Stylusなどを利用して、サイトレイアウトをいじることができる。
CSSの知識は必要。
pixiv側のサイトアップデートによって動かなくなるので、適宜直す必要がある。
もくじ
外部から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 ← ここが指定される
注意点
- pixivの検索ページにて、Google Chrome拡張機能のPowerful Pixiv Downloader アドオンを利用していると、イラストをダウンロードを実行しようとすると、作ったCSSのせいでメニューが隠れてダウンロードできない。
ページを再読込すればダウンロードできるが、地味に不便。
ユーザーをミュート
特定の作者の作品サムネを検索一覧に表示しないようにする。
cssでは属性も指定できるので、属性のaltにあるユーザー名を指定する事ができる。
コード
必要な分だけコピーする
img[alt*=" - 〇〇のイラスト"],
img[alt*=" - 〇〇のイラスト"],
img[alt*=" - 〇〇のイラスト"],
img[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.
記事の更新履歴
- 2020-05-25
- 検索結果ページのソースコードを、2020-05-25時点でのレイアウトに対応させました