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

2019年9月15日

Stylusの使用例

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

一般的なサイト用

これは私が常用しているもの。
フォントやフォントサイズ等はお好みで変更してください。

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

文字サイズ

文字サイズは em で指定すると相対サイズ、ピクセル(px)で指定すると絶対サイズになります。% は親要素に対しての相対サイズになります。
サイズ調整がうまくできない場合は変更してみてください。
例:

font-size : 16px ; font-size : 110% ;

文字の太さ

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

-webkit-text-stroke : 0.1px #333 ;

注: 「-webkit-text-stroke」は標準的な使用方法でないということです。

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

メイリオを強制

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

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

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

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

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

Amazon

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

/* 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-size-small,
.a-link-normal,
.a-text-normal,
.a-color-secondary,
.a-size-mini, span {
    font-size : 1em  !important;
    font-family: "メイリオ" ;
    line-height: 1.4em !important;
    -webkit-text-stroke: 0.2px #999 ;
    }
div.cr-lighthouse-terms {
    font-size: .8em !important ;
    line-height: 1em !important ;
}
.label, .value {
    font-size: 1em !important ;
}
span.a-size-small {
    font-size: 1em !important ;
}

Yahoo!メール

正直、このままではとても読む気にならない汚いフォント...

変更後。メール表示欄の幅も広げています。

/* Yahoo!メール */

/* 省略部の表示が消えるのを回避 */
body *{font-family:initial !important ;} 

/* 全体の設定 */
body {
    font-family : "メイリオ" !important ;
    -webkit-text-stroke : 0.1px #555 ;
    font-size: 1em ;
}

/* 幅の設定 */
div#shellcontent {
    width:1000px;
}

/* メッセージ一覧 */
div.subj, .from, .date {
    font-family : "メイリオ" !important ;
    -webkit-text-stroke : 0.1px #555 ;
    font-size: .9em !important ;
    color:#000;
}

/* メッセージ本文 */
div.msg-body.inner.undoreset  {
    font-family : "メイリオ" !important ;
    -webkit-text-stroke : 0.2px #555 ;
    font-size:1em !important ;
}

サイト内のStylus関連記事

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

 

Ads