【087】Stylish & Greasemonkey
5855 ワード
StylishとGreasemonkeyはFirefoxの2つの比較的古典的な拡張で、前者は主にページを飾るために使われ、CSSを通じてページを美化し、どのページの美化もCSSによって完成されているので、それらの有料のテーマを死なせましょう.Greasemonkeyはさらにトーチカになって、JavaScript言語を通じてページの内部の構造を変えて、再設計して、何でもできると言って、このブログは主に私の学習過程の中の少しの総括を紹介します!またGreasemonkeyではjQueryの知識もたくさん使われています!
Stylish
1.グローバル「マイクロソフト・ブラック」フォント
2.背景色、背景画像、フォント色の変更
3.ボーダーデザイン、画像(img)でもOK!
4.ページ幅の調整
注:优酷ホームページはとてもおかしくて、下にスクロールバーがないことを保证するために、私はとても小さく缩めなければなりませんが、この时、両侧はまた空の大きいので、ずっと葛藤して、少し両侧の幅を最も适当に保つため、下にまたスクロールバーが现れて、上のコードを使って、左侧の余白を减らすことができて、それによって効果を达成します!またmarginは境界,すなわち外部,paddingは充填,すなわち内部を表す.
5.Firefoxグラデーションカラー(backgroundのみ) background:-moz-linear-gradient:線形グラデーション! background:-moz-radial-gradient:線グラデーション!
background-image:-moz-linear-gradient(top, #999999, #333333);
または
background-image:-moz-linear-gradient(center top , #999999, #333333);
background-image:-moz-linear-gradient(0deg, blue, cyan); (=left) →
background-image:-moz-linear-gradient(90deg, blue, cyan); (=bottom) ↑
background-image:-moz-linear-gradient(180deg, blue, cyan); (=right) ←
background-image:-moz-linear-gradient(270deg, blue, cyan); (=top) ↓
background-image:-moz-linear-gradient(left, red, orange, yellow, green, cyan, blue, purple); (rainbow)
background-image:-moz-linear-gradient(left, blue, white 80%, orange); (0%, 80%, 100%)
background-image:-moz-linear-gradient(left, blue, white 10%, blue 20%, white 30%, blue 40%, white 50%,
blue 60%, white 70%, blue 80%, white 90%, blue 100%);
参照:html 5+css 3のbackground:-moz-linear-gradient使い方
参照:FirefoxのLinear Gradients(線形グラデーション)-Css 3の実証
6.背景画像の追加
html部分には画像が入っていて、画像は固定されていて、画像はページ全体の後ろ~body部分で透明にしてこそ、bodyの後ろの背景を表示することができ、この部分は異なるラベルに対して透明度を設定することができます!また、bodyの背景に直接画像を挿入することもでき、以下のコードに示すように、このコードはbody部分に画像を表示するだけで、他の部分は変わらない!
Greasemonkey
1.すべてのリンクを現在のページで開くように調整
Stylish
1.グローバル「マイクロソフト・ブラック」フォント
*
{
font-family: "Microsoft Yahei" !important;
}2.背景色、背景画像、フォント色の変更
div.uname, div.handle
{
color: #00FF00 !important;
background-color: #222222 !important;
background-image: url("http://24.media.tumblr.com/tumblr_maw5xgAWmq1rytmx2o1_1280.png") !important;
}3.ボーダーデザイン、画像(img)でもOK!
div.logo div.container {
border-style: none !important;
border-radius: 7px 7px 7px 7px !important;
width: 99% !important;
}4.ページ幅の調整
body
{
margin-left: -10px !important;
margin-right: 0px !important;
}注:优酷ホームページはとてもおかしくて、下にスクロールバーがないことを保证するために、私はとても小さく缩めなければなりませんが、この时、両侧はまた空の大きいので、ずっと葛藤して、少し両侧の幅を最も适当に保つため、下にまたスクロールバーが现れて、上のコードを使って、左侧の余白を减らすことができて、それによって効果を达成します!またmarginは境界,すなわち外部,paddingは充填,すなわち内部を表す.
5.Firefoxグラデーションカラー(backgroundのみ)
background-image:-moz-linear-gradient(top, #999999, #333333);
または
background-image:-moz-linear-gradient(center top , #999999, #333333);
background-image:-moz-linear-gradient(0deg, blue, cyan); (=left) →
background-image:-moz-linear-gradient(90deg, blue, cyan); (=bottom) ↑
background-image:-moz-linear-gradient(180deg, blue, cyan); (=right) ←
background-image:-moz-linear-gradient(270deg, blue, cyan); (=top) ↓
background-image:-moz-linear-gradient(left, red, orange, yellow, green, cyan, blue, purple); (rainbow)
background-image:-moz-linear-gradient(left, blue, white 80%, orange); (0%, 80%, 100%)
background-image:-moz-linear-gradient(left, blue, white 10%, blue 20%, white 30%, blue 40%, white 50%,
blue 60%, white 70%, blue 80%, white 90%, blue 100%);
参照:html 5+css 3のbackground:-moz-linear-gradient使い方
参照:FirefoxのLinear Gradients(線形グラデーション)-Css 3の実証
6.背景画像の追加
html
{
background:url(http://www.ttdesk.com/resources/upfile/ttdesk/holiday/eerie_autumn_halloween_desktop/1366x768/15eerie15.jpg) fixed !important;
background-size:100% auto !important;
}
body
{
background:transparent !important;
}html部分には画像が入っていて、画像は固定されていて、画像はページ全体の後ろ~body部分で透明にしてこそ、bodyの後ろの背景を表示することができ、この部分は異なるラベルに対して透明度を設定することができます!また、bodyの背景に直接画像を挿入することもでき、以下のコードに示すように、このコードはbody部分に画像を表示するだけで、他の部分は変わらない!
body
{
background:url(http://www.ttdesk.com/resources/upfile/ttdesk/holiday/eerie_autumn_halloween_desktop/1366x768/15eerie15.jpg) fixed !important;
background-size:100% auto !important;
}1.すべてのリンクを現在のページで開くように調整
// ==UserScript==
// @name
// @namespace McDelfino
// @description
// @include *
// @grant none
// @version 1
// ==/UserScript==
(function(){
var links=document.getElementsByTagName('a');
for(i=0;i<links.length;i++) {
links[i].target="_self";
}
})();