Stylus で特定サイトを除外する方法

最終更新日

正規表現を頑張ればいい.

こう書こう!

例えば docs.google で始まる ULR と, wordpress で始まる URL を除外したければ,適用先を正規表現に一致する URL にして,こう書けば良い!

(?!.*(docs\.google|wordpress)).*

面倒くさいのは,除外対象を増やしたいときは上の正規表現の中間の (...) の中身を | で区切って足していかないといけないこと.上記の例は適用除外が2つだからぎりぎり読めるけど,これが3個とか4個とか増えていったらちょっと追えないよね… ちなみに否定の候補を追加する方法はこのサイトを参考にした.

なぜ条件を1行に書くの? (複数の適用先を設定すれば?)

結論から言うと,(たぶん) 1行じゃなきゃダメです (= 思い通りに機能しません).これは Stylus の「適用先」の設定を利用したものであって,「不適用先」の設定じゃないからしょうがない.条件は「AまたはBならば除外」という形式を取らざるを得ない.「適用先」を2つ3つと増やすことはできるけど,たとえば

  1. 1つ目の適用先に (?!.*docs\.google).* とか書いて,
  2. 2つ目の適用先に (?!.*wordpress).* と書いても

思った挙動にはならない.そう書くと,docs.google で始まるサイトは1つ目の設定により「適用先ではない」と判断されるけど,2つ目の設定で「適用先である」と判断されるからスタイルが有効になっちゃうんです.

説明する画像… 伝わるかな?

僕がしてる設定

僕が上記の「不適用先」を設定しているスタイルはこんな感じ.

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap');

body:not(pre):not(code) {
    font-family: 'Ubuntu', 'Noto Sans CJK JP';
}

これは「もしサイトがフォントを指定していなければ,<pre><code> 以外の場所では Ubuntu または Noto Sans CJK JP を使う」というスタイル.:not() を複数指定するには単純に連続で書けばいいらしい.僕は Ubuntu のフォントが好きなので可能ならこのフォントで文字を読みたいんですよね〜.どっちもフリーフォントで配布されてるからインストールしてみてね!

コメントを残す

回れ右の内輪差をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む