facebookの見難くなったフォントをメイリオに変更する方法

| 2012年9月26日

今日(12年9月26日)、突然 facebook の標準フォントが従来のメイリオから MS Pゴシックに変更され、ネット界隈でも話題になっている。ゴシックも駄目だと言わないが、やはり日本語表記の場合、メイリオに比べると見づらいことは否めない。そこで、元のメイリオに戻す手順を紹介する。

こちらのサイトでは Chrome の拡張機能での対応を薦めているが、IE や firefox などそれ以外のブラウザではどうしたらよいだろうか?

facebook の HTML ソースを覗いてみると、驚いたことに、フォントは基本、BODY タグに指定されているだけだった。HTMLとしてはとてもシンプルで美しく、感心することしきり。なるほど、この指定は英語環境では奇麗に見えるが、日本語環境では「フォント指定なし」の状態になってしまう。そのため自動的に OS 標準の MS Pゴシックが利用されている訳だ。

font-family: ‘lucida grande’,tahoma,verdana,arial,sans-serif;

しかし、これなら ユーザー CSS で簡単に対応できそうだ。facebook 以外のサイトに影響しないようクラスを指定するとして、これでどうだろうか?
※2012/9/26 22:37 CSS指定を追記(入力領域のフォントを指定)

body.Locale_ja_JP div._li{
font-family: ‘メイリオ’, Meiryo, ‘Meiryo UI’,’lucida grande’,tahoma,verdana,arial,sans-serif !important;}
body.Locale_ja_JP div._li textarea{
font-family: ‘メイリオ’, Meiryo, ‘Meiryo UI’,’lucida grande’,tahoma,verdana,arial,sans-serif !important;}
body.Locale_ja_JP div._li .inputtext{
font-family: ‘メイリオ’, Meiryo, ‘Meiryo UI’,’lucida grande’,tahoma,verdana,arial,sans-serif !important;}
body.Locale_ja_JP div._li .inputpassword{
font-family: ‘メイリオ’, Meiryo, ‘Meiryo UI’,’lucida grande’,tahoma,verdana,arial,sans-serif !important;}
body.Locale_ja_JP div._n8{
font-family: ‘メイリオ’, Meiryo, ‘Meiryo UI’,’lucida grande’,tahoma,verdana,arial,sans-serif !important;}
body.Locale_ja_JP div._n8 textarea, body.Locale_ja_JP div._n8 .inputtext, body.Locale_ja_JP div._n8 .inputpassword {
font-family: ‘メイリオ’, Meiryo, ‘Meiryo UI’,’lucida grande’,tahoma,verdana,arial,sans-serif !important;}

特に問題はなさそうだ。一応、実ファイルをここに置いておく。これをダウンロードして、ブラウザに適用すればOKだ。

操作手順はとても簡単なので、上でもリンクしているこのサイトを参考に試してみて欲しい。facebook も遠からず修正してくるはずなので、それまではこのユーザーCSSでしのぐのが良いだろう。

それにしても、ほんの数年前までは MS Pゴシックでブラウジングからドキュメント編集まですべてこなしていた筈なのだが、メイリオベースに慣れてしまうと、もはや MS Pゴシックに苦痛を感じる。慣れというのは怖いな、と思うとともに、フォントの重要性も再認識させられた。

Chrome の場合の補足

Chrome の場合が判らない、という声があったので補足しておく。Chrome はユーザー CSS を、画面(GUI)から指定できないため、拡張機能をインストールして編集することが一般的だ。だが、拡張機能がなくとも、直接、設定ファイルを編集してしまえばこと足りる。

Windows の場合、ユーザー CSS の設定ファイルは:
C:\Users\UserName\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
にある custom.css なので、これを置き換えるか、加筆してしまえばよい。もちろん、赤字の UserName は自分のアカウント名で置き換える。もし判らなければ、エクスプローラで C ドライブ → Users → 自分の名前 と辿ると良いだろう。

Filed in: TIPS
×

Comments are closed.