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

ブラウザー

 

Stylusの使い方

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

ダウンロード

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

Chrome、Vivaldi ↓

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

Firefox ↓

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

 

インストール(Google Chrome)

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

 

「Chromeに追加」をクリック

 

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

 

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

 

「管理」をクリック

 

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

 

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

 

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

 

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

 

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

 

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

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

 

スタイルを適用後。

 

コードの例

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

 

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

 

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

 

 

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

 

コメント