Gmailを固定ピッチの等幅フォント（MonoSpace）で表示する方法（新Gmail対応）

投稿日：2008年7月24日

[追記：2009/03/04]
GMailが内部HTMLを更新したようで、このエントリーで紹介したスクリプトは古くなりました。
最新版は下記エントリーで紹介していますのでご参考ください。
Gmailを固定ピッチの等幅フォント（MonoSpace）で表示する方法（2009年03月版）
[/追記]
Gmailの便利さは言わずもがな。
IT関連の友人以外もほとんどの人が使っているような気がします。
かくいうワタシも、たくさんあるメールアドレスを全部Gmailに集約して使っています。
さて、そんな便利なGmailで一番気になる嫌なところが「メールが等幅フォントで表示されない」事です。
ほとんどのメーラーではデフォルトフォントが等幅フォントなので、署名や見出しなどを色々凝ったつくりにしている場合がありますが、Gmailでは全くの台無しです。
本件、多分ものすごく有名な話題であって以前は下記のようなページを参考にしてFirefoxでは等幅フォントで表示する事ができていました。
・Gmail で本文表示を等幅表示にする – えむもじら
・2006-06-23 – jun-ichi.blog.hatena
・hail2u.net – Weblog – FirefoxのuserContent.cssネタ
・ゆめデザイン【最新】Gmail を等幅フォントで表示する（Firefoxで）
・Gmailを見やすくする – Go my way
しかし、Gmailがバージョンアップしてから上記方法が効かなくなってしまって、ちょっと困りつつ放置（じゃあ、困って無いじゃん…）していたんですが、ちょっと調べて自分で解決してみました。

基本的な対応ポイント

フォントを直したいだけなのでCSSをなんらかの方法で変更してやれば良いです。
変更が必要な箇所は、
・メール本文が表示される、class=”ArwC7c” の div要素
・メール本文を入力する、class=”iE5Yyc” の textarea要素
これはFirebugかなんかで調べれば分かります。
今回は、userContent.css を編集する方法と、GreaseMonkeyを使う方法の2種類を紹介します。

userContent.cssでの対応方法

userContent.cssは、自分で任意のCSSを定義する事ができるファイルです。
対象は全ページになってしまいますが、@-moz-documentなどを使う事によって対象ページ（サイト）をフィルタリングする事もできます。
userContent.cssは下記ディレクトリにあります。
Windowsの場合

C:\Documents and Settings\（ユーザ名）\Application Data\Mozilla\Firefox\Profiles\XXXXXXXX.default\chrome\userContent.css

Macの場合

/Users/（ユーザ名）/Library/Application Support/Firefox/Profiles/XXXXXXXX.default/chrome/userContent.css

デフォルトではファイルが存在しないので同じフォルダにある userContent-example.css をリネームして使えばOKです。
userContent.css には下記のような記述を追加します。

@-moz-document domain(mail.google.com) {
div.ArwC7c ,
textarea.iE5Yyc {
font-family: monospace !important;
font-size: 12px !important;
line-height: 18px !important;
}
}

font-size はピクセル指定していますが、好みに合わせてpt指定でもなんでもすればOK。

GreaseMonkeyでの対応方法

なるべく拡張は使わないようにしているんですが、Greasemonkeyを入れている人は導入が簡単だと思うので、user.js作ってみました。
下記からどうぞ。
gmail_mono.user.js
中身はこんな感じです。

(function () {
var styles = "div.ArwC7c, textarea.iE5Yyc { font-family: monospace !important; font-size: 12px !important; }";
var heads  = document.getElementsByTagName("head");
if (heads.length > 0) {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(styles));
heads[0].appendChild(node);
}
}) ();

まとめ

今回とりあえず、Firefoxでの対応方法を紹介しましたが、userContent.css/GreaseMonkey と同等の機能を持つ他のブラウザでも対応は可能だと思います。
色々やってみてください。
ってか、Gmailがデフォで等幅フォントにしてくれれば万事解決なんだけどな…。