アドオン[Stylus]でWebページのフォント・デザイン変更(Firefox、Chrome、Opera、Vivaldi etc) Part 2

PC

Stylusの使用例

「Stylus」の使用例です。
インストールと基本的な使い方はこちら

一般的なサイト用

これは私が常用しているもの。text-strokeで太さと色をお好みに応じて調整してください。色は#000、#111、#222 などのように変えると黒から薄いグレーまで変化します。

注: 「-webkit-text-stroke」は標準的な使用方法でないということです。
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

body {
    font-family : "メイリオ" ;
    font-size : 1em ;
    -webkit-text-stroke : 0.3px #000 ;
}
div,dd,dt,dl,p,em,li,textarea,form,input {
    font-family : "メイリオ" ;
    font-size : 1em ;
    -webkit-text-stroke : 0.3px #000 ;
}

 

メイリオを強制

* {
    font-family : "メイリオ" !important ;
    font-size : 1em !important ;
    -webkit-text-stroke : 0.2px #555 !important ;
    }

*(「ユニバーサルセレクター)は全ての要素を対象にします。

!importantはCSSの優先順位を上げて適用させます。

これらの使いすぎはお勧めできませんので、スタイルが反映しないページだけに使ってください。

アイコンが下のようになったり、特定のサイトのフォントが極端に小さくなったりしたら、上記のような設定が原因かもしれません。

 

Amazon

レビューなどの文字が小さいので大きくなるように調整。

body {
    font-size : 1em  !important;
    font-family: "メイリオ" ;
    -webkit-text-stroke: 0.2px #999 ;
    }

div,dd,dt,dl,p,em,li,textarea,form,input {
    font-size : 1em  !important;
    font-family: "メイリオ" ;
    -webkit-text-stroke: 0.2px #999 ;
    }

.review-text,
.a-size-base, 
.a-text-normal,
span {
    font-size : 1em  !important;
    font-family: "メイリオ" ;
    line-height: 1.4em !important;
    -webkit-text-stroke: 0.2px #999 ;
    }

 

背景の色や画像など無効にして文字サイズなどを強制

* {
    background-image : none !important ;
    background-color : #fff !important ;
    color:#000 !important ;
    font-size : 15px !important ;
    font-weight : normal !important ;
    font-family : "メイリオ" !important ;
}

 

コメント