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

PC

 

スポンサーリンク
スポンサーリンク

Stylusの使い方

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

ダウンロード

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

Chrome、Vivaldi ↓

Chrome ウェブストア
Google Chrome のすばらしいアプリ、ゲーム、拡張機能、テーマをぜひご利用ください。

Firefox ↓

Stylus
Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

 

インストール(Google Chrome)

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

 

「Chromeに追加」をクリック

 

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

 

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

 

「管理」をクリック

 

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

 

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

 

コードの例

以下のコードは私が一般的なサイトに使っているものです。
とりあえずこれを使ってみると、どのように変わるかわかると思います。

 

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

 

Part2はこちら ↓

アドオン[Stylus]でWebページのフォント・デザイン変更(Firefox、Chrome、Opera、Vivaldi etc) Part 2
Stylusの使用例 「Stylus」の使用例です。 インストールと基本的な使い方はこちら。 一般的なサイト用 これは私が常用しているもの。text-strokeで太さと色をお好みに応じて調整してください。色は#000、#111、#...

 

コメント