■ファイアーフォックス（Firefox）でユーザースタイルシートを使ってみよう

このページの更新は終了しました。わたし自身が、ファイアーフォックスからシーモンキーにのりかえたからです。そんなわけで、「■ブラウザー・メールソフトのりかえ案内――シーモンキー（SeaMonkey）」、「■シーモンキー（SeaMonkey）をカスタマイズ」をどうぞ。

ファイアーフォックスには、「みため」にかかわる2つの設定ファイルが用意されています。1つは「userChrome.css」（ユーザークローム・シーエスエス）、もう1つは「userContent.css」（ユーザーコンテント・シーエスエス）。これら2つのファイルは、次のような機能を持っています。

ファイアーフォックスでは、userChrome.cssとuserContent.cssの2つのファイルをひとまとめにして、「ユーザースタイルシート」と呼んでいます。

userChrome.cssを使えば、たとえば、アクティブでないタブの文字をグレーにしたり、検索バーの虫メガネボタンを消したりすることができます。

一方、userContent.cssを使えば、たとえばこのウェブサイト（「クルミノ　コーボー」）の背景色を変えたり、ウェブサイト側で指定しているフォントを別のフォントに変えたりすることができます。

こんなふうに、便利な機能を持つユーザースタイルシートなのですが、めんどうな点もあります。

そこで、ファイアーフォックスのユーザースタイルシートをもっと便利に使うために、「スタイリッシュ」（Stylish）というアドオンを使ってみましょう。スタイリッシュを使えば、

ということが可能になるからです。

1.　「スタイリッシュ」（Stylish）をインストール

「Stylish :: Firefox Add-ons」へ行って、「Firefoxへ追加」ボタンを押してください。メッセージにしたがって、ファイアーフォックスを立ち上げなおすと、スタイリッシュのインストールが完了します。

スタイリッシュのアイコンとメニューの画像 スタイリッシュをインストールしたら、ファイアーフォックスのいちばん下にあるアドオンバーに注目してください（アドオンバーが表示されていないときは、メニューの［表示］→［ツールバー］→［アドオンバー］をクリックして、アドオンバーを表示させてください）。スタイリッシュのアイコンが表示されてますよね。このアイコンをクリックして出てきたメニューから、「みため」にかかわるいろいろな設定を行っていきます。

なお、スタイリッシュでいろいろな設定をするとき、すでにあるuserChrome.cssやuserContent.cssは、どこか別のフォルダに移動して（「コピー」ではなく）、ファイアーフォックスを立ち上げなおしておいてくださいね。

2.　スタイリッシュで、ファイアーフォックスのみためを変える

まずは、スタイリッシュで、ファイアーフォックスのみためを変えてみましょう。

メニューの［スタイルの管理］を選んでみてください。アドオンマネージャが開いて、こんな画面が表示されました。すでにユーザースタイルがあれば、ここに一覧表示されることになります。

ユーザースタイルの画像

新しいスタイルを書くときは、「新しいスタイルを書く」ボタンを押してください。そうすると、「新しいスタイル」画面が表示されます。

「新しいスタイル」の画像

「名前」の部分には、たとえば「検索バーの虫メガネボタンを消す」などと、わかりやすい名前をつけておきましょう。

「XUL名前空間を標準とする」画像 続いて、「挿入」ボタンを押して、メニューの［XUL名前空間を標準とする］を選びます。「XUL名前空間」というのは、ここに書くのはファイアーフォックスのみためを変える設定ですよ、ということを意味しています。

「@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);」という文字列が入るので、この下に、以下のように書いてみてください。ここに書いてあるものを、コピー＆ペーストしてもいいでしょう。なお、「/*」「*/」で囲まれた部分はコメント扱いになって、設定には影響しません。 

/* 検索バーの虫メガネボタンを消す */
#searchbar .search-go-button {
  display:none !important;
}

設定を書き込んだところの画像

設定を書き込んだら、下のほうにある「お試し」ボタンを押します。どうでしょう？　すぐに検索バーの虫メガネボタンが消えましたよね。あとは、「保存」ボタンを押して、設定を保存してください。

「スタイルの管理」画面に、新しいスタイルが登録されました。

登録された新しいスタイルの画像

それぞれのスタイルには、「編集」「無効化」「削除」というボタンがあります。スタイルの内容を書き換えたければ「編集」を、一時的に無効にしたいときは「無効化」を、削除したいときは「削除」を、それぞれ押せばいいでしょう。たとえば、「無効化」ボタンを押してみると、検索バーの虫メガネボタンの表示が切り替わります。こんなふうに、設定の有効／無効をかんたんに切り替えられるのが、スタイリッシュの便利なところです。

　　　　＊
スタイリッシュで、ファイアーフォックスのみためを変更する手順を、まとめておきましょう。

ファイアーフォックスのみためを変える設定は、インターネット上でたくさん紹介されています。いろいろと探してみてください。

3.　スタイリッシュで、表示しているウェブページのみためを変える

今度は、表示しているウェブページのみためを変えてみましょう。そんなことできるの？と思うかもしれませんが、もちろん、できちゃうんです。

私たちが見ているウェブページは、文書の論理的な構造（見出し・段落・引用部分・表組み……など）を指定する「XHTML」（エックスエイチティーエムエル）と、文書のみため（文字の色・文字の大きさ・行送り・上下左右のマージン・背景色……など）を指定する「CSS」（シーエスエス＝Cascading Style Sheet＝カスケーディング・スタイル・シート）――によって記述されています（CSSを使っていないウェブページもあるでしょうが、いまとなってはすくないでしょう）。

文書の論理的な構造と文書のみためが分離している（＝別々に指定されている）わけですから、スタイリッシュで文書のみため＝CSSの部分を“上書き指定”してやれば、表示しているウェブページのみためを変更できるんですね。したがって、ウェブページのみためを変更するには、XHTMLとCSSに関する基本的な知識が必要。というわけで、XHTMLとCSSについては、下記のページなどをどうぞ。

◆「クルミノ　コーボー」の背景色を変えてみる

とりあえずこのサイト、「クルミノ　コーボー」の背景色を変えてみましょう。スタイリッシュのメニューで［新しいスタイルを書く］→［このURL専用］を選んでください。

［新しいスタイルを書く］→［このURL専用］を選ぶ画像

「新しいスタイル」画面が表示されます。「名前」のところに、「クルミノ　コーボー」の背景色を変更する、などと入れておきましょう。

「新しいスタイル」の画像

いちばん上に書いてある「@namespace url(http://www.w3.org/1999/xhtml);」は、「HTML名前空間」の指定です。ここに書くのはウェブページのみためを変える設定ですよ、ということを意味しています。

次の「@-moz-document url(http://homepage1.nifty.com/akshiba/mail_web/fx_css.html) 」の部分は、いま表示しているページに適用させる、という指定。でも、どうせなら「クルミノ　コーボー」のすべてのページに適用させたいですよね。そこでこの部分を、「@-moz-document url-prefix(http://homepage1.nifty.com/akshiba/) 」と変更しましょう（太字が変更した部分です）。

「url-prefix」は、「以下のURL（ここでは「http://homepage1.nifty.com/akshiba/」）と先頭が一致するURLはすべて」という意味です。

ちなみに、「@-moz-document」には、次の3種類の指定が使えます。

それでは、背景色の指定を「{」と「}」の間、1行あいているところに書きましょう。指定のなかみは「body {background-color: #000000 !important;}」。「body」はページ全体を表すタグ、「background-color」は背景色、「#000000」は「黒」です。 

@-moz-document url-prefix(http://homepage1.nifty.com/akshiba/) {
  body {background-color: #000000 !important;}
}

設定を書き込んだところの画像

「お試し」ボタンを押してみてください。いかがでしょうか。背景色がさらにダークな（？）黒になりましたよね。

◆フォントを変えてみる

ウェブページを表示するためのフォントは利用者（具体的にはブラウザー）側が決める。つまり、ウェブサイト側ではフォントを指定しない――。これがウェブデザインのあるべき姿だと思うんですが、現実にはそうなっていません。結果として世の中には、「MSPゴシック」などというフォントを指定したサイトがあふれています。

MSPゴシックは「半角英数字・ひらがな・カタカナがプロポーショナルになっている」和文プロポーショナルフォント。私にいわせれば“きわめて読みづらい”フォントです（私自身が考える読みやすいフォントについては、このサイトのコンテンツ、「ウェブページを見やすくするフォント」をどうぞ）。読みづらいフォントは、自分が読みやすいと思う別のフォントにおきかえてしまいましょう。

「新しいスタイル」画面を表示させたら、「名前」に「MSPゴシックをおきかえる」などと入れておきます。

続いて、「挿入」→［HTML名前空間を標準とする］を選びます。「HTML名前空間」の指定が挿入されたら、次のように書きましょう。 

@font-face {
  font-family: "ＭＳ Ｐゴシック"; /* もとのフォント名 */
  src: local("メイリオ"); /* 新しいフォント名 */
}
@font-face {
  font-family: "MS PGothic"; /* もとのフォント名 */
  src: local("メイリオ"); /* 新しいフォント名 */
}
/* ついでにMS UI Gothicもおきかえる */
@font-face {
  font-family: "MS UI Gothic"; /* もとのフォント名 */
  src: local("メイリオ"); /* 新しいフォント名 */
}

設定を書き込んだところの画像

「メイリオ」の部分は、自分の好きな（もちろん、自分のパソコンにインストールされている）フォント名にすればいいでしょう。これで、MSPゴシックで表示されるはずの部分が、自分の好きなフォントで表示されるようになります。

　　　　＊
スタイリッシュで、ウェブページのみためを変更する手順を、まとめておきましょう。

ウェブページのみためを変更するには、どうしてもXHTMLとCSSに関する基本的な知識が必要になります。さきほどリンクしたページなどをごらんになるほか、実際に自分でウェブページを作ってみたりして、じっくりと研究することをおすすめしておきます。

また、たとえばグーグルなど、よく知られたサイトのみためを変更する設定については、インターネット上でたくさん紹介されています。いろいろと探してみてください。

◆表示しているウェブページのデザインをユーザーが勝手に変えてもいいのか

表示しているウェブページのデザインをユーザーが勝手に変えてもいいのか――。こんなふうに根本的な疑問を持つ人もいるでしょう。

このサイトのコンテンツ、「ざっきちょー」の「もっとみためを自由に！　ドットブック形式の閲覧ソフト『T-Time』にいいたいこと」でも指摘したように、電子データは、具体的な「かたち」を持ちません。電子データの「かたち」は、出力（アウトプット）を担当するハードウェアやソフトウェアによって変わりますし、また、自由に変えられます。

ごく単純な例をあげておきましょう。

文字の大きさを「13px」と指定したとします。この13pxは、「12.1型・1024×768ピクセルの液晶ディスプレイ」では3.12ミリ、「15型・1024×768ピクセルの液晶ディスプレイ」では3.874ミリ――という大きさになります（液晶ディスプレイの画素の大きさについては、このサイトのコンテンツ、「ざっきちょー」の「自分の目に液晶ディスプレイを合わせるために」をどうぞ）。つまり、出力しているハードウェアによって、文字の大きさはちがってしまうんですね。

「12.1型・1024×768ピクセルの液晶ディスプレイ」での13px＝3.12ミリで見やすいと思う人もいれば、それでは小さすぎる、せめて「12.1型・1024×768ピクセルの液晶ディスプレイ」での15px＝3.6ミリくらいはないと……と思う人もいます。

ウェブページを閲覧する人のハードウェア・ソフトウェアの環境はさまざまで、ウェブページを閲覧する人の好みもさまざま。しかもうまい具合に、ウェブページでは、文書の論理的な構造（XHTML）と文書のみため（CSS）は分離しています。

もちろん、ウェブページ製作者の意図はページデザインもふくめてのものだ、という意見もあるでしょう。でも、ページデザインは、ウェブページの内容（コンテンツ）をよりよく理解してもらうためのものであるはず。あからさまにいえば、デザインはコンテンツに従属するべきものでしょう。

だから私は、ユーザーにとって見づらい＝コンテンツの理解をさまたげるようなデザインは、ユーザーが自由に変えてもいい、と考えています。そもそもウェブページは、デザインを自由に変えられるのですから。となれば、文書のみためを自分の見やすいように変えることになんの問題もない、といえるのではないでしょうか。

さらにいうなら、ウェブデザインには、ユーザーによって自由に変えられるものなのだという“わりきり”（あるいは“あきらめ”）が必要なのではないか、と考えています。

4.　いろいろなユーザースタイルシートをさがすには？

いくらか堅苦しい話になったので、最後は、楽しい話題でしめくくっておきましょう。

スタイリッシュで使えるいろいろなユーザースタイルシートをさがすなら、「userstyles.org」（ユーザースタイル・オルグ）が便利です。

試しに、ファイアーフォックスの空白ページ（新しいタブを開いたときに表示されるブランクページ）を変更するユーザースタイルシートを導入してみましょう。

まずは、新しいタブで空白ページを開いておいてください。空白ページを開いたら、別のタブでuserstyles.orgに行きます。userstyles.orgの検索欄に「about blank glass」と入れて検索。検索結果のなかに「Firefox 7+ About:Blank Glass」があるので、そのリンクをクリックしてください。

「Logo」などのオプションはいじらずに（ちなみにこのユーザースタイルシートでは、メニューバーを表示していると空白ページのロゴは表示されません）、「Install with Stylish」ボタンを押してみましょう。そうすると、こんなメッセージ画面が表示されます。

メッセージ画面の画像

「お試し」ボタンを押してから、空白ページのタブに切り替えてみると……。空白ページがこんなふうに表示されました。

空白ページの画像

これでよければ、メッセージ画面にもどって「インストール」ボタンを押しましょう。

userstyles.orgには、ほかにもいろいろなユーザースタイルシートが登録されています。英語のサイトなので、ちょっとめんどうかもしれませんが、ぜひ、いろいろなユーザースタイルシートを試してみてください。