目次

【アメブロカスタマイズ】表示フォントを「游ゴシック」にする方法

新・旧のCSS編集用デザイン両対応です

アメブロの表示フォントを「游ゴシック」にするカスタマイズ方法をご紹介します。

なぜかWindowsでは「游ゴシック」、Macでは「游ゴシック体」となっていますが、当記事では呼び名を「游ゴシック」で統一したいと思います。

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

もちろん今でも使っているサイトはたくさんありますが、デバイスやOSが異なっても（Linuxやモバイルも含めて）同じ日本語フォントを使える方法として、今ではWebフォントという選択肢を選びやすくなったため、一時期に比べると減ったように思います。

ですが、アメブロの場合、ユーザーがカスタマイズのために編集できる範囲の問題でWebフォントを使うのが難しいため、今でもWindowsとMacで同じフォントで表示するという意味では「游ゴシック」は有用な選択肢の一つかもしれません。

そこで当記事では、アメブロの表示フォントを「游ゴシック」に変更するカスタマイズ方法をご紹介したいと思います。

なお、カスタマイズはCSSの編集で行います、やり方がわからない場合は先にチェックしておいて下さい。

CSSを編集してアメブロをカスタマイズをする手順
アメブロをカスタマイズするための専用のデザイン「CSS編集用デザイン」に用意されている「ブログデザインCSS」を編集してアメブロをカスタマイズする手順について説明します。

アメブロの表示フォントを游ゴシックにする

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

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

コード解説（簡単に）

上記コードの構成は以下のようになっています。

  • Windows用の設定→「“游ゴシック Medium”, “Yu Gothic Medium”」
  • Mac用の設定→「“游ゴシック体”, “YuGothic”」
  • 初期設定→「-apple-system, BlinkMacSystemFont, sans-serif」

つまり、Windowsは「游ゴシック Medium」、Macは「游ゴシック体」というフォントで表示し、Linux等のように「游ゴシック」がインストールされていない場合は、アメブロの初期設定のフォントで表示します。

正直、「游ゴシック」以外ではあまり見かけないような、少し特殊な書き方だと思います。

普通なら、Windows用の設定は「“游ゴシック”, “Yu Gothic”」となりそうなものですが、その設定で選択されるフォントの太さ（ウェイト）の「標準（Regular）」が細すぎて見にくい上、Macでは「游ゴシック体」とするだけでもう少し太い「Medium」の表示になるため、結局同じ表示にならないという、何のために「游ゴシック」を選んだのかがよくわからないことになってしまいます。

そこで、Windowsの設定に「Medium」を付加して少し太めのフォントにすることで、Macと同じような表示になるようにという、苦肉の策ですね。

特殊な書き方は、そのときはうまく行っても、その後も意図した動作をするかどうかがわかりませんので、よほどWindowsとMacの表示フォントを同じにすることにこだわりがあるのでなければ、個人的には、あまりお勧めできないと感じます。

まとめ

以上、アメブロの表示フォントを「游ゴシック」に変更するカスタマイズ方法をご紹介しました。

よかったら参考にして下さい。

(準備中)
(準備中)