こんにちは！
※以前お伝えした内容を一部更新してお伝えします。
スマホやタブレットでウェブサイトを見ると、文字がとてもきれいに見えます。Macでも同様です。でも、Windowsのパソコンで見ると、文字がギザギザしていたり、細かったりして、とても見づらいのです。
この方法を使うと、WindowsでもMacのようにきれいな文字でウェブサイトを見ることができます。作業は少し根気がいりますが、一度設定するとあとはずっときれいですので、ぜひおススメします。
ブラウザはChromeをおススメしますが、Chrome系の拡張機能が入るEdgeでも可能です。他にもBraveやVivaldiでも可能です。
設定すると、こんな感じで見ることができます。
Yahoo! Japanのトップページ
画像処理の関係でちょっとにじんでいますが、実際はにじみはありません。
Wikipedia（味噌汁のページ）
きれいなフォント表示でとても気持ちいいです。
この表示にするには、次の手順でできます。（これはWindowsパソコンのChromeの設定です。他のブラウザや端末では異なります）
１．前準備（フォントのダウンロードとインストール）
Google Noto Sansというフリーですがきれいなフォントをダウンロードします。次の手順でダウンロードしてください。
Google Noto Fontsのページに行き、検索に半角で「jp」と入力します。すると次のような候補が出てきます。
Noto Sans JapaneseとNoto Serif Japaneseの2つのフォントをダウンロードしてください。
ダウンロードが終わったら、２つ圧縮ファイルができているので、ファイルを右クリックして、「すべて展開」を左クリックして「次へ」をクリックして解凍してください。もう一つも同様です。
解凍されたフォルダには、次のようなフォントファイルが入っています。（Noto Sans JPの場合）
左側にフォントのマーク（A）が付いたものがフォントファイルです。
★フォントのインストール方法
Chromeのバージョンが変わった影響で、従来の方法でインストールすると、フォントが認識しないこともあるようです。次の方法で行ってください。
インストールするフォントをすべて選択してその上で右クリックし、「すべてのユーザーに 対してインストール」をクリックしてください。こうすることで、システムフォルダにフォントがコピーされ、認識するようになります。
（「インストール」だけでは認識しないようです。間違ってただのインストールをしてしまった場合、コントロールパネルのフォントから、そのフォントを削除し、改めて上記の方法でインストールしてください。）
同様にNoto Serif JPの方もインストールをします。2種類のフォントのインストールが終了したら、今度はChrome側の設定になります。
２．Google Chromeの設定
まず最初にするのが、ページの表示率を110％にすることです。これにより、最終的な仕上がりがさらに美しくなります。
「設定」 ー 「デザイン」 ー 「ページのズーム」から、「110％」を選択します。
次は、拡張機能のインストールです。
下のリンクから、Stylusという拡張機能を追加してください。これはページのスタイルを変更する拡張機能です。
追加されると、右上にSのマークが出ると思いますので、そのマークをクリックして「管理」を選択してください。（Sのマークが隠れている場合は、ピン留め（ピンのマークをクリック）すると常に表示されます）
左のメニューから「新しいスタイルを作成」をクリックします。
右のエディタ部分に、次の文字をコピー＆ペーストしてください。
（以下貼り付け）
/*---------------
sans serif
---------------*/
@font-face {
font-family: Meiryo;
src: local("Noto Sans JP");
}
@font-face {
font-family: メイリオ;
src: local("Noto Sans JP");
}
@font-face {
font-family: "M PLUS Rounded 1c";
src: local("Noto Sans JP");
}
@font-face {
font-family: "Rounded Mplus 1c";
src: local("Noto Sans JP");
}
@font-face {
font-family: "MS PGothic";
src: local("Noto Sans JP");
}
@font-face {
font-family: "ＭＳ Ｐゴシック";
src: local("Noto Sans JP");
}
@font-face {
font-family: "Yu Gothic";
src: local("Noto Sans JP");
}
@font-face {
font-family: 游ゴシック;
src: local("Noto Sans JP");
}
@font-face {
font-family: "Yu Gothic Medium";
src: local("Noto Sans JP");
}
@font-face {
font-family: "游ゴシック Medium";
src: local("Noto Sans JP");
}
@font-face {
font-family: "Noto Sans CJK JP Thin";
src: local("Noto Sans JP");
}
@font-face {
font-family: "Noto Sans CJK JP Regular";
src: local("Noto Sans JP");
}
/*---------------
serif
---------------*/
@font-face {
font-family: "MS PMincho";
src: local("Noto Serif JP");
}
@font-face {
font-family: "ＭＳ Ｐ明朝";
src: local("Noto Serif JP");
}
@font-face {
font-family: "Yu Mincho";
src: local("Noto Serif JP");
}
@font-face {
font-family: 游明朝;
src: local("Noto Serif JP");
}
（以上貼り付け）
この設定に名前を適当に付けて（今回は「フォント指定」という名前を付けています）、「保存」をクリックします。するとウェブページの文字がNoto Sansに変わっていると思います。
しかしこれだけでは文字は変わっても太くきれいに表示されていません。それで、文字をきれいにするためのもう一つのスタイルを作ります。
右上にSのマークが出ると思いますので、そのマークをクリックして「管理」を選択してください。
左のメニューから「新しいスタイルを作成」をクリックします。
右のエディタ部分に、次の文字をコピー＆ペーストしてください。
（以下貼り付け）
* {
-webkit-text-stroke-width: 0.17px; /*フォントの線の太さを指定*/
-webkit-font-smoothing: none; /*フォントのなめらかさ*/
}
::selection{
color: #fff; /*選択時の文字色を指定*/
background: #338fff; /*選択時の背景色を指定*/
}
（以上貼り付け）
この設定に名前を適当に付けて（今回は「フォントのきれいさ」という名前を付けています）、「保存」をクリックします。するとウェブページの文字が太くなり、見やすくなっていると思います。
それぞれの液晶ディスプレイによって、見やすさを調整する必要があります。調整ポイントは次の2点です。
* {
-webkit-text-stroke-width: 0.17px; /*フォントの線の太さを指定*/
-webkit-font-smoothing: none; /*フォントのなめらかさ*/
}
::selection{
color: #fff; /*選択時の文字色を指定*/
background: #338fff; /*選択時の背景色を指定*/
}
①フォントの線の太さ指定
この数値を半角で書き換えると、太さが変わります。ワタクシの経験では、0.8～3.0の間で、ベストな太さが見つけられました。ちなみに、小数点第3位も設定できます。例えば、0.175などです。微調整ができます。
②フォントのなめらかさ
これは次のオプションがあります。
none; … なめらかにしない。くっきりと見えますが、解像度の低いディスプレイの場合はギザギザになるので、４Kなどの高解像度のディスプレイにおすすめのオプションです。
subpixel-antialiased; … なめらかになります。このオプションはなめらかさの基本になります。
antialiased; … こちらはsubpixel-antialiased;よりも、さらに字が太くなる感じです。低解像度のディスプレイにはこちらが良いかもしれません。
上の3つのオプションどれかにして、「保存」をクリックすると反映されます。使っているディスプレイによって異なるので、おススメは3つのオプションをすべて試して、ご自分の目でベストを見つけてください。
（※1366×768や1280×800などの低解像度のパネルの場合、線の太さを3.0～3.6、フォントのなめらかさをnone;の組み合わせにした方がきれいに見える場合があります。参考にしてくださればと思います。）
この①の太さと②のなめらかさの組み合わせで、自分にぴったりのフォントのきれいさを見つけることができます。
自分のブログもこんな感じに見えます。
※パソコンのディスプレイの性能差で、見え方に違いが出ます。よりきれいに見えるのは、フルHD～4Kの高性能ディスプレイが望ましいです。
ウェブサイトは毎日のように見るものですので、美しく太い書体で目にも優しく、気持ちよく見ましょう。
ではまた！