Firefox で見るソースを見易くする 【userContent.css】
- Date
- 2005-11-14 T20:51:00+09:00
- Category
- Tags
- Reactions
Firefox の view-source で見るソースが至極見辛いのが不満でした。既定の CSS 書いたヤツ出て来い、と言いたいほど見辛い（まあ、好みだが）。
解決策の1つとして、view-source ではなく任意のエディタを起動させる方法がある。IE で、窓の手で設定したりレジストリを弄ったりするに相当する方法ですね。Firefox の場合は拡張を使うと出来るみたいです。と、一応知識として持ってはいるが、実際に拡張を入れたこともないし詳しく調べたこともない。この程度で拡張を頼るのは、 CSS で外観を弄れる Firefox 使いっ子としては邪道だ！…と力説するような信条はもっていませんが、折角 CSS に活躍の場が与えられているのだから早々に拡張に走るのは気が引ける。もっと出来る子のはずなの、Firefox は。
と、時に思いながら過ごす中で、hail2u.net - Weblog の FirefoxのuserContent.cssネタを公開された当初読んでいたはずなのに、先ほど読み直して衝撃を受けた。「(Firefox home)/res/viewsource.css」に設定ファイルが置いてあったことに気付かなかったんだな、と。低レベル。
ここまで読んで違和を感じた方がいらっしゃるかも。view-source に表示されるソースの見た目を弄るのは、「Firefox の外観を弄る」のとは違うのですね。「ページの表示を CSS で制御する」のが正しい。kyoさんのエントリーのタイトルが userContent.cssネタ
であることを、もっと気に留めるべきでした。迷うことなく userChrome.css に書くも、うんともすんとも云わない Firefox 。「ああ、1.5 まで待たなければならなかったんだな！」と見当違いの原因を作り出す私。1.07 が「馬鹿なのはお前だ」と言っている。
このエントリーを書くまで気付かなかったので、 (Firefox home)/res/viewsource.css を直接弄ってしまった。利点としては、再起動しなくても即反映されたソースを見れることですが、誤爆する可能性は極めて低いので userChrome.css に書いておいた方が無難でしょう。いや、拡張を通して userChrome.css・userContent.css を書いているから再起動が必要なだけで、直接ファイルを書き直す場合は不要かもしれない。
一番調節したかったのはフォントサイズ。デフォルトは font-size を定めていないので私には大き過ぎた。一文字一文字じっくり吟味する必要はないので、多くの情報量が目に入る小さめのフォントの方が好都合。
他、配色のけばけばしさも気になっており、特に見た目が好みの ezHTML っぽくしてみました（性能も好き）。
なお、デフォルトの viewsource.css は参考になるので、直接弄る為ではなく目を通す為に開いておくのが良いかと思います。見ての通り、クラスが程よくふってあるので閲覧目的には十分耐えます。どこで出てくるのか分からないようなクラスもありますが、それはお目にかかれた時の楽しみだと捉えておきましょう。
以下、userContent.css に
body#viewsource {
font-family:'MS Gothic', monospace !important;
font-weight: normal !important;
color: #333 !important;
line-height:140% !important;
font-size:12px !important;}
body#viewsource .start-tag,
body#viewsource .end-tag {
color: #00468C !important;
font-weight: bold !important;}
body#viewsource .comment {
color: #888 !important;
font-style: normal !important;}
body#viewsource .doctype {
color: #0E8D2B !important;
font-style: normal !important;}
body#viewsource .attribute-name {
color: #663333 !important;
font-weight:normal !important;}
body#viewsource .attribute-value {
color:#00468C !important;
font-weight: normal !important;
}ソースを表示すると、上の画像のようなスタイルになります。たぶん。
行の折り返しをおこなう
もう1つソース関連で手を加えた方が吉、の設定があるのでついでにご紹介。デフォルトでは折り返されず読む気をなくさせるソースの表示を、折り返させます。ただ、エディタのような折り返しではないので、横スクロールバーが出ることがあります。
方法は簡単。 about:config とロケーションバーで叩いて、view_source で絞り込む。view_source.wrap_long_lines をダブルクリックし true に変更。これで折り返しが有効になります。
これで1つ、 Firefox の好みでない点を潰せました。
訂正 at 2005-11-27T17:05:29+09:00
!important が必要でした。
