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

最近、Webサイトの一部で、文字が細くて見にくい現象。これは、「游ゴシック」というフォントが原因です。ChromeやFirefoxであれば、強制的にフォントをメイリオにすることが出来ます。

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

 

Last update 2016-01-30 03:13

twitter Facebook はてブ LINE pocet

 

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

Sponsored Link

 

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

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

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

目次

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

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

Chromeの機能拡張 Stylistを使う

インストール

Chromeの機能拡張の「Stylist」を使うと、強制的にスタイルシートをつけることが出来ます。

stylistをCHROMEに追加ChromeウェブストアのStylistのページを開きます。

右上の「Chromeに追加」をクリックします。

追加をクリック警告が表示されるので、「追加」をクリックします。

設定

メニューボタンをクリックChromeの右上のメニューボタンをクリックします。

その他のツールの拡張機能をクリック「その他のツール」の中にある「拡張機能」をクリックします。

StylistのオプションをクリックStylistを探し、「オプション」をクリックします。

StylesのAdd New Style「Styles」タブをクリックします。
なお、クリックしても何も反応がない場合は、更新ボタンをクリックしてみてください。

「Add New Style」をクリックします。

メイリオに指定①の部分にわかりやすい名前を入力します。
②「All site」にチェックを入れると、すべてのChromeで表示されるページに適用されます。
「prefix」にURLを入れると、そのページだけを適用させることが出来ます。
③この部分に適用させたいスタイルシートを記入します。
例えばすべてのフォントぉを「メイリオ」(なめらかなフォント)にする場合は・・・

*{
font-family:"メイリオ";
}

と入力します。
④「Save」をクリックすると保存されます。

Saved!Saved!と表示されれば保存完了。

更新ボタンをクリックStylistで変更した内容は、そのままだと反映されません。
更新ボタンをクリックしてください。

フォントがカクカクヤフーのトップページのニュースの見出しは、フォントがかくかくしていました。

フォントがゴシックの場合拡大すると、こんな感じ。

滑らかになったそれがこのようにヌルヌルのきれいなフォント(メイリオ)に変更されました。

フォントをメイリオにした拡大すると、アンチエイリアス処理になっており、非常に滑らかです。

反映されない!?

demoなども適用させてみるもし何も変わらないよ!という場合は、サンプルとして「demo」が用意されているので、ここの「All site」にチェックを入れて、「Save」をクリックしてみてください。
このサンプルは、H1タグ内に「Hello!」を追加するスタイルシートです。

デフォルトの状態デフォルトの状態です。

フォントを指定した場合フォントのサイズを12pxに指定してみました。

googleの検索結果を見やすく

googleの検索結果例えば、googleの検索結果には、検索したキーワードが「EM」というタグで囲まれます。
prefixにgoogleの検索ページのURLを指定し、画像のようなスタイルシートを入力すると・・・

検索単語を大きく「フォントの大きさ 変更」で検索した時に検索キーワードを大きく表示してくれます。
googleの検索結果では、日本語や別の言い回しを柔軟に変換してくれる機能があるので、「大きさ」=「サイズ」として検索キーワードが修正されています。

部分強制メイリオちゃん

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

強制メイリオちゃんをCHROMEに追加「CHROMEに追加」をクリックします。

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

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

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

無効にするには

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

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

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

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

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

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

として保存すると、「メイリオ」で表示させたいページでこのブックマークレットを使用すれば、一時的にそのページを「メイリオ」にすることが出来ます。

Firefoxの場合

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

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

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

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

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

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

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

Macでブログを書いている

最近、すごくブロガー(ブログを書いて収益を得たり、趣味で書いている人)が増えてきましたが、どういうわけかこういう人たちってMacを使ってるんですよね。
私もブロガーですし、パソコンに初めて触れたのはMacでした(1992年頃の話ですが)が、今のところMacを使うつもりはないです。
私はiPhoneを使っているのですが、パソコンとしてMacを使うのは以前から否定的でした。
それはWindowsでないと出来ないことが多すぎるから、という理由からなのですが、それ以外にもパソコンやスマホの使い方などのハウツー記事を書くのに、最も普及しているWindowsユーザーに合わせたほうが、需要に答えられるからです。

OS別訪問者の割合この円グラフは、当サイトの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ではシステムフォントを変更する設定はないようです。

関連ページ

最終更新日 2016-01-30 03:13

 

twitter Facebook はてブ LINE pocet

Sponsord Link

 

SocialDead 】 2017/05/05 10:33

はじめまして。SocialDeadと申します。
私もChromeでフォントが見にくく表示される件について悩んでまして、このサイトはかなり参考にさせて頂きました。
それで、この件は個人的にもかなり惑ったので、自分的メモという意味も含めて、自分のブログにこの件の記事を書いたのですが、あとになって振り返ってみたら、特にブックマークレットのjavascriptの部分は、ほぼこちらのコピペをしてしまっていることに気付きました。
先に書いておいて何ですけど、この件について許諾を頂けるでしょうか?もちろんだめということでしたら、該当記事は削除するつもりです。
お返事、よろしくお願いします。
↓該当記事URL(当ブログ「SocialDeadのぶろぐ」内)
http://socialdead02.blog39.fc2.com/blog-entry-201.html

 

【 管理人 】 2017/05/05 11:13

>SocialDeadさん
ぜんぜんOKですよ。
それよりMacユーザーが増えて、サイトのフォントに「游ゴシック体」を指定するサイトが増えてきていることに危機感を感じている人が他にもいるんだとわかって、心強いです。

 

SocialDead 】 2017/05/05 12:51

SocialDeadです。
さっそくのお返事、ありがとうございました。ありがたく使わせていただきます。
「游ゴシック体」指定が多くなっているのは、Macユーザーの影響でもあったんですね。当方、(ほぼ)Windowsオンリーなんで、そのへんに気づきませんでした。
テキスト中心のWebだからこそ、そのへんはもう少していねいに扱われて欲しいですよね。

 

 

投稿日:2015-04-20 | このページのトップへ | コメントを書く | 管理