Stylusでサイトの見た目を変える。

とあるサイトのとあるページの色を変えたい出来事が起きたので、firefoxのアドオンの「Stylish」を使ってみました。が、突然効かなくなったので、「Stylus」に変えました。やり方は同じです。

Stylish - Custom themes for any website – Firefox 向けアドオン

Stylus – Firefox 向けアドオン

特定のURLやドメインのページの色を変えたり、ある部分を非表示にしたりできます。

CSSで指定します。

コード１の中にこんな感じで書きます↓

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("ドメイン") {

変更内容    

}

 idで指定：#ID{内容}

クラスで指定：.クラス{内容}

divで指定：div[一致箇所]{内容}

 非表示にする：{display: none !important;}

背景色を変える(白)：{background-color:#ffffff;}

文字の色を変える(白)：{color:#ffffff;}

例えば、このページのボーダー部分を消してみます。

Shy*'-'*tter：めもらば-Memory Lovers-

コードを入力

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("fc2.com") {
    
#shytter{display: none !important;}

}

 保存するとすぐに反映されます。

消えました！

色々変更できるので使いこなせたら楽しそう！

要素のidを調べたい場合、そのページを開いてF12を押すと簡単に調べられます。

インスペクターの左の矢印をクリックしてから調べたい場所をクリック。計算内容で詳しく表示。

Stylishの細かい使い方は、以下のサイトが参考になりました。

自由にデザインが変えれるブラウザ拡張「Stylish」のご紹介 | みきのお家

今回作ったのはこれです↓ドキッとしてしまう方使ってください。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("ac-illust.com") {
    
#remodal-header{display: none !important;}
div[data-remodal-id="confirm-copyright-modal"] {background-color:#ffffff;}
h1{display: none !important;}
#exec-upload {background-color:#A7BCDB;}
[data-remodal-id="confirm-copyright-modal"] .remodal-cancel {background-color:#B2B1AD;}
}

↓ファンを消したくない場合（ちょっと消えすぎちゃいます）。

.cf.fan-data p a{display: none !important;}