Firefox でページのソースを表示すると、こんなようなウィンドウが表示されますよね。
Web サイトの開発をしていると、Firebug の次くらいにこの画面をよく見るのですが、あまり見ていて気持ちのいい配色ではないので、ここのデザインを変えてしまおうと思います。
まずはページのソースを表示したときに表示される、HTML ソースが書かれたページを、Firefox のウィンドウの中に表示してみます。
アドレスバーにview-source:に続けて好きな URI を入力してみてください。
例えば Mozilla Developer Network のソースを表示する場合、次のように入力します。
Firefox のウィンドウ内に表示できてしまえば、あとは Firebug などで要素を調査して、スタイルシートを書いていくだけですね。
このページにはどうやら次のスタイルシートがあたっているようです。
これもアドレスバーに入力すれば、開いて確認することができます。
見慣れない表現がいくつかありますけど、そこは無視して、文字の表示に関する部分だけ上書きしていきましょう。
各 class が何を表すのかを表にしてみました。
| class 名 | 意味 | 例 |
|---|---|---|
| .start-tag | 開始タグの要素名 | <div> |
| .end-tag | 終了タグの要素名 | </div> |
| .comment | コメント | <!-- ほげ --> |
| .cdata | XML の CDATA | <![CDATA[ ほげ ]]> |
| .doctype | ドキュメントタイプ宣言 | <!DOCTYPE html> |
| .pi | XML 宣言と Processing Instructions | <?xml version="1.0"?> |
| .entity | 文字実体参照 | |
| .text | 不明 | |
| .attribute-name | 属性の名前 | href |
| .attribute-value | 属性の値 | text |
| .markupdeclaration | 不明 |
思い付くパターンを含んだソースをいくつか表示させてみたんですけど、.textと.markupdeclarationは出現せず、何を表しているのかわかりませんでした。
というわけで、これらの class それぞれに色を設定しつつ、フォントの種類やサイズ、行間などを調整してみたのがこちら。
今回僕は、上書きする CSS を Stylish を使って書きましたが、userContent.cssに書く方法でも大丈夫です。
この CSS では!importantしていないのですが、もし他のスタイルが優先されてしまうようなら!importantを付けてみて下さい。
表示してみると、このようになりました。
■ 追記 (2018/01/24)
Firefox Quantum では Stylish などのアドオンから view-source のような Firefox 内部のページに干渉できなくなったようなので、userContent.css を使う必要があります。
また、それでもスタイルが適用されない場合は、ソースコードを表示している状態で右クリックし、「構文を強調表示」のチェックを外してみてください。
