Stylusの使用方法パソコン環境でデザイン変更

CSSを変更するStylusの使用方法を実例を用いて説明します。

INDEX

Stylusのインストール

次のサイトに行って、ブラウザにStylusをインストールします。
Stylus - Chrome ウェブストア
Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。
chromewebstore.google.com
chromeに追加をクリックします。(Edgeの場合は許可の確認画面が表示されます。)
※Firefoxをご利用の場合はこちらから追加してください。
拡張機能を追加をクリックします。すると、Chromeにインストールされます。
ブラウザ右上にあるパズルピースのようなマークをクリックします。(Edgeでは白抜きのパズルピース)
以下のような画面が表示されますので、Stylusの右のピン(Edgeでは) をクリックして青に変更してください。

Chrome Edge
下のような画面右上(パズルピースのようなマークの左横)にSのマークが表示される画面になればインストール成功です。

Chrome Edge

今回は背景色を白(#ffffff)に変更します。白以外にする場合は#fffffffの部分を変更してください。

色については下にある色サンプルを参考にしてください。

なんでもよいのでプライムビオをブラウザで再生し、ブラウザ右上のSのマークをクリックします。
表示されているアドレス(「次のスタイルを書く」の下)の amazon の部分をクリックします。
次のような画面が表示されます。
コード記入欄に以下を記入します。(コピペでよいです。)
scalingVideoContainerの前の . の付け忘れ、{と}による囲い忘れにご注意ください。
```
.scalingVideoContainer {
background-color: #ffffff !important;
}
```
左側の保存をクリックします。ブラウザのウィンドウを小さく表示している場合は左側に表示されませんので大きく表示してください。
以上で終了です。変更内容が反映されます。
編集、削除する場合は右上のSのマーク、管理、amazon.co.jp の順でクリックしておこなってください。左のチェックボックスで一時的に適用をオフ。右側のペンマークをクリックすると編集画面(手順4の画面)が表示されます。