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

アメブロの表示文字(フォント)をメイリオにするカスタマイズ方法をご紹介します。

新タイプ(第二世代)のCSS編集用デザインに対応しています。
旧タイプ(第一世代)のCSS編集用デザインに対応しています。

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

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

これを、Windows(Vista、7、8、8.1、10以降)で「メイリオ」というもっと見やすいフォントで表示されるようにカスタマイズしてみましょう。

CSSにコードを追加してカスタマイズ

カスタマイズはブログデザインCSSの編集で行います。

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

これで完了です。

ただし、この場合、「メイリオ」フォントが(例えばMac版のMicrosoft Office等とともに)インストールされているMacで表示した時にも、Windowsと同様に「メイリオ」で表示されます。

もしMacで見た時は「ヒラギノ・・・」のままにしたいという場合は、以下のコードに置き換えて下さい。

ただし、この場合も、ヒラギノ角ゴシック体フォントが(例えばあるバージョンの一太郎等とともに)インストールされているWindowsで表示した時は、「メイリオ」ではなく「ヒラギノ」で表示されると思います(ヒラギノをインストールしたWindowsを持っていないので未確認ですが)

表示を確認する

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

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

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

カスタマイズ後は、↓このようなフォントで表示されるようになります。

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

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

まとめ

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

他のカスタマイズとの相性にもよりますが、記事がずいぶん読みすくなる場合もありますので、よろしければ、一度お試しください。

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。