最近D3.jsとかすごい面白そうで、 なのでJavaScriptを触り始めてみたところです。

Firefoxのスクラッチパッド(Shift+F4)を使ってぽちぽちやっているわけですが、 いかんせん文字が小さくて困っておりました。

— すーぱーりんぺー (@ngsw) 2014, 3月 17

— あくまねこす (@anekos) 2014, 3月 17  

さらには

— あくまねこす (@anekos) 2014, 3月 17  

というアドバイスいただきました。 正直DOM InspectorもuserChrome.cssもまじめに使ったことないです。不安。 ですがここまで教えて頂いたのに自分で調べないってのは、ちょっとなしな話です。

結論を先に。 ~/Library/Application\ Support/Firefox/Profiles/xxxxxxxx.default-123456789012345/chrome/userChrome.css を以下のように作成しました。

フォントおっきくなりました。うれしい。

どういうアプローチで確信までたどり着いたか。 まず頂いたアドバイスの意味が半分もわかっておらずでした(userChrome.cssをどこに配置するかわかっていない上に、いただいたコードもどう扱っていいのかわかっていなかった)ので、

とかした上で、出力されたファイルにたいして

してたりしました(/Applications/Firefox.app/Contents/ においては手当たり次第)。 結果的には遠回りになりましたが、 chrome://… なファイルパスをたくさん見つけることができて、以下につなげることができました。

“userChrome.css” は検索をすることで、 userchrome.css - Mozilla Firefox まとめサイトをみて理解しました。

“DOM Inspector” は検索したところ、 DOM Inspector の使い方の例 - 朝顔日記 Dom Inspector でブックマークサイドバーを開くコマンドを見つける を参考にすることができました。

  •  スクラッチパッド を開く
  • DOM Inspector を開く
  • DOM Inspector の[File]->[Inspect Content Document]->スクラッチパッド を選択
  • DOM Inspector の URL欄に “chrome://browser/content/devtools/scratchpad.xul” とある
  • DOM Inspector の左上にある「ピップエレキバンとカーソル(なんだこれ)」みたいなアイコンをクリック
  • スクラッチパッド のコード入力部をクリック
  • DOM Inspector 左ペイン上部にある、(5のアイコンの直下)表示切替アイコンからのプルダウンで[DOM Nodes]にする
  • DOM Inspector 左ペイン中央では “> DIV CodeMirror-hogehoge” みたいな状態かと思います
  • DOM Inspector 右ペイン上部(7と同じアイコンの)表示切替アイコンからのプルダウンで[CSS Rules]にする
  • DOM Inspector “chrome://browser/content/devtools/codemirror/codemirror.css” という記述あり
  • Firefox chrome://browser/content/devtools/codemirror/codemirror.css にアクセスし以下の記述を発見
1
2
3
4
5
6
7
8

/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
}
(snip)

とここまで来てようやく @anekos さんに頂いたアドバイスの意味がわかった次第です。 「スクラッチパッドのフォント大きくなった！」だけでなく、 「DOM Inspectorの使い方覚えた」というのはとても大きいです。うれしい:) @anekos さん、アドバイスありがとうございました！