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

2019年8月19日

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のコード欄のフォントが読みにくい場合は以下のようにします。

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

 

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