忍者ブログ

上田用保管庫

Home > ユーザーCSS > ユーザーCSSを使う方法(OS別)

ユーザーCSSを使う方法(OS別)

CSS=Cascading Style Sheetsの略。
特定のウェブサイトを見やすくカスタムしたい人向け。
2023/12/16 Android版Firefoxを追加

ブラウザに拡張機能「Stylus」をインストール

使ってるブラウザに合わせて選んでください。
Chrome以外のブラウザでもChromiumベースのブラウザだとChromeの拡張機能を使えるものもあります(バージョン83以降のMicfosoft EdgeVivaldiなど)

※過去に似たような機能を持つ「Stylish」があり有名だったため古いサイトだと紹介している所が多いですが、閲覧履歴を収集していた事が発覚した危険性の高い拡張機能なのでもしインストールしている人がいたら削除するのをお勧めします。

ChromeでStylusを使う(Windows)

拡張機能Stylusをインストールする。
ユーザーCSSを使いたいサイトを開いておく。
ブラウザのアドレスバーの右側にある「Stylus」アイコンをクリック。「次のスタイルを書く」にチェックを入れ、その下にあるURLをクリック。
「Usercssとして」にチェックを入れ「アクション>新スタイルを作成」をクリック。
使いたいユーザーCSSのコードをコピーして「  /* ここにコードを挿入... */」の部分にペーストする。
タイトル(左上にある細長い長方形の欄)に自分が分かりやすいタイトルを入力。
タイトル下の「有効」にチェックが入ってるのを確認。
「保存」ボタンクリックで設定終了。

※もしCSSを使いたくなくなったら該当サイトを開きStylusアイコンをクリックし、上の方にある使用中のユーザーCSSの項目のチェックを外してください。

※別な端末でも同じユーザーCSSを使いたい場合は「Stylusアイコンをクリック>管理>バックアップ>エクスポート」でStylusの設定ファイルを保存し、別な端末で「Stylusアイコンをクリック>管理>バックアップ>インポート」から読み込んでください。
(Stylusの設定ファイルは定期的にバックアップしておくのをお勧めします)

FirefoxでStylusを使う(Windows)

拡張機能Stylusをインストールする。
ユーザーCSSを使いたいサイトを開いておく。
アドレスバーの右にある拡張機能アイコン(パズルのピースのようなアイコン)をクリックし、Stylusをクリック。「次のスタイルを書く」にチェックを入れ、その下にあるURLをクリック。

あとはChromeの「『Usercssとして』にチェックを入れ~」以降と同じ。

Androidでユーザースタイルシートを使う

FirefoxKiwi BrowserでChrome用のStylus拡張機能(アドオン)を入れて使いましょう。
詳しくは拡張機能が使えるブラウザまとめ(OS別)記事をどうぞ。
拡張機能の使い方は基本的にWindows版と同じです。

iOSでユーザースタイルシートを使う

現在ユーザースタイルシートを使う手段は無いようです。

ユーザーCSSを自分好みにカスタムする

・フォントの色を変更したい場合はこちらのサイトで変えたい色のカラーコードを調べて「color:」の右にあるコードを書き換えてください
WEB色見本 原色大辞典 - HTMLカラーコード

・フォントの太さを太くしたい場合は「font-weight:」の右にある「normal」を「bold」に書き換えてください。

・もっと他の部分をカスタムしたい人はCSSのリファレンスサイトを調べて参考にしてみてください。そんなに難しくないです。

コメント

コメントを受けつけておりません。

プロフィール

ユーザーネーム:
上田
Webサイト:
メールアドレス:
Gmail「uedananka」

ブログ内検索


PR