ふわふわぷかぷか

javaって何?から始めた初心者のandroidアプリ開発メモ。でも最近はイラレにはまってます。

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

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

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

Stylus – Firefox 向けアドオン

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

CSSで指定します。

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

@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-

f:id:fuwafuwapukapuka:20180628234219p:plain

 

コードを入力

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

}

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

f:id:fuwafuwapukapuka:20180628234434p:plain

消えました!

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

 

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

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

f:id:fuwafuwapukapuka:20180628235405p:plain

 

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