PC-More

パソコンの基本操作や使い方、便利化、カスタマイズ方法、フリーソフト等の紹介。

Google Chrome でユーザースタイルシートを適用する

Google Chromeでユーザースタイルを適用する方法です。

Stylus」というアドオンを使った方法です。

追加(インストール)

こちらのChrome ウェブストアの「Stylus」のページを開きます。

又は、Chrome ウェブストア内の検索窓で「Stylus」を検索して、Stylusのページを開きます。

Chromeに追加」をクリックします。

確認が出るので、「拡張機能を追加」をクリックします。

しばらく待つと、追加された旨のポップアップが出るので、右上に付いている「×」をクリックしてポップアップを閉じます。

ブラウザ画面の右上に追加された、「S」のようなボタンをクリックします。

管理」をクリックします。

左の欄で、「新スタイルを作成」をクリックします。

左の欄で、任意の名前を入力します。(「全サイト用」「Yahoo用」「Yahooトップページ用」等。)

右の欄の大きな入力欄に、目的のスタイル(CSS)を記述します。

注意点は、なるべく値の最後に「 !important」を付けてください。そのスタイルが適用されやすくなります。例えば、以下のような感じです。

* { font-weight: bold !important; }

* {
font-weight: bold !important;
}

記述したら、左の欄の「保存」をクリックします。

特定のサイトやURLだけにスタイルを適用したい場合は、スタイルを記述する欄の下にある「適用先」の右にある「+」を押し、以下のように設定します。

https://example.com/aaa.html」というURLのみを指定する場合
URL」 「https://example.com/aaa.html
https://example.com/」が頭に付くURLを指定する場合
次で始まる URL」 「https://example.com/
example.com」ドメインの全サイトを指定する場合(「aaa.example.com」等)
ドメイン上の URL」 「example.com
どこかに「aaa」を含むURLを指定する場合
正規表現に一致する URL」 「.*aaa.*
aaa」で終わるURLを指定する場合
正規表現に一致する URL」 「.*aaa

URLの条件は、右端の「+」で追加、「-」で削除出来ます。

スタイルの反映は、左の欄の「有効」と「自動プレビュー」にチェックが入っていれば、スタイルを記述した時点でリアルタイムに行われます。念の為に「保存」をクリックしても良いでしょう。

目的のWEBページを開き、正しくスタイルが適用された事が確認出来たら、左の欄の「保存」をクリックし、設定画面を閉じます。

スタイルの再編集

ブラウザ画面の右上Stylusの「S」ボタン
→ 「管理
右の欄スタイル名
の順にクリックします。

右上に「S」ボタンが無い場合は、
ブラウザ画面右上の「 」ボタン(メニューボタン)
→ 「その他のツール
→ 「拡張機能
→ 「Stylus」の左下にある「詳細
→ 下の方にある「拡張機能のオプション
→ 下にある「スタイル管理
→ 右の欄のスタイル名
の順にクリックします。

ローカル(PC上)のファイルにもスタイルを適用する

ブラウザ画面右上の「 」ボタン(メニュー)
→ 「その他のツール
→ 「拡張機能
→ 「Stylus」の左下にある「詳細
→ 下の方にある「ファイルのURLへのアクセスを許可する
をクリックして、オンの状態にしてください。

スタイルの削除

ブラウザ画面の右上Stylusの「S」ボタン
→ 「管理
右の欄のスタイル名の右端にある「×
→ 「削除
の順にクリックします。

右上に「S」ボタンが無い場合は、
ブラウザ画面右上の「 」ボタン(メニューボタン)
→ 「その他のツール
→ 「拡張機能
→ 「Stylus」の左下にある「詳細
→ 下の方にある「拡張機能のオプション
→ 下にある「スタイル管理
→ スタイル名の右にあるごみ箱のマーク
→ 「削除
の順にクリックします。