Mozilla Firefox まとめサイト

使い方 編集

コレって何? 編集

各ウェブサイトの表示をコントロールできるスタイルシートで、俗にユーザースタイルシートと言われる物です。

プロファイルフォルダ直下のchromeフォルダ以下のchromeフォルダ以下に、スタイルシートの書き方に添った形で書いたファイルをuserContent.cssと（メモ帳などで）名前を付けて保存することで適用できます(その際、日本語を含むスタイルシートファイルを作る時は名前を付けて保存する際に、UTF-8というエンコード形式で保存する必要があります。)。

尚、chromeフォルダにはuserContent-example.css というサンプルファイルが最初から用意されていますので、このファイル名を変更し、-example という文字を取り除けば、すぐに利用できます。

使ってみたい 編集

上記をふまえて、以下のリンク先を回れば大体どうすればいいかわかると思います。プロファイルがどうしてもワカランチンてな人ChromEditって拡張を導入すればFirefox本体から編集できます。また、Stylishという拡張ではuserContent.css及びuserChrome.cssと同じ機能をFirefoxを再起動せずに反映(有効無効切り替え)・管理(新規、編集、削除)することができます。手軽にCSSを試してみたいという場合はJavaScript::Bookmarkletの「スタイルをテスト」というブックマークレットを使うといいかもしれません。

FirefoxはWeb標準に多く対応しています。これはWeb製作者側だけのメリットではありません。閲覧者が好きなように見た目を調節できるのです。これを機会にぜひマスターしてみましょう。

まずはHTMLとCSSのリンクです。

• 簡単で、より適切なウェブサイト作成講座
• Web Site 作成支援
• スタイルシートWebデザイン
• スタイルシートデザインを始めたい方へ-WEB工房きくちゃん-
• CSS とはなんだろうか

基本的なカスタマイズは以下をどうぞ

• Mozillaをカスタマイズする
• ユーザースタイルシートのススメ - Personnel
• GeckoユーザーのためのユーザースタイルシートTips

  時間があるなら以下で、基本的な勉強もすると吉です。Mozilla独自拡張やCSS3セレクタも使えますので、そちらもやっておくといいでしょう。

• From DFJ
• CSS 3 Selectors - W3C Candidate Recommendation 13 November 2001 の一部邦訳と使用実例

セキュリティ上の理由により、Firefox 1.0以降ではローカルの画像ファイルを指定して表示させる事はできなくなっています。

• Bug 69070 - do not allow http: documents to load images from file: via <IMG> (call checkloaduri for security)
• Bug 267248 - [GC] image added via CSS content in userContent.css is not displayed
• Mozilla 1.8 Alpha5 に関する既知の問題 - セキュリティ
• もじら組 forum - WEB上のHTMLからローカルの画像がみれなく。

関連リンク 編集

• userContent.css/広告カット
• userChrome.css
• user.js

使用例 編集

• Firefox Help: 便利な使い方
• The Extensions Mirror - userContent.css
• Mozilla的コンテンツ - userContent.css

ドメイン毎に見た目を調整 編集

ほかのサイトに影響を与えずに自分好みのスタイルを適用できます。

/* http://www.w3.org/,
   http://www.w3.org/Style/ で始まるサイト,
   mozilla.org というドメインのサイトに適用 */
@-moz-document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org) {
body { background-color: #ddf !important; }
}

新規タブの空白タブ(about:blank)の背景色を指定する 編集

/* 新規タブの空白タブ(about:blank)の背景色を指定する */
@-moz-document url("about:blank") {
	body:empty { background-color: #000000; }
}

Firefoxまとめサイト：外部リンクは下線を表示する 編集

このまとめサイトでは内部へのリンクと外部へのリンクのぱっと見の違いがありませんので、少し変えてみます。

/* 外部リンクの下線を表示 */
@-moz-document domain("firefox.geckodev.org") {
	a[rel="nofollow"] {
		border-bottom: 2px solid !important;
		border-color: #ccccff !important;
	}
}

MozillaZineフォーラムの外観調整 編集

フォントサイズを12ptに、テーブル幅が横に伸びないように調整。

@-moz-document url-prefix("http://www.mozillazine.jp/forums/"),
               url-prefix("http://mozillazine.jp/forums/") {
	.forumlink, .topictitle, .postbody {
		font-size: 12pt !important;
		line-height: 1.5em !important;
	}
	.quote {
		font-size: 11pt !important;
	}
	.name, .postdetails {
		font-size: 10pt !important;
	}
	table.forumline table[width*="%"] {
		max-width: 100% !important;
		table-layout: fixed !important;
	}
	td[class^="row"][width="100%"]>table[width="100%"]:only-child>
	tbody>tr:first-child>td[width="100%"] {
		width: 90% !important;
	}
}

Mozilla Firefox 1.5より前のバージョンの場合 編集

URIid をインストールすることにより可能です。
例

/* GOOGLE */
body#www-google-com {
background-color: #ddf !important;
}

常にスクロールバーを表示させる 編集

ページがスクロールしなくても表示できる場合、Firefoxでは必要なときにしかスクロールバーが出ません。 これを常に垂直スクロールバーを表示させるには以下の様にする。

html{overflow-y:scroll;}

水平スクロールバーを全て非表示 編集

Fx2以下 または Stylish 1.0以上

scrollbar[orient="horizontal"] { display: none !important; }

Fx0.9以上 または Stylish 0.5.9以下

*{overflow-x: hidden;}

scrollbar[orient="horizontal"] { display: none !important; }

リンクのスタイルなど 編集

新規ウィンドウ（タブ）指定のリンクのときマウスカーソルを変更する 編集

リンク上にマウスカーソルを載せたときのアイコンを変更します。

a[target="_blank"] { cursor: alias !important; }

朝顔日記「Firefox のユーザスタイルシートで背景画像指定」より

a[target="_blank"], a[target="_antenna"], a[_base_target="_blank"], a[href^="javascript"] {
cursor:url("data:image/cur;base64,AAACAAEAFBgQAAAAAADoAQAAFgAAACgAAAAUAAAAMAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8AAAAAAP///wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREREREREREREQAAEREREREREREREQAAERERESIiIiIREQAAERERESERESIREQAAEREREiEiISIREQAAEREREiEjMSIhEQAAERERIiEjMyMhEQAAERERIiERMzMiEQAAERESIiIiIzMiEQAAERESEiIiMzMiEQAAEREiEiIiIiIiEQAAERIiEiIiIiIiEQAAERIhEiIiIiEiEQAAEREREiEiEiEiEQAAEREREiEiEiEhEQAAEREREiEiEiEREQAAEREREiEiEREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREREREREREQAAEREREREREREREQAA///wAP4AcAD+AHAA/gBwAPwAcAD8ADAA+AAwAPgAEADwABAA8AAQAOAAEADAABAAwAAQAMQAEAD8ADAA/ABwAPwB8AD8D/AA/D/wAPw/8AD8P/AA/D/wAP5/8AD///AA"), pointer;
}

WDF Software Top > Firefox関連より

/* yellow */
a[target^="_blank"] {
cursor: url('data:image/cursor;base64,AAACAAEAICACAAkABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAP//AAAAAAAAAAAAAAAAAAAf4AAAH+AAAD/wAAA/8AAAf/AAAH/4AAD/+AAAv/gAAb/4AAO/+AADP9gAADbYAAA20AAANAAAADX+AAAx/gAAMf4AADH+wAAx/sAAMf7AAAAAwAAAAMAAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////wA///8AP///AD///gAf//4AH//8AB///AAP//gAD//4AA//8AAP/+AAD//gAA//4gAP//4AH//+AAP//gAD//4AA//+EAB//hAAf/4QAH/+EAB//zAAf//wAH///gB///4Af//+AH/////////////////////8='), pointer !important;
}
/* white */
a[target^="_blank"] {
cursor: url('data:image/cursor;base64,AAACAAEAICACAAkABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAf4AAAH+AAAD/wAAA/8AAAf/AAAH/4AAD/+AAAv/gAAb/4AAO/+AADP9gAADbYAAA20AAANAAAADX+AAAx/gAAMf4AADH+wAAx/sAAMf7AAAAAwAAAAMAAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////wA///8AP///AD///gAf//4AH//8AB///AAP//gAD//4AA//8AAP/+AAD//gAA//4gAP//4AH//+AAP//gAD//4AA//+EAB//hAAf/4QAH/+EAB//zAAf//wAH///gB///4Af//+AH/////////////////////8='), pointer !important;
}

メールリンクを他のリンクと区別する 編集

以下の様に設定すれば、メールソフトが立ち上がるリンクを他のハイパーリンクと区別する（前にメールマークを表示する）ことができます。

a[href^="mailto:"]:before { content: "\2709 " } 

/* あるいは、moz-iconスキームを使ってもいいでしょう
 * a[href^="mailto:"]:before { content: url("moz-icon://.eml?size=16"); }
 */

PDF ファイルへのリンクにマークを付ける 編集

ウェブブラウズ中に、PDF ファイルへのリンクを踏んでしまうと、Adobe Reader の起動に時間がかかってイライラしたり、下手をするとブラウザごとフリーズしてしまうので困りものです。

（Adobe Reader側の「環境設定」→「インターネット」→「PDFをブラウザに表示」のチェックを外せば、PDFがブラウザ上には表示されずローカルにダウンロードされます。）

Webweavers - weavin'にてPDFファイルの横にPDFアイコンをつけるやり方が書かれています。

a[href$=".pdf"]:before { content: url("moz-icon://.pdf?size=16"); }

/* Google検索の関連ページのリンクにはつけない */
@-moz-document domain("google.co.jp") {
a[href^="/search?"]:before { display: none !important; }
}

/* 拡張子を変えるだけで応用できます */
a[href$=".exe"]:before { content: url("moz-icon://.exe?size=16"); }
a[href$=".zip"]:before { content: url("moz-icon://.zip?size=16"); }
a[href$=".lzh"]:before { content: url("moz-icon://.lzh?size=16"); }


/* base64エンコードした画像を指定することも出来ます */
a[href$=".exe"]:before,
a[href$=".zip"]:before,
a[href$=".lzh"]:before {
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAB3RJTUUH1AwOFCQ7O5hthQAAAAlwSFlzAAAnEAAAJxABlGlRGQAAAARnQU1BAACxjwv8YQUAAAJhSURBVHjapZJPSFRRFMa/+95znjONkxaiiAVZQRK4qU0Lg6BFQVJiGzcRiSWIUQS5KLBNizbCVEQkQrRNRCyoFiKtIkoIgjQhJqlpZtJmct78ee++d+/tzGscB8wIunB497xzz++e850L/Odi1c6RG6o3UItxM4SiGURMN/FcOBh93M/SmwG0asdQmJHAkJR4J1wcEBzX6IrXx6Iq8k8VVNaI0k40YFbXcbjkCoHBp5fYvT8dNeLT50MW88Y0jXUpqAD9S0H1jQy9H5/QygApsH/TCj5Mnr0V2XHwalPHaViOib67dVjJ6dANCpYbVNKvAp4Lx/Nw8s0oe1HRwOOqp2FPJ+0E6oIF3B9Yxu5GDqeIdbOBkMigt+XRnepkHyAc1WKEaqFUwbeGcA63+7/g0F6rAtjXXMSDgRg6t81c2KCBa0sdyoaq+mnWADfPxBCdaobDNVzpSaDGMLDMWd0GgOASUlr+OPKpJaQXX0G6th/sDv8+FJ/1lUC4ScfCk3OkBlwlZLT91MNhw3MUmJ2kuEJy7iXajl5H7dbW0vDIOFmxbCXoR7J60i1tzk9OXCRn2BCOBCsmYGcLYHojzMh2KGeOZveDmNSadGjP/W9mKYn61iAKmVXwnJz3W/AIoBEgn8ghEG6jixeh3M+U5PhJSqwDBM/R1oaVSIPnxds1gAQBVr9xRNo7qLslKL5CIF6+fQ3EKTlPMYZs3IJtibmyiCqRjX/flfoUxM7jW2ggX2l2PytJFQBVAXpFhYyH5ILjSps981/i9GD3IJgaZYwFwJgv5t8WhfNMV5e7olNjJf8XqvVL0Mxpd9oAAAAASUVORK5CYII=");
}
/* base64エンコーダ
http://software.hixie.ch/utilities/cgi/data/data */

リンク先でも触れられていますが、Firefox 1.0以降はローカルのファイルを参照できなくなったので、その代替としてmoz-icon スキームを使っているようです。

なお、同様のことが出来るTargetAlertという拡張がありますので、めんどくさいと思う方はつかってみるといいでしょう。

はてなダイアリーのキーワードリンクを目立たなくする 編集

「ねこめしにっき - 今更ながら、はてなダイアリーのキーワードリンクは五月蠅いですね 」をご覧ください。

フォーカスリングを消す 編集

a:focus { 
-moz-outline-style: none; 
outline-style: none;
}

背景画像の固定を防止する 編集

背景画像が固定されているとスクロールが少し重くなったりして嫌な方は以下を記入してみるといいかもしれません。

html, body { background-attachment: scroll !important; }

横スクロールを防止する 編集

画像、テーブル、pre要素で発生する横スクロールをブラウザ側で強制改行する事によって回避する。

特にテーブルに関しては長いURL等によって横に伸びなくなり、可読性が増すかもしれません。

Applerの備忘録（仮）: FirefoxでOperaの「ウィンドウ幅で表示」を実現するスタイルシートより

 *:not(embed):not(applet){max-width:100%;white-space:normal;}img,[type="image"]{height:auto !important;}

エラーページの見た目を調整 編集

Firefox1.5には未対応(?)

body[onload="fillIn();"][style="font-family: message-box; font-style: ; font-variant: ; font-weight: ; font-size: ; line-height: ; font-size-adjust: ; font-stretch: ;"] a#retry{
    color: #ff0000 !important;
    text-decoration: underline !important;}

body[onload="fillIn();"][style="font-family: message-box; font-style: ; font-variant: ; font-weight: ; font-size: ; line-height: ; font-size-adjust: ; font-stretch: ;"] div#shortDesc p{
    margin: 0px !important;
    padding: 5px 0px !important;}

body[onload="fillIn();"][style="font-family: message-box; font-style: ; font-variant: ; font-weight: ; font-size: ; line-height: ; font-size-adjust: ; font-stretch: ;"] div#longDesc{
    background-color: #ddd !important;
    border: 1px dotted #000000 !important;
    margin: 0px 0px 20px 0px !important;
    padding: 0px 15px !important;
    width: 500px !important;}

body[onload="fillIn();"][style="font-family: message-box; font-style: ; font-variant: ; font-weight: ; font-size: ; line-height: ; font-size-adjust: ; font-stretch: ;"] div#shortDesc{
    color: #000000 !important;
    margin: 0px !important;
    padding: 0px !important;
    width: 500px !important;}

body[onload="fillIn();"][style="font-family: message-box; font-style: ; font-variant: ; font-weight: ; font-size: ; line-height: ; font-size-adjust: ; font-stretch: ;"] div.et_visible{
    color: #505050 !important;
    font-size: x-large !important;
    margin: 0px !important;
    padding: 0px !important;}

body[onload="fillIn();"][style="font-family: message-box; font-style: ; font-variant: ; font-weight: ; font-size: ; line-height: ; font-size-adjust: ; font-stretch: ;"] div.ld_visible{
    background-color: transparent !important;
    color: #000000 !important;
    margin: 0px !important;
    padding: 0px !important;}

リセットボタンを表示しない 編集

リセットボタンは時として、OKボタンのすぐ隣に置かれてしまうことがあり、間違えて押してしまう時があります。よくそういうことをしてしまう人は以下の様にしてリセットボタンを隠しておくと便利かもしれません。

input[type="reset"],
button[type="reset"] {
display:none }

斜体文字を太字に変える 編集

斜体文字はWindowsだと文字が荒れて見えがちです。強調は太字でとお考えなら以下をどうぞ。

i, em, dfn{
font-style: inherit; }
em {
font-weight: bold; }

音楽の垂れ流しをカットする 編集

急にMIDIやmp3が流れることが無くなります。

object[data$=".mid"],
embed[src$=".mid"],
object[data$=".mp3"],
embed[src$=".mp3"]{
	display:none !important;}

2ch系掲示板のメルアドを表示する 編集

ほとんどの2chブラウザではメールアドレスの中身を表示できますが、このユーザーCSSを適用するとほぼ同様の効果が期待できます。

dt a[href*="mailto:"]:after{
content: "[" attr(href) "]";}
dt a[href*="mailto:"][href*="age"]{
color:red !important;}
dt a[href*="mailto:"][href*="sage"]{
color:gray !important;}

2ch.netのスレッドの見た目を黒系にする 編集

上記のものに加え、スタイルシートで見た目を大幅に変えることができます。

@-moz-document domain("2ch.net") {
	body>a[href="http://ofuda.cc/"],
	body>a[href="http://ofuda.cc/"]~br,
	body>script[src="http://www.ff.iij4u.or.jp/~ch2/bohe.js"]+small,
	body>a[href^="http://be.2ch.net/inform/cm"],
	p>span[style="float: right;"],
	font[face="Arial"][color="red"]+font {
		display: none !important;
	}
	body>div[style^="border-bottom"] {
		border-bottom: 0 !important;
	}
	body,
	body>table[bgcolor="#ccffcc"],
	body>p>table[bgcolor="#efefef"] {
		color: white !important;
		background-color: black !important;
	}
	a {
		text-decoration: none !important;
	}
	a:link, a:visited {
		color: #a0a0ff !important;
	}
	a:hover, a:active {
		color: #fff080 !important;
	}
	dl {
		width: 90% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		font-size: 12px !important;
		color: white !important;
		background-color: darkslategray !important;
		border: 1px solid !important;
		border-color: gray !important;
	}
	dt {
		width: 90% !important;
		margin: 1px 0px 1px 5px !important;
	}
	dd {
		width: 90% !important;
		font-size: 16px !important;
		color: white !important;
		background-color: #446463 !important;
		border: 0 !important;
		-moz-border-radius: 20px !important;
		padding: 5px 10px 5px 10px !important;
		margin-bottom: 4px !important;
	}
	dt a[href^="mailto:"]:after {
		content: attr(href) !important;
	}
	dt a[href="mailto:sage"]:after {
		display: none !important;
	}
	dt a[href*="sage"] {
		color: lemonchiffon !important;
	}
	dt>font {
		color: gainsboro !important;
	}
	dd>br:last-child {
		display: none !important;
	}
	body>div[style^="border-bottom"] {
		position: absolute !important;
		top: 0 !important;
		height: 1.2em !important;
	}
	body>div[style^="border-bottom"] a {
		background-color: blue !important;
		color: white !important;
	}
	body>div[style^="border-bottom"] table {
		color: black !important;
	}
	body>div[style^="border-bottom"] table br {
		display: none !important;
	}
	body>font[size="+1"][color="red"] {
		position: absolute !important;
		top: 2px !important;
		right: 5px !important;
		height: 1.2em !important;
		background-color: red !important;
		color: white !important;
	}
}
@-moz-document domain("ime.st") {
	body>b:first-child+br~* {
		display: none !important;
	}
}

accesskeyやtabindexを表示してアクセシビリティを高める 編集

身体に障害を持っている方などは、以下の様にしておけばaccesskey*1やtabindex*2を文字の後に表示するので、使い勝手が増すでしょう。

ただ、現状はそのような設定がなされているところが少ないのが欠点かもしれません。

 *[accesskey]:after { content: " {" attr(accesskey) "}" }
 *[tabindex]:after { content: " [" attr(tabindex) "]" }

使うつもりが無いフォームを非表示にする 編集

最近様々なサイトで見かけるweb拍手とかお気に入りに追加とかドメイン内検索とかを非表示にします

 *[onclick*="null; [action*="clap.cgi"] input,
form[action="http://www.infoseek.co.jp/Titles"] *,
form[action="http://search.yahoo.co.jp/bin/search"] *,
form[action="http://search.tok2.com/j.php"] + *,
form[name="aaasearch"],
select[name="selLink"][onchange="LinkSelect(this.form, this)"] {
display:none;}

フォームコントロールのフォントを変えたい 編集

基本となるCSSがインストールフォルダ\res\forms.css で定義されているので, 変えたい部品のCSSをuserContent.cssにコピーして変更すればいい。