ユーザーCSSで特定のページを擬似的にアクセス禁止にする

ユーザーCSSで特定のページへアクセスできないようにして、見たくないページを見ない方法。

ページの表示

CSSを当てたページにアクセスしようとすると、下のようなメッセージが表示されます。

このサイトにアクセスできません

Chromeのエラーメッセージの文言をデベロッパーツールで弄ってスクショして作りました。私的な範囲で楽しむ分には大丈夫かと思います。

ユーザーCSSに適用させたい画像のために、わざわざ画像をサーバーにアップロードするのもアレなので、今回はBase64エンコードしてみました。TinyPNGも繰り返し掛けたので圧縮されています。

CSS

アクセスしたくないドメインに下のCSSを適用させればOKです。body要素を丸っとdisplay: noneして、html要素に先ほどの画像をbackgroundに貼り付けます。

1
2
3
4
5
6
7
8
body {
display: none!important;
}

html {
height: 100%;
background: url(data:image/png;base64,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) no-repeat center 16%;
}

もし、上で指定したドメイン上で例外を設定したい場合は、下のような別のスタイルを作成して上書きしてやればいいと思います。

1
2
3
4
5
6
7
body {
display: block!important;
}

html {
background: none;
}

結局は

この方法はすぐに解除できてしまうので、小細工の域は脱せていません。「見たくないけどどうしても見てしまう」といった類のサイトで禁止にしたい場合は注意が必要です。スマホではそもそもユーザーCSSの当てられるブラウザの数が少ないです。

アクセス禁止にする方法は他にも、hostsファイルでドメインの名前解決を阻害したり、ルーターでIPをフィルタに掛けたりなど、いろいろ考えられますが、他の端末で見るとか、モバイルデータ通信に切り替えるだとか、回避する方法はいくらでもあるので、結局は個人の堅い意志が必要です。

表示をブロックするのはあくまで気休め程度に考えておくのがいいと思います。