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

2018年9月17日2021年8月7日

Contents

1. Stylusの使用例
- 1.1. 一般的なサイト用
  - 1.1.1. 文字サイズ
  - 1.1.2. 文字の太さ
- 1.2. メイリオを強制
2. サイト別の使用例

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の優先順位を上げて適用させます。

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

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

サイト別の使用例

サイト毎に違うコードを使用する場合は、アイコンをクリックして「次のスタイルを書く」から作成します。

そのドメイン全体に適用したい場合、「youtube.com」等のドメイン名を入力し、「ドメイン上のURL」を選択します。

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 ;
}

YouTube

全体と、コメントやチャット欄を調整。

body {
    font-family: "メイリオ" ;
    -webkit-text-stroke: 0.3px #000 !important;
    font-size : initial;
}
h1, h2, h3, h4, h5, h6  {
    font-family: "メイリオ" !important;
}
div,dd,dt,dl,p,em,li,textarea,form,input {
    font-family:"メイリオ" ;
    -webkit-text-stroke: 0.3px #000 !important;
}
/*コメント欄*/
div#container .style-scope {
    font-size:1em ;
}
div#contents .style-scope {
    font-size:1em ;
}
div#info .style-scope {
    font-size:1.03em ;
}
div#top-level-buttons .style-scope {
    font-size:.88em ;
}
#author-text span.style-scope {
    font-size: 1.2em ;
}
/* チャット欄 */
div.yt-live-chat-ticker-renderer *{
    color:#fff !important ;
    -webkit-text-stroke: 0.5px #fff !important ;
}
div.yt-live-chat-paid-message-renderer *{
    color:#fff !important ;
    -webkit-text-stroke: 0.5px #fff !important ;
}
span#author-comment-badge a{
    font-weight:bold !important ;
    -webkit-text-stroke: 0.3px #fff !important ;
}
#search-input.ytd-searchbox-spt input {
    background-color:#fff;
    color:#000 !important;
    font-family :"源ノ角ゴシック Code JP";
    font-weight:300;
    -webkit-text-stroke: 0 !important ;
}
/* タイトル */
div#info .style-scope {
        font-size: 1em ;
}