アメブロの表示フォントを変える（メイリオ、游ゴシック、BIZ UDPゴシック）

アメブロのCSS編集用デザインで、公開ページの表示に使用されるフォントを変更するカスタマイズ方法です。

新CSS編集用デザインと旧CSS編集用デザインのどちらにも対応しています。

1 初期状態は？
2 おすすめは？
3 「メイリオ」に変える
4 「游ゴシック」に変える
5 「BIZ UDPゴシック」に変える
6 まとめ

初期状態は？

まず、何もカスタマイズしていない初期状態でフォントの設定がどうなっているかを見てみます。

確認したところ、（2024年7月現在）新CSS編集用デザインも旧CSS編集用デザインも、初期状態の表示フォントの設定は以下のようになっていました。

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

この場合、Windowsでは「メイリオ」、macOSでは「San Francisco」というフォントが使われるようで、十分きれいに表示できる無難な設定と言えると思います。

「メイリオ」に変える

Windowsで表示するフォントをメイリオにしたい場合は、何もする必要はありません。

初期状態で既にメイリオです。

以前のアメブロは、Windows向けの表示フォントが初期状態で「ＭＳＰゴシック」というお世辞にも美しいとは言い難いフォントが設定されていましたので「メイリオ」に変えるカスタマイズが流行りました。

でも、今はもう必要ありません。

もう一度書きますが、何もしなくても最初からメイリオです。

「游ゴシック」に変える

「游ゴシック」は、Windows8.1以降とMac OSX 10.99(Mavericks)以降の両方に標準搭載されたこと、またフォントのデザインも優雅で美しいので、ようやくWindowsとMacで同じ美しいフォントを使って表示できるとかなり注目されたフォントです。

でも実際は、WindowsとMacで微妙に名前が違っていたり、Windowsの標準のウェイトでは線が細くかすれたようになってしまったりと問題が多く、使いにくいものでした。

ですが、使うことは可能です。

アメブロで表示フォントを「游ゴシック」にするには、以下のようなコードをCSSに追加します。

/* 表示フォントを「游ゴシック」にする */
body {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", -apple-system, BlinkMacSystemFont, sans-serif;
}

WindowsとmacOSでの名前の違いや、Windowsでのかすれてしまうという問題を回避するために、少々面倒くさい設定となっています。

意味は、

Windowsでは「"游ゴシック Medium", "Yu Gothic Medium"」を使う
macOSでは「"游ゴシック体", "YuGothic"」を使う
游ゴシックがない場合は初期設定「-apple-system, BlinkMacSystemFont, sans-serif」を使う

となります。

游ゴシックは魅力的なデザインのフォントの一つだとは思いますが、このように指定の仕方がトリッキーで不具合も発生しやすいことが予想されますので、個人的にはお勧めしません。

「BIZ UDPゴシック」に変える

数年前からWindowsに標準搭載されるようになった、有名なフォントメーカーであるモリサワ製の「BIZ UDPゴシック」というフォントも読みやすいフォントですので、アメブロの表示フォントとしてこちらを使う方法もご紹介します。

以下のようなコードをCSSに追加してください。

/* 表示フォントを「BIZ UDPゴシック」にする */
body {
  font-family: "BIZ UDPゴシック", "BIZ UDPGothic", -apple-system, BlinkMacSystemFont, sans-serif;
}

このフォントが搭載されていないmacOSなどでは初期設定のフォントが使われますが、「BIZ UDPゴシック」はGoogle Fontsなどから無料でダウンロードすることができます。

つまり、macOSにも無料でインストールできますので、インストールしてある場合は「BIZ UDPゴシック」で表示されます。

まとめ

以上、アメブロのCSS編集用デザインで表示フォントを変更するカスタマイズ方法をご紹介しました。

上でも書いたとおり、正直、初期設定で使うのがお勧めです。

ですが、デザインの都合上変更したい場合などに参考にして頂けたらと思います。

初期状態は？

おすすめは？

「メイリオ」に変える

「游ゴシック」に変える

「BIZ UDPゴシック」に変える

まとめ