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

2019年6月11日

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

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

 

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

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

例:

body {
    font-size:initial !important ;
}

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

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

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

 

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

 

 

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

2.適用したい部分のid名やclass名を探します。
例:div id=”example” span class=”example”)。
▶をクリックすると畳まれている部分が展開します。

3.インスペクター(2.の部分)をマウスオーバーすると位置を探すことができます。

 

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

例:

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

 

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

yahoo!メール

 

 

[PR] パソコン操作をもっと速く楽にするため小ネタ満載
¥500(Kindle Unlimitedは無料)