userContent.css を編集してGmail の本文を等幅フォントで表示

gmail firefox

Gmail の本文を等幅フォントで表示するTip。bowz weblogより。

Gmail の本文を等幅フォントで表示する

userContent.css に以下のスタイルシートを追加する。

@-moz-document domain(mail.google.com) {
  div[class="mb cb"] {
    font-family: monospace !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }
  textarea {
    font-family: monospace !important;
  }
}

なお、userContent.css の編集方法は以下の通り。

userContent.cssの編集方法

userContent.cssはFirefoxで定義可能なユーザースタイルシート。ユーザースタイルシートとはウェブ製作者が指定しているCSSに対してユーザー側からCSSを指定して、ユーザーがウェブの表示を変更できる仕組のこと。

userContent.css はFirefoxのプロファイルフォルダ直下のchromeフォルダ以下に配置する。プロファイルフォルダの場所はOSにより異なるが、WindowsXPの場合は、以下の通り。

%APPDATA%\Mozilla\Firefox\Profiles\(英数字の羅列).(プロファイル名)\

なお、上記のフォルダにuserContent-example.cssというファイルがはじめから配置されているので、これをuserContent.cssにリネームしてカスタマイズする。

userContent.cssについては以下のサイトが詳しい。

また、userChrome.cssやuserContent.cssなどのユーザースタイルシートやuser.jsなどの設定ファイルを簡単に編集することができるChromEditというExtentionもある。

cssのimportant規則

等幅フォントにするためのCSS中の「!important」は、もともとのスタイルと衝突した際に、優先順位を高めるための構文。

! importantを特定することで、規則が重要なものとして指定され得ます。重要なものとして指定されたスタイルは、それがなけれが同等の重みの矛盾するスタイルを凌駕します。おなじように、制作者とユーザーの両者が重要な規則を特定するかもしれないので、重要なケースでは制作者の規則が読み手のものを上書きします。