アメブロをメイリオフォンで表示するカスタマイズ方法

  • アメブロ
  • このエントリーをはてなブックマークに追加

アメブロの表示文字(フォント)をメイリオにする方法です。

アメブロのCSS編集用デザインでは、Windowsでは「MS Pゴシック」、Macでは「ヒラギノ角ゴ Pro W3」(インストールされていればWindowsでも)というフォントを使って表示されるようになっています。

これを、アメブロをWindowsで表示した時に(インストールされていればMacでも)「メイリオ」という見やすいフォントを使うようにカスタマイズできます。

アメブロの表示フォントをメイリオに変更する

今回は、アメブロのブログデザインCSSの編集でカスタマイズを行います。

ブログデザインCSSの最後に以下のコードを追加し、保存して下さい。

/* メイリオフォントで表示する */
body {
  font-family: メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;
}

大抵は、これでOKです。

表示を確認する

アメブロのCSS編集用デザインは、初期状態では、Windowsで表示した時に「MS Pゴシック」という古いフォントで表示されます。

↓このようなフォントです(カスタマイズ前)

当記事のカスタマイズは、これを、Windows Vista以降に導入された読みやすいフォント「メイリオ」に変える方法です。

実施すると、↓このようなフォントになります(カスタマイズ後)

実際にやってみるとずいぶんと印象が変わることが多いのですが、表示例がシンプル過ぎて伝わりにくいですね、申し訳ありません。

なお、このカスタマイズにより文字の幅や行間が変わったりすることもありますので、既にデザインのカスタマイズをしてある場合は表示崩れが起こらないか注意したほうが良いかと思います。

また、Macには標準でメイリオフォントは入っていませんし、敢えてインストールする方も少ないと思いますので、当記事のカスタマイズによるMacでの表示への影響はほとんどないと思って差し支え無いだろうと思います(iPhone、iPad、Androidも同様)

まとめ

以上の手順で、アメブロをWdindowsでの表示したときに、より読みやすい「メイリオ」フォントで文字が表示されるようにカスタマイズできます。

他のカスタマイズとの相性にもよりますが、ずいぶん見やすくなる場合もありますので、一度試されてみてはいかがでしょうか。

関連記事

  • アメブロ
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す