Hatena::Groupweb

vantguarde

 | 

5.24

FirefoxとFirebugの色分けを変更するユーザーCSS書いた

| 01:35

Firefox 3を常用してるので、先日もういいかなと思ってFirefox 2をアンインストールしたんですが、その時にソースコードの色分けを変更するユーザースタイルを消しちゃったんですよね。

で、めんどくさいながらもまた書いてて、ふと「Firebugのソースも色変えられないかな」と思って少し試したところできたので、とりあえず今自分が使ってるやつを公開しときますね。Stylishあたりで読み込んでください。

@namespace url(http://www.w3.org/1999/xhtml);

/*
  viewsource: #viewsource
  firebug: .nodeBox
*/

/* 基本テキスト */
#viewsource,
.nodeBox .nodeLabel {
  color: #333 !important;
}

/* PI, DOCTYPE, マーク宣言 */
#viewsource .pi,
#viewsource .doctype,
#viewsource .markupdeclaration {
  font-style: normal !important;
  color: #666 !important;
}

/* 要素名 */
#viewsource .start-tag,
#viewsource .end-tag,
.nodeBox .nodeTag {
  font-weight: normal !important;
  color: #800 !important;
}

/* 属性名 */
#viewsource .attribute-name,
.nodeBox .nodeAttr .nodeName {
  font-weight:  normal !important;
  color:  #060 !important;
}

/* 属性値 */
#viewsource .attribute-value,
.nodeBox .nodeAttr .nodeValue {
  color: #880 !important;
}

/* CDATA, コメント */
#viewsource .cdata,
#viewsource .comment {
  font-style: normal !important;
  color: #999 !important;
}

/* 実体 */
#viewsource .entity{
  color: #09c !important;
}

/* エラー */
#viewsource .error,
#viewsource .error > .pi,
#viewsource .error > .doctype,
#viewsource .error > .markupdeclaration,
#viewsource .error > .start-tag,
#viewsource .error > .end-tag,
#viewsource .error > .attribute-name,
#viewsource .error > .attribute-value,
#viewsource .error > .cdata,
#viewsource .error > .comment,
#viewsource .error > .entity {
  color: #c00 !important;
}

僕の好みに合わせてるので一部スタイルをまとめてるところがありますが、ある程度は柔軟にスタイルを変えられます。Dreamweaverみたく「特定の要素だけ色を変える」とかはできないですが。

FirebugはDOMとかCSSのタブもありますが、そっちも変更できます。CSSのclassはこんな感じでした。

.cssRule
    .cssHead
        .cssSelector
        .objectLink.objectLink-sourceLink
    .cssProp
        .cssPropName
            .cssColon
            .cssPropValue
            .cssSemi

コロンとセミコロンにまで色つけられるだなんて、、しかも別々に。

DOMの方はいろいろめんどくさそうだったのでやってないんですが、DOM Inspectorで簡単に調べられます。

  1. てきとーなページを開く
  2. Firebugを開いて、ウインドウを分離する
  3. DOM Inspectorを開く
  4. 「File」→「Inspect Chrome Document」から、分離したFirebugと同じタイトルを持つ項目を選択
  5. Inspectボタンで気になるところをクリック
  6. ノードからclassなりidなりを拾ってCSSを書く

こんな感じです。Chromeの内部も調べることができるので、DOM Inspectorはおすすめ。

というわけで、素敵なユーザースタイルライフをお楽しみください。

 | 
Contact: @vant / lepetitcroissant@gmail.com.