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

PC

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

特定のサイトやページだけ適用させる場合、ツールバーのアイコンをクリックして「次のスタイルを書く」から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の例も参考にどうぞ。
https://pc-plaza.com/stylus-example

 

ブラウザーの文字(フォント)が見にくい・細い・汚い・薄い・かすれて見える場合の対処方法(Windows 10)
ブラウザーの文字が見にくい... ウェブブラウザーは使用頻度が高いので、見にくい文字のまま長時間使うのは目の負担になります。 下はWindows版GoogleChromeのインストール直後で何もしていない状態ですが、サイトによっては文字...
アドオン[Stylus]でWebページのフォント・デザイン変更(Firefox、Chrome、Opera、Vivaldi etc) Part 1
Stylusの使い方 「Stylus」はウェブサイトのデザインを変更するアドオンです。 この記事ではフォントを読みやすく調整するために、インストールと基本的な使い方を説明します。 ダウンロード 各ブラウザーのアドオン配布サイトで...
アドオン[Stylus]でWebページのフォント・デザイン変更(Firefox、Chrome、Opera、Vivaldi etc) Part 2
Stylusの使用例 「Stylus」の使用例です。 インストールと基本的な使い方はこちら。 一般的なサイト用 これは私が常用しているもの。 フォントはお好みで変更してください。 body { font-family ...

 

コメント