Chromeで游ゴシックを強制的にメイリオに変える

Last update 2019-05-13 11:43

最近私の周りやネットで、「最近、インターネットの文字が汚くなった」とか「フォントが薄くて読みにくい」「パソコンが壊れた！フォントが変なになった！」という人が増えてきました。かくいう私もそう思っていた一人なのですが、原因がわかりました。
有名ブログサイトでは、Lifehackerさんがそうですね。今までは、なんでこのサイトだけ文字が見にくいんだろう。。。と思って、ブックマークから削除してしまったのを覚えています。

フォントが汚いのは游ゴシック体のせい

フォントが薄くて読みにくくなったのは、「游ゴシック体」と呼ばれるフォントのせいです。

Windows8.1あたりから、「游ゴシック体」が自動的にインストールされるようになり、これをおしゃれなフォントだ。と言っている~~センスを疑うような~~人がいるようで、Webページで強制的にCSSでフォントを「游ゴシック体」にしているページを見ると、薄くてきたないフォントとして表示されます。

文字を太く大きくする老眼対策を公開してみた
ブックマークレットで強制的にメイリオで表示
Chromeの機能拡張「メイリオ大好き」を使う
Chromeの機能拡張部分強制メイリオちゃんを使う
Firefoxで強制的に「メイリオ」で表示
なぜ「游ゴシック体」が使われるか
Chromeのフォントの設定

文字を太く大きくする老眼対策を公開してみた

自作拡張機能に興味を持ったので、自分で作っちゃいました。(笑)というか、游ゴシックだけでなく、どっかの大手ブログのように文字が小さくて見にくいサイトも多くなってきたので、文字を太く大きくする「老眼対策」というChromeの拡張機能を自作し、Googleウェブストアに公開してみました。

詳しい使い方や詳細については、フォントを太く大きくする拡張機能を自作して公開してみたを参考にしてください。
私のようにアラフィフで老眼で悩んでいる人には、きっと役に立つアドオンだと思います。

Chromeで強制的にフォントをメイリオにするには

残念ながらChromeでは、CSSなどで強制的にフォントを指定されている場合、標準の機能では別のフォントに置き換えることが出来ません。が、Chromeの「拡張機能」を使うことによって、強制的にメイリオにすることが出来ます。

ブックマークレットを使う

機能拡張を使ったフォントの強制表示は、すべてのページが「メイリオ」になってしまいますが、特定のページだけ「メイリオ」にしたい場合は、「ブックマークレット」を使って実現できます。

ブックマークレットとは

ブックマークレットとは、お気に入り(ブックマーク)に登録するURLをURLではなくJavascriptとして保存すると、クリックした時に表示させているページに対してJavascriptを動作させることが出来る機能です。

ブックマークレットでページのフォントをメイリオにする

まずは下のソースをコピーします。

javascript:(function(){document.head.innerHTML+="<style>body,h1,h2,h5,h3,h4,p,div,span{font-family: 'メイリオ' !important;}</style>";})()

続いて、このページ(どこのページでもいいのですが)をChromeのブックマークバーに登録します。
ブックマークバーとはURLの下にあるお気に入りが登録されているバーです。

URLの左側にある①の部分をクリックしたまま、②のブックマークバーに移動させます。

するとこのページがブックマークバーに登録されます。
ここを右クリックし・・・・

「編集」をクリックします。

「ブックマークを編集」という画面が出てくるので、「名前」の部分をすべて削除して、「メ」と一文字だけ入力します。

「URL」の部分をすべて消し、右クリックして「貼り付け」を選択します。

このようにURLの部分に先程のJavaScriptが埋まりました。

「保存」をクリックします。

ページのフォントをメイリオにするには

URLの下に「メ」というブックマークが登録されました。
游ゴシック体のページで見にくいと思ったら、ここをクリックします。

こんな感じ。

するとこのように強制的にメイリオになりました。

弱点

ただ、ブックマークレットで強制的にフォントを変更しても、更新したり別のページに飛ぶとこの呪文は解除されてしまいます。
ブックマークレットについての詳しい解説は、ブックマークレットとは？を参考にしてください。

Chromeの機能拡張「メイリオ大好き」を使う

インストール

Chromeの機能拡張の「メイリオ大好き」を使うと、強制的に游ゴシックやMS明朝体を「メイリオ」に変換して表示してくれます。

Chromeウェブストアにある「メイリオ大好き」のページを開き、「Chromeに追加」をクリックします。

追加していいか聞いてくるので、「拡張機能を追加」をクリックします。

メイリオ大好きが追加されました。

游ゴシックで表示されたページを開いていたら、更新ボタンをクリックしてみます。
☆この拡張機能を追加した後開いたページは、游ゴシックがすべてメイリオに変換されます

游ゴシックがメイリオに変換されました。

部分強制メイリオちゃん

今度はアドオン(機能拡張)でフォントをメイリオに変更出来るものがあるので、これを利用したやり方。

まずは、Chromeウェブストアの「部分強制メイリオちゃん」ダウンロードページに行きます。

「CHROMEに追加」をクリックします。

「機能拡張を追加」をクリックします。

游ゴシック体やMSゴシック体で表示されていたページを開いている場合は、「更新ボタン」をクリックします。

するとこのように強制的にページのフォントをメイリオにすることが出来ました。

無効にするには

もし、サイト管理者が指定したフォントで表示させたい場合は、Chromeの右上の①メニューボタンをクリックし、
②「その他のツール」をクリック。
③「拡張機能」をクリックします。

「部分強制メイリオちゃん」を探し、「有効」のチェックを外すだけです。

Firefoxの場合

Firefoxの場合はもっと簡単。
Firefoxの右上のメニューボタンをクリックし、②「オプション」をクリックします。

①「コンテンツ」をクリックし、
②「フォントと配色」の○で囲った部分をクリックし・・・

「メイリオ」を選択します。

「詳細設定」をクリックします。

「Webページが指定したフォントを優先する」のチェックを外します。
さいごに「OK」ボタンをクリックすれば完了。

なぜきたないフォントを使うか

なぜ、このような薄くて見にくいフォントをわざわざ指定して訪問者を困らせるのか、というと、いくつか原因があります。

Macでブログを書いている

最近、すごくブロガー(ブログを書いて収益を得たり、趣味で書いている人)が増えてきましたが、どういうわけかこういう人たちってMacを使ってるんですよね。
私もブロガーですし、パソコンに初めて触れたのはMacでした(1992年頃の話ですが)。Macbook Proも購入しましたが、やっぱりWindowsのほうが使いやすいです。

で、Macだとこの画像の左側のように「游ゴシック体」が割と太くて濃いフォントなんですが、Windowsだとかすれたような薄いフォントなんですね。
一部の人達は、「游ゴシック体」を使うとMacでもWindowsでも同じフォントが表示されると思っているようですが、実際にはこのようにMacとWindowsではまったく違うフォントとして表示されます。

この円グラフは、当サイトのOSごとの訪問者の割合ですが、ほとんどのユーザーがWindowsかスマートフォンで、Macを使っている人の訪問者は3.05％ほどしかいません。
Macの使い方の記事を書くよりも、Windowsの使い方の記事を書くほうが10倍以上のアクセス数があるし、需要があるわけですね。
ちなみに、別のテーマのサイトでも、Macからのアクセスは2～3％程度でした。
Macの普及率は、Windowsの10分の1と言われていますが、最近ではパソコンではなく、スマホやタブレットでアクセスする人のほうが多いので、Macを使用している人の割合はかなり低くなります。

で、Macで「游ゴシック体」のページを見ると、まぁまぁ綺麗に見えたりするのですが、Windowsで見るとこれ(画像参照)なんですよ。

で、Webページを作成する場合、昔から言われているのが「互換性」。
誰がどんな環境で見ても同じように表示されるように、互換性が重要視されるのですが、今まではMacとWidowsでインストールされているフォントが違うので、デザインによってはWindowsで見るとガタガタの表示になっていたりしたんですね。

ところが、「游書体」がWindows8.1、Mac OS 10.9から標準でインストールされ、「游書体」をCSSで指定しておけば、Macでサイトをデザインしたり、ブログを書いてもそうデザインが崩れないだろう。となるわけです。
実際にはMacとWidnowsの「游ゴシック体」は、違うようで、Windows版はすごく細い。
で、ブロガーやらデザイナーはMacで作成しているもんだから、それに気が付かない。ということなんだろうと思います。
個人的には、3％の訪問者に合わせるより、40％の訪問者がどう見えるか検討するほうが、優先事項だと思うんですけどね。

高解像度モニターが増えた

Macでは、だいぶ以前からRetinaディスプレーと呼ばれる高解像度モニターがMacbook Proに搭載されていました。
高解像度モニターとは、フルハイビジョンを超える高解像度対応モニターのことで、要は、フォントや画像などを表示するモニターの1個1個の点々(ドット)がより小さくなったモニターですね。
で、Windowsでも最近高解像度モニターが増えてきて、中には4K対応モニターを搭載したノートパソコンも発売されてきました。
で、このこ解像度モニターだとまぁ、割りと「游ゴシック体」でも綺麗に見えるんです。

↑こちらが私の持っている高解像度モニターで表示させた「游ゴシック体」(上)と「メイリオ」(下)。
高解像度モニターで表示させると、まぁまぁ見られなくないかな。というレベル。
相変わらず薄いけれど。

こちらが一般的なモニター(24インチ 1920x1080)。
高解像度モニターに比べ、かすれなどが見られると思います。
中華フォントって感じですよね。

Macユーザーでなおかつ、Macbook Proのような高解像度モニターを使用していると、一般的なWindowsユーザーにはすごく見にくいフォントというのが気が付かないのかもしれませんね。

Windows10のシステムフォントとして採用された

マイクロソフトのコミュニティのページでも盛んに議論されていますが、Windows10からシステムフォントとして「游ゴシック体」が採用されたようです。
なので今後、積極的にこの「游ゴシック体」を使用するサイト主さんが増えてくる可能性があるかも。

Chromeのフォントを変更するには

さて、最後にChromeの標準機能を使ったフォントの指定・変更を紹介します。
もし、この方法で十分であれば、機能拡張などは使わずにこの設定だけでOKだと思います。
ただし、この方法だとCSSなどでフォントを指定しているようなページには無効です。

まずは、Chromeの右上にあるメニューボタン(画像の四角で囲まれた部分)をクリックします。

「設定」をクリック。

下の方にスクロールすると、「詳細設定を表示」という部分があるので、ここをクリックします。

フォントをカスタマイズをクリック。

もし、フォントを滑らかでカクカクしていないものに変えたい場合は、「標準フォント」や「Serifフォント」などすべての項目のフォントを「メイリオ」に変更します。
「標準フォント」の下にあるスライドバーを動かして、フォントの大きさを強制的に変更することも出来ます。

ここの「標準フォント」と「最小フォントサイズ」のフォントサイズの変更がちょっとわかりにくくて、とあるサイトだと「標準フォント」をずらすとページ内のすべてのフォントが変更されたと思えば、別のサイトだと、H1やH2内のフォントだけ変更されたり・・・。
また、最小フォントサイズは、Pタグ内が変更されるかとおもいきや、別のサイトでは「標準フォント」で変更できたり・・・。と、実際にいろいろ試してみないと、動作がよくわかりにくい。

例えばこれはノーマルの状態。設定していない場合です。

「標準フォントサイズ」を大きくしてみました。
このように画像はそのままでフォントだけ大きくすることが出来ます。

ノートパソコンのフルハイビジョンの解像度や、4Kの解像度のディスプレイだと、文字が小さくて読みにくい時がありますが、その場合、このようにフォントの大きさを大きくしてやれば、ディスプレイの解像度や拡大・縮小をしなくても読みやすくなります。

スタイルシートで指定したフォントは？

残念ながらこの方法では、スタイルシートなのでフォントや大きさを指定したものは、効果が無いようです。

游ゴシック体とメイリオ

ここはCSSで「游ゴシック体」に指定してあります。
「游ゴシック体」はWindows10からはシステムフォントとしても使われるようになりました。
残念ながら今のところ、Windwos10ではシステムフォントを変更する設定はないようです。

ここはCSSで「メイリオ」に指定してあります。
「游ゴシック体」はWindows10からはシステムフォントとしても使われるようになりました。
残念ながら今のところ、Windwos10ではシステムフォントを変更する設定はないようです。

Chromeで游ゴシックを強制的にメイリオに変える