ユーザスタイルシートによるカスタマイズ(1)

2007年1月14日(日) 18時1分 by level
B ?

この記事は、Software Design 2007年1月号に掲載された拙著「Firefox 2 カスタマイズガイド」の一部を加筆修正したものです。

ユーザスタイルシート(userContents.css と userChrome.css)を用いてウェブページや Firefox 本体の見た目を変更することができます。

また、Stylish という拡張機能を用いると、ユーザスタイルに名前をつけて個別にオン/オフの切り替え、編集など、ユーザスタイルを簡単に管理できるようになります。

もくじ

ユーザスタイルシートとは

ユーザースタイルシートとは、ウェブページまたは Firefox 本体のデザインに適用するためのユーザが定義するスタイルシートです。記述形式は通常のウェブページで使用する CSS ですが、一部 Firefox で独自拡張した機能も使用できます。

ユーザスタイルシートはプロファイルフォルダにある chrome フォルダの userContents.css(ウェブページ用)と userChrome.css(Firefox 本体用)に記述します。デフォルトではこれらのファイルは存在しないので、それぞれ userChrome-example.css と userContents-example.css をリネームして使用してください。また文字コードは UTF-8 とします。編集後、Firefox を再起動すると変更内容が反映されます。

なお、後述する拡張機能 Stylish を使うと、ユーザスタイルシートの管理を簡単に行うことできます。

メニューの削除とフォント設定

Firefox 本体の見栄えを変更するには userChrome.css を編集します。以下の例は、履歴メニューを非表示にし、残りのメニューのフォントサイズを10pxに変更するものです。

menu[label="履歴"] { display:none !important; }
menu { font-size:10px !important; }

ストップ/リロードボタンを統合

Opera のように、ストップボタンとリロードボタンを統合する設定です。これも userChrome.css に記述します。ただ、これだけではボタンの切り替え時に表示が乱れるので、ストップボタンとリロードボタンのボタンの並びをデフォルトとは逆にしておく必要があります(こちらのページを参考にしてください)。

#stop-button[disabled="true"] { display:none; } 
#stop-button:not([disabled]) + #reload-button { display:none; }

サイドバーを右に配置する

通常は左側に表示されるサイドバーを右側に表示します。

#browser {
-moz-box-direction: reverse;
}

アクティブなタブを目立たせる

アクティブなタブを目立たせる Firefox 2のデフォルトテーマは、従来のものと比べてアクティブなタブが目立ちにくいという難点があります。一部のユーザには不評なタブの赤い閉じるボタンがアクティブなタブの視認性の向上に役立っているというのは皮肉なことです。そこで、アクティブなタブの表示を少し変更してみましょう。以下の設定はアクティブなタブの幅を広くし、フォントのサイズと色を変更する userChrome.css 用の設定です。好みに合わせてカスタマイズしてみてください。

@-moz-document url("chrome://browser/content/browser.xul") {
 tab[selected="true"] {
  min-width: 300px !important;
  font-size: larger;
  color: blue;
 }
 tab:not([selected="true"]) {
  max-width: 175px !important;
 }
}

このスタイルは Single tab widener plus | userstyles.org を参考にしました。

ウェブページの表示を変更するには UserContents.css に記述します。以下は userContents-example.css 内で例として取り上げられている、blink 要素(点滅するテキスト)と marquee 要素(横に流れるテキスト)の効果を無効にする記述です。これらの設定は全てのウェブページに適用されます(グローバルスタイル)。

blink { text-decoration: none ! important; }
marquee { -moz-binding: none; }

Gmail の本文を等幅フォントに

一方、特定のサイトだけにスタイルを設定することも可能です(サイト別スタイル)。一例として Gmail の本文表示を等幅フォントで表示するスクリプトを示します。この例ではスタイルを適用する対象を mail.google.com ドメインに限定しています。

@-moz-document domain(mail.google.com) {
 div.mb { font-family: monospace; }
 div.mb { font-size: 100% !important; }
}

サイト別スタイルの設定方法

サイトの指定方法は以下に示すように3通りが用意されています。@-moz-document の後にこれらをカンマで区切って複数指定することができます。なお、この記法は Firefox 独自の機能であることに注意してください。

URLが完全に一致url(http://www.example.com/index.html)
URLの先頭が一致url-prefix(http://www.example.com)
ドメインが一致domain(example.com)

ユーザスタイルシートによるカスタマイズ(2) - Stylish

最終更新: 2007年5月21日(月) 21時41分

コメント

コメントはありません。

トラックバック

トラックバックは検索対象外です。