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

PC

Stylusの使用例

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

一般的なサイト用

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

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

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

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,
.a-color-secondary,
.a-size-mini,
span {
    font-size : 1em  !important;
    font-family: "メイリオ" ;
    line-height: 1.4em !important;
    -webkit-text-stroke: 0.2px #999 ;
    }

 

Yahoo!メール

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

 

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

 

body *{font-family:initial !important ;} /* 省略部の表示が消えるのを回避 */
body {
    font-family : "メイリオ" !important ;
    -webkit-text-stroke : 0.1px #555 ;
    font-size: 1em ;
}
div#shellcontent {
    width:1000px;
}
div.msg-body.inner.undoreset  {
    font-family : "メイリオ" !important ;
    -webkit-text-stroke : 0.2px #555 ;
    font-size:1em ;
}
div.subj, .from, .date {
    font-family : "メイリオ" !important ;
    -webkit-text-stroke : 0.1px #555 ;
    font-size: .95em !important ;
    color:#000;
}

 

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

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

 

ブラウザーの文字(フォント)が見にくい・細い・汚い・薄い・かすれて見える場合の対処方法(Windows 10)
ブラウザーの文字が見にくい... ウェブブラウザーは使用頻度が高いので、見にくい文字のまま長時間使うのは目の負担になります。 下はWindows版GoogleChromeのインストール直後で何もしていない状態ですが、サイトによっては文字...
アドオン[Stylus]でWebページのフォント・デザイン変更(Firefox、Chrome、Opera、Vivaldi etc) Part 1
Stylusの使い方 「Stylus」はウェブサイトのデザインを変更するアドオンです。 この記事ではフォントを読みやすく調整するために、インストールと基本的な使い方を説明します。 ダウンロード 各ブラウザーのアドオン配布サイトで...
アドオン[Stylus]でWebページのフォント・デザイン変更 Part 3 ピンポイントでスタイルを指定する
特定のサイトやページでスタイルを適用させたい場合 特定のサイトやページだけ適用させる場合、ツールバーのアイコンをクリックして「次のスタイルを書く」からURLを指定します。 特定のサイトで文字サイズが小さくなってしまう場合など...

 

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

高速化・快適化するためのパソコン再入門 | 深月 隆寛 | コンピュータ・IT | Kindleストア | Amazon
Amazonで深月 隆寛の{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

 

コメント