申し訳ないけどタイッツー＆シンプルブログのフォントを変える設定の話

公開 2023/10/29 19:29

最終更新 2023/12/13 07:33

※2023/12/13のアップデートでタイッツーのフォントの仕様が変更されました（ウィンドウズではシステムフォントを使用するよう変更）

おそらく今どき、ネットはスマホで見る派が多いと思うのですが、Windowsパソコンで見る人もそれなりにいらっしゃるはず。
なのですが、私が使わせてもらっている、

タイッツー
https://taittsuu.com/

シンプルブログ
https://simblo.net/

こちらをWindowsパソコンで閲覧すると、

縮小された画像ではわかりにくいのですが、文字がギザギザになってしまうのです。
この現象はブラウザの種類に関係なく起こります。
どうしてこうなるのか？　というと、タイッツーさんのソースコードを見るとわかります。
（別に逆アセンブルとか、大げさなことじゃないから許してくだされ……）

<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">

ここでフォントを指定しています。
URLから、「Google Fonts」という、グーグルが無料で提供しているWebフォントサービスを利用していて、タイッツーさんとシンプルブログさんは「M PLUS Rounded 1c」というフォントを使用していることもわかります。
元々「Rounded M+」シリーズとして配布されている有名なフリーフォントさんですね。更にその元の「M PLUS」シリーズもありましてどうたらこうたらというのは省きます。

さてこの「M PLUS Rounded 1c」というフォントは視認性が高く読みやすいのですが、困ったことにWindowsパソコンでは20px以下の文字サイズを設定すると、最初の画像のようにギザギザします。
ジャギーという状態ですね。
スマホではこの現象は起こらないので、タイッツーさんでもさほど話題になっていないようです。
ジャギーが生じるのは「M PLUS Rounded 1c」自体の仕様なので、タイッツーさん側が悪いとかそういうことじゃないです。

解決するには、タイッツーさん側に、他のフォントに差し替えてもらうのが一番なのですが……
とりあえずユーザー側で対処する方法もあります。ユーザー側でフォントを差し替えてしまうのです。
「Stylus」という拡張機能を使います。
※ブラウザの拡張機能の使用は自己責任でお願いします！

その前に、何のフォントで差し替えるかですが、ここでは同じく「Google Fonts」にある「Kosugi Maru」（小杉丸）に変更してみましょう。
もちろん好みのフォントに変更してもらって構いません。

Kosugi Maru
https://fonts.google.com/specimen/Kosugi+Maru

「M PLUS Rounded 1c」と同じく丸ゴシック系で読みやすいフォントです。
パソコンにインストールして設定しても良いのですが、ここではWebフォントのまま使う手順です。
スタイルシートで指定することになりますので、「Select Regular 400」の隣の＋マーククリック→「@import」のラジオボタンをクリックで出てくるスタイルシートの@import～以下を何処かにコピペしておきます。これですね。

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap&#039;);

更にその下の「CSS rules～」という部分の

font-family: 'Kosugi Maru', sans-serif;

もコピペ。これが必要になります。

次に「Stylus」をインストールします。
Chrome系拡張機能（「Google Chrome」「Microsoft Edge」「Vivaldi」等）及び、FireFox拡張機能と、Windowsにおける主要なブラウザ向けに「Stylus」が存在しています。
※「Stylus」はオープンソースなので、導入に際しセキュリティとか色々気になる方はGitHubでソースコード等を確認してください。
openstyles/stylus: Stylus - Userstyles Manager
https://github.com/openstyles/stylus/

拡張機能のページは以下から。

Chrome拡張機能「Stylus」
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

FireFox拡張機能「Stylus」
https://addons.mozilla.org/ja/firefox/addon/styl-us/

拡張機能をインストールしたらオプションで色々設定します。
設定画面は初期状態だとこんな風にまっさらのはずです。

「アクション」→「新スタイルを作成」を押すと右側の画面が変わります。

右側に以下をそのままコピペしてください。

@-moz-document url-prefix("https://taittsuu.com"), url-prefix("https://simblo.net") {
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap&#039;);
body{
    font-family: 'Kosugi Maru', sans-serif;
}
input, select, button, textarea {
    font-family: inherit;
}

2行目が、さきほどコピペしておいた「Google Fonts」でのフォント指定です。もし「Kosugi Maru」がパソコンにインストールされているなら、「@import～」の2行目は必要ありません。
それ以下は<body>タグ内及び、テキスト入力などのパーツ部分のフォントを指定しています。

「スタイルを上書き」します。

上書きするスタイルシートと、ウェブサイトが追加になりましたので、これに適当な名前を付けて（左上の「名前を入力してください」のエリアに入力）、すぐ下の「保存」をクリックで完了。
設定画面は閉じてOKです。

さて、この状態でタイッツーさんを開くと……
フォントが「Kosugi Maru」に変更されました。
ギザギザもありません。綺麗ですね。