アドオン[Stylus]でWebページのフォント・デザイン変更 Part 3　ピンポイントでスタイルを指定する

2020年7月26日

特定のサイトやページでスタイルを適用させたい場合

特定のサイトやページだけ適用させる場合、ツールバーのアイコンをクリックして「次のスタイルを書く」からURLを指定します。
サイト全体に適用させたい場合はドメインをクリックし、特定のURLのみに適用させたい場合は「このURL」をクリックします。

適用先やドメイン、URLはStylusの編集画面から変更もできます。

特定のサイトで文字サイズが小さくなってしまう場合など

コード欄で初期値（initial）を指定します。!importantや*等は必要に応じて。

例：

body {
    font-size:initial !important ;
}
body * {
    font-size:initial ;
}
html {
    font-size:initial  ;
}

ピンポイントでスタイルを適用させたい場合

ページの一部だけ変更したい場合や、Stylusで設定してもスタイルが適用されない部分がある場合は、そこだけピンポイントで適用させます。

ページ上で右クリックし、「検証」（Chrome）や「要素を調査」（Firefox）を表示させます。F12キー押下でも表示できます。
ここでの操作例はFirefoxです。

モニターやウィンドウのサイズに応じて表示位置を変えることができます。

１．インスペクターで変更したい場所の文字をできるだけ特定できる文字で検索します。

２．適用したい部分のid名やclass名を探します。
例：div id="example" span class="example"）。
▶をクリックすると畳まれている部分が展開します。

３．インスペクター（２.の部分）をマウスオーバーすると位置を探すことができます。

設定を追加して反映するか確認します。
idは#example、classは.example
divやspan、liなどで括ってある場所はそのように記述します。
同じidは同一ページ内に一箇所しかないはずですが、同じclassは複数箇所ある場合が多いので、スタイルが適用される条件であればまとめて適用されます。

例：

#example,
.example
div　{
    font-size: 1em ;
    color:#aaa;
    -webkit-text-stroke: 0.2px #222;
    background-color:#555;
}

Part２のamazonやyahoo!メールの例も参考にどうぞ。
Amazon

yahoo!メール


[PR] パソコン操作をもっと速く楽にするため小ネタ満載
￥500（Kindle Unlimitedは無料）
高速化・快適化するためのパソコン再入門 Kindle版
150章/369ページ￥500(税込)(Kindle Unlimitedは無料)
深月 隆寛（著）
Amazon

ブラウザー,快適化フォント

Posted by みつき