Tuesday, December 16, 2008

Firefox の新規blankページをカスタマイズ

カスタマイズと言ってもスタイルを適用するくらいですが。


できること

 背景色の変更や画像の表示ができます。
こちらのページ(FireFoxの空白ページを彩る「Dark Firefox」: DesignWorks)にあるようなものを全く一切の拡張機能なしで実現する方法を提案。
対応: Fx2 ~
(画像表示に対応しているのは2.0からでした)
一部拡張機能と競合します。Speed DialAuto Dial などをインストールした状態では効果はありません。

ユーザスタイルシートの利用

 具体的なやり方については、Fxのユーザスタイルシートを使います。

サンプルコード

@-moz-document url("about:blank") {
html {}
body {
margin: 0;
width: 100%;
height: 100%;
background: #000000
center no-repeat fixed;
background-image: url(chrome://branding/content/icon64.png); /* For Fx2 */
}
x:-moz-broken,
body {
background-image: url(./icon64.png); /* For Fx3 */
}
}
画像を配置する場合は、Fx3 ではchrome:// 以下にアクセスできない替わりにユーザスタイルシートからの相対パスが使えるので、<Profileのディレクトリィ>/chrome に画像をバンバン置きましょう。
Fx2 の場合は、相対パスが使えない替わりに chrome:// にアクセスできるので browser.jar の中に入れてしまいましょう。
表示サンプル

テキストを表示させる

 スタイルシートのみのカスタマイズですので、ページのコンテンツそのものは書き換えられないのですが、テキストを表示したい、というときは :before 擬似要素や :after 擬似要素を用いることでテキストの表示ができます。
@-moz-document url("about:blank") {
body {
margin: 0;
width: 100%;
height: 100%;
font-family: Verdana, Helvetica, sans-serif, Arial;
}
body:before {
content: "about:blank";
font-size: 140px;
font-weight: bold;
color: #ccccccc;
cursor: default;
}
html:after {
content: "Designed by Akanasu.c";
display: block;
height: 30px;
margin-top: -50px;
text-align: right;
font-size: 30px;
font-weight: bold;
color: #555555;
cursor: default;
}
}

表示サンプル

応用として

 html 要素と body 要素にそれぞれ別の背景画像を指定することでちょっと複雑な表現も可能です。

参考

Template Design. 2008 Jyun.