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

2020年7月26日

「Stylus」はウェブサイトのデザインを変更するアドオンです。
この記事ではフォントを読みやすく調整するために、インストールと基本的な使い方を説明します。

Stylusのインストール

ダウンロード

各ブラウザーのアドオン配布サイトでStylusのページを開き、追加します。
追加するブラウザーでアクセスしてください。

Chrome、Vivaldi ↓

https://chrome.google.com/webstore/search/stylus?hl=ja

Firefox　↓

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

インストール（Google Chrome）

ここではChromeで説明しますが、他のブラウザーでも基本的に同じです。

「Chromeに追加」をクリック

「拡張機能を追加」をクリック

追加されたアイコンをクリック

「管理」をクリック

コード欄にコードを記入して保存をクリック

コードによってはStylusの管理画面にも反映します。

Stylusの管理画面

Stylusのコード欄のフォントが読みにくい場合は以下のようにします。

1．「新スタイルを作成」をクリック

2．スタイルの名称、コードを入力し、「有効」にチェックを入れて保存

Stylus管理画面用コードの例
コード欄は「源ノ角ゴシック code JP」がお勧め（インストール方法はこちら）

/* Stylus管理画面 */
.CodeMirror div{
    font-family: "源ノ角ゴシック code JP" ;
    font-size : 1em ;
    font-weight : 300 ;
}

スタイルを適用後。

コードの例

汎用コード

以下のコードは私が一般的なサイトに使っているものです。
とりあえずこれを使ってみると、どのように変わるかわかると思います。
サイトによってはフォントや文字サイズを変更すると表示が重なって見えなくなるなどの副作用が出る場合もあります。その場合はサイト毎に調整します。

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 : "メイリオ", Meiryo, "源ノ角ゴシック Code JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Verdana, Arial, Tahoma, sans-serif ;

次回は具体的な使用例です。


[PR] パソコン操作をもっと速く楽にするため小ネタ満載
￥500（Kindle Unlimitedは無料）
高速化・快適化するためのパソコン再入門 Kindle版
150章/369ページ￥500(税込)(Kindle Unlimitedは無料)
深月 隆寛（著）
Amazon

ブラウザー,快適化フォント,ブラウザー

Posted by みつき