Chromeで文字を太くするメモ

 

このページで出来る事

  1. Chromeの文字を太くし、読みやすくする
  2. 強制変更によるレイアウト崩れは防ぐ
  3. 画面が狭くなるから拡大は使わない
  4. Windows10の文字も太くする
  5. もちろん大きくもできる

具体的にはメイリオ、MSゴシック系列が細くて読みにくいので、そこだけ太いフォントで置換します。

 

 (8/6 追記 Stylish使用不可のため代替アプリに変更)
(やたらPV高いので少し見やすく変更)

 

 

 

祖母が役所卸で格安となったノートパソコンを買ってきた。


私もインスタグラムとかやってみたいわなんていうので、
血は争えないなと思うが、そんなことよりも困った点がある。



それは文字が細いという点だ。
検索すると「拡大すればいい!」という知恵袋の回答が目立つが、
ただ大きければ読みやすいという事でもないのだ。



Windows10では標準で游ゴシックやメイリオと言った
細字でスタイルの良いフォントが使用されているが、
いかんせんこれがとても読みづらい。



Windows10では文字だけを拡大ないし太くして
読みやすくすることが標準ではできないので、
祖母でも使いやすくするために相当な試行錯誤を強いられましたので、
その備忘録を残しておきます。


設定後、エクスプローラーやChromeの文字が
抜群に読みやすくなり、
自分のパソコンでも設定を行ったくらいです。

 


具体的にはこれがこうなりました。
もっと太く大きくすることももちろんできます。

この機能標準でできて!

f:id:nimyks261:20171204144701j:plain

f:id:nimyks261:20171204144716j:plain

f:id:nimyks261:20171204164157p:plain

f:id:nimyks261:20171204163941p:plain

 

 

f:id:nimyks261:20171204144737j:plain

f:id:nimyks261:20171204144903j:plain

拡大率がバラバラですみません。
それでも太いと見やすいです。

 

特に一番下の文字はおそらくメイリオフォントですが、
これは標準だと拡大をしても細くて本当に見にくいです。

 

どんどん読みやすく変えてしまいましょう。

 


0. Windows10の拡大機能は使いにくい

標準で備わった拡大機能はWin10最新版では
この拡大縮小とレイアウト、という項目のみです。

これは文字の大きさ含め、あらゆるウインドウやアイコン等の
大きさを一律で大きくするものだ。まさに拡大。

 

f:id:nimyks261:20171204163552p:plain

 

しかし、この機能の欠点は

  1. 文字が大きくなるだけで太くはならない
  2. アプリケーションによってはレイアウトがずたずたになる
  3. ただでさえ狭い画面がもっと狭くなる

という点である。

 

1.は使ってみるとわかるのだが、文字が大きくても細い字は読みづらく、
また逆に小さくても太ければ読みやすいのである。

 

2.は特に古いソフト等を使用すると致命的で、
決定ボタンを押せないなどというどうしようもない不具合を招くことがある。

 

3.について、拡大すると当然一度に見ることのできる情報量が減るので、
解像度の低い(1366*768等)モニタでは特に致命的です。

最近のWebページが縦長を意識して作られていることもあり、
ページがとても見づらい&大量のスクロールが必要となり
拡大するととんでもなくパソコンが使いづらくなるのである。



Win8以前では文字のみを大きくしたり、太くしたりということが
できたので幾分使い勝手が良かったが、Win10ではどういうわけかこれができない。


なんで!こまる!不便!というわけでなんとかしましょう。


Chromeの文字を太くする

 行った変更は

  1. 太字フォントをインストール
  2. Chromeアドオン「Stylish」で必要な部分のみフォントを変換
  3. Chromeのフォントサイズの変更
  4. Windowsのフォントサイズ、種類を変更

この4つです。

前提としてWebサイトのフォントには
「A. サイト側が強制的に指定するフォント」
「B. こちらが自由に決められるフォント」
の二種類があります。

A のうち「見辛いMSゴシック、メイリオ強制指定」のみを 2.で、
B を 3.で、太いフォントに変更します。

 例えば、Twitterの鳥やTLアイコンありますよね
あれって実はサイト側強制指定の独自フォントなんです。
なので、すべてのフォントをこちらで弄ると
それらが表示されなくなってしまいます。
それを防ぐためにこの方法をとっています。

1.太字フォントをインストール

もとからWindowsに入っている太字フォントで良いのでは?
と私も思いましたが、Chromeの仕様?上これでは太字にできないので、
太く、そして視認性の高いフォントをインストールします。

 

あのAdobeフリーフォント、源ノ角ゴシックを使用します。
可読性を最重視して作られたフォントなのでぴったりです。
あと名前がかっこいい

 

上記リンクより、
「作者サイトからダウンロード」→
「SourceHanSansJP.zip」をクリックでダウンロードできます。

f:id:nimyks261:20171204150608p:plain

ダウンロード後、インストールをしますが、

「SourceHanSansJP-Medium.otf」
「SourceHanSansJP-Heavy.otf」
「SourceHanSansJP-Bold.otf」

三種類だけをインストールしてください。

他をインストールするとはまります。

f:id:nimyks261:20171204150922p:plain

ダウンロードしたzipファイルをすべて展開後、
右クリック、またはダブルクリックでインストール完了です。

 
Chrome側で太字フォントを指定できないため、
太字フォントのみのインストールをしています。
ただ単にMSゴシックを読みやすいフォントで置換したいだけなら
すべてインストールでOKです。

 

2.Chromeアドオン「Stylus」で必要な部分のみフォントを変換

Chromeの設定からフォントを変えてもYahoo!トップページ等は
フォントが強制的に指定されているため変更がされませんよね。


そんな「MSゴシックが嫌いだ!」という理由で強制フォント置換を
する際におなじみのアドオンです。

 

最近は独自フォント指定のWebページも多いため、
すべてのフォントの置換ではなく、
MSゴシック、メイリオ系列のフォントのみ
置換することを目指します。

 

まず、Stylusは下記リンクからChromeに追加できます。

chrome.google.com


 

追加後、右上に表示された「S」マークのアイコンを
「右クリック」→「オプション」と進みます。

「新しいスタイルの作成」をクリックし、
下記内容を右側のコード1欄に貼り付けます。

その後、好きなスタイルの名称を入力し(フォント変換等)
「保存」をクリックします。

@font-face { font-family: "MS PGothic"; src: local("源ノ角ゴシック JP"); }
@font-face { font-family: "MS Pゴシック"; src: local("源ノ角ゴシック JP"); }
@font-face { font-family: "メイリオ"; src: local("源ノ角ゴシック JP"); }
@font-face { font-family: Meiryo; src: local("源ノ角ゴシック JP"); }
@font-face { font-family: "MS Gothic"; src: local('源ノ角ゴシック JP'); }
@font-face { font-family: "MS ゴシック"; src: local('源ノ角ゴシック JP'); }
@font-face { font-family: "MS UI Gothic"; src: local("源ノ角ゴシック JP"); }

/* 明朝体、Arialも変更する場合は下記を変更
@font-face { font-family: "MS P明朝"; src: local(); }
@font-face { font-family: Arial; src: local("源ノ角ゴシック JP"); }
*/

 

f:id:nimyks261:20171204152658p:plain

 

この状態でYahoo!トップページ等の
MSゴシック、メイリオ強制指定ページを見ると、
文字が太くなっていると思います。

 

Stylusのアイコンをクリックし、先程保存したスタイルを
無効にすれば、すぐに元に戻すこともできます。

 

このコードの意味ですが、Webページによって
MSゴシック、MS Pゴシック、MS UIゴシック、メイリオが指定されているときは
代わりに源ノ角ゴシック JPを使用する、という内容です。
その為、それ以外のページには反映されません。それは3.で変更します。

 

また細かい話ですが、ここでは文字の太さ、大きさを指定できません。
太字フォントを指定すれば良いとも思いましたが、
フォントファミリーしか指定ができないようになっています。
その為、そもそも太字フォント以外インストールをしないという
方法を取りました。

さらに文字を太くしたい場合は先程インストールしたフォントを
極太のみと更に少なくすればいいということです。

 

3.Chromeのフォントサイズの変更

「強制MSゴシック、メイリオ指定サイト」以外のフォントをここで太くします。各サイト指定のお洒落な独自フォントはそのままになりますので、見栄えは変わりません。

 

Chromeの「設定」→「フォントをカスタマイズ」から
フォントの大きさを細かく指定できます。

ちょうどいい大きさに設定しましょう。

 

また、フォントの種類も太字フォントに変更をします。
この操作と2.を同時に設定することで
ほとんどのサイトで文字が太くなります。

 

下記のようなフォントの種類がおすすめです。

f:id:nimyks261:20171204154116p:plain

先程はフォントファミリーでしたが、
ここではフォントを指定できます。
またここでのフォント指定は、
Webページによるフォント強制指定がない場合に有効です。

 

4.Windowsのフォントサイズ、種類を変更

これでもまだ右クリックメニューやタブの名前、
Chromeの設定画面等文字が細い部分があります。

 

このあたりはWindows10の設定を変更する必要があります。

 

しかし、標準では不可能なため(何故)
下記のフリーソフトを使用します。
こちらもおなじみです。

 

すべて展開後、「noMeiryoUI.exe」を実行します。


下記のような設定がおすすめです。
タイトルバー等はもう少しサイズが大きい方が見やすいので、
いろいろ試してみると良いと思います。

f:id:nimyks261:20171204155254j:plain

 

Chromeを再起動すると設定が反映されます。

これで、Windows10自体のフォントも読みやすくなりました。

 

元に戻す場合は、
「プリセット」から「Windows10」を選択します。

また、Windows10標準の拡大機能を使用すると
この設定がリセットされますので、
その際はもう一度設定をします。

 

以上で操作は完了です。 

+α

インターネット検索って、使い慣れた方にはとても使いやすいですが、
初めての人にはごちゃごちゃしていて見にくいと思います。

当然広告収入で成り立っている部分も多いので
そちらに目を行かせたいのは当然でしょうけど。


下記のChromeアドオンを入れるとこのように
検索結果に番号が振られ、広告と区別できる、
結果と結果の境目がわかりやすくなるというメリットが有りましたので
一緒に紹介しておきます。

userstyles.org

 

f:id:nimyks261:20171204155750j:plain

 

私は下記のように設定を変更して
黒背景に白文字のナンバリングとしました。

f:id:nimyks261:20171204162107p:plain

 

これ上5つが広告で、
初めての人がガイドなしに見たらわけわからんですよね。
撮影の為、縦にしましたが、横長画面だと
スクロール無しでは広告しか目に入りません。

 

このページに限らず、拡大機能等により
縦の解像度が少ないパソコンにとっては
見にくいコンテンツが増えたなと感じます。