(公式で修正されたのでこのノートは用済み)Windows環境でnote.muのfontを指定する

※2014/04/17 CSSのコード部分を一部修正。
※2014/04/17夜 公式で修正されたようだ。すでにStylishを設定している場合、そのままでも特に不具合はないようだが、時間のあるときにでもStylishのアイコンをクリックして「無効化」すると無難だろう。

2014/04/15現在、Windowsでnote.muを閲覧/入力するとfontの一部が明朝体か何かになってしまい、見づらいことこの上ない。運営はマカーか。
そこで、FirefoxとChromeで使えるアドオン「Stylish」を使ってフォントを指定する手順を紹介しよう。

■ブラウザにStylishをインストールする

Chrome用アドオン
https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe

Firefox用アドオン
https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=external-userstyleshome

■CSSの設定

ここではWindows7とChromeブラウザを例に説明していくぞ。

1 アドレスバーに表示されたStylishのアイコンをクリックし「インストール済みのスタイルを管理」を開く。
2 「新しいスタイルを作成」を開く。
3 「スタイルを編集」の「名前」欄に、わかりやすい名称を入れる。
例)「note.muのfont」
4 「セクション」の「コード」欄に下記を入力する。

/* ここから */
.note .note-name div, .note .note-name p, .note .note-name ul, .note .note-name ol, .note .note-name table, .note .note-name dl, .note .note-name blockquote, .note .note-name pre, .note .note-name h1, .note .note-name h2, .note .note-name h3, .note .note-name h4, .note .note-name h5, .note .note-body div, .note .note-body p, .note .note-body ul, .note .note-body ol, .note .note-body table, .note .note-body dl, .note .note-body blockquote, .note .note-body pre, .note .note-body h1, .note .note-body h2, .note .note-body h3, .note .note-body h4, .note .note-body h5 {
font-family: "メイリオ", Meiryo, "MS Pゴシック", sans-serif !important;
}
/* ここまで */

5 「適用先」の「個別指定」をクリック。
プルダウンメニューから「次で始まるURL」を選択し、「https://note.mu/ 」を入力し、「追加」ボタンを押す。
6 必ず最後にページ左側の「保存」ボタンをクリックして設定完了だ。

以下FAQ。

■メイリオ以外のfontを指定したいんだけど?

上の手順4のfont-family:~の行を編集しよう。先に指定したfontから有効になる点、日本語名(全角)のfont名の場合は"で囲む点に注意。
要は「MS Pゴシック」で表示したい場合はこうする。
※「MS Pゴシック」の英字は全角、途中のスペースは半角であることに注意。

/* ここから */
font-family: "MS Pゴシック", sans-serif !important;
/* ここまで */

このほかの CSS(スタイルシート)の記述にかんしては各自ググってほしい。
余談だが、等幅font化されたメイリオもググると自作できるぞ。

■IEは?

IEではCSSをサイト別に指定できないような。ChromeかFirefoxに乗り換えたほうが無難じゃないかな。
また、note.muはWindowsのIE8に対応していないようで(たぶん)、IE8のまま放置している筆者は確認できていない。

■ワイルドカードじゃダメなの?

俺の環境だとダメだった。

以上

100円ありがとう(´;ω;`)ありがとう

5

某S

コメント4件

自分の環境(win7)では”メイリオ”では変わらず、meiryoにしたら変更できました。ありがとうございました。
hidew27さん、貴重な情報をありがとうございます。フォント関係は難しいですね。詳しく調べてみます。
ひとまず、該当コードを修正しました。>font-family: "メイリオ", Meiryo, "MS Pゴシック", sans-serif
>Windows環境でメイリオフォントが指定されるようになったっぽい? 例のStylish設定をしている場合、そのままでも特に不具合はないはずですが、ひまなときにStylishのアイコンをクリックして「無効化」すると無難です。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。