アメーバブログのフォント（書体）の変更

アメーバブログ（アメブロ）の CSS を編集して、無料でデザインをカスタマイズする方法の続きです。

背景の変更に続いて、今度はブログ全体のフォント（書体）を変更してみたいと思います。

フォントリストから CSS で様々なフォントの設定が可能ですが、設定したフォントが閲覧者のシステムにインストールされていない場合は表示できません。

その場合は、第一候補がなければ第二候補、第二候補がなければ第三候補のフォントが表示されます。

以下のように、左から順番に候補が並びます。（一番左が第一候補となります）フォントの種類は、「 , 」（カンマ）で区切ります。

font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

それでは実際にアメブロ全体のフォント（書体）を変更してみたいと思います。

アメブロへログインして「ブログを書く」-「デザインの変更」-「CSSの編集」を選択します。

画像内で赤線を引いた、

font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

を変更すると、アメーバブログ全体のフォントが変更されます。

HG丸ｺﾞｼｯｸM-PRO を追加してみたいと思います。

font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

の第一候補に

"HG丸ｺﾞｼｯｸM-PRO",

を追加して

font-family:"HG丸ｺﾞｼｯｸM-PRO", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

と変更します。

※画像は保存後の Internet Explorer での画面です。

表示を確認する（プレビュー）をクリックすると、ブログ全体が HG丸ｺﾞｼｯｸM-PRO に変更されたことが確認できます。

保存後に各種ブラウザ、Internet Explorer（インターネット・エクスプローラー）、Firefox（ファイアフォックス）、Google chrome（グーグル・クローム）、Safari（サファリ）、Opera（オペラ）、Lunascape（ルナスケイプ）で表示を確認しましたが、特に問題なく表示されています。（バージョンによる違いもありますので、 HG丸ｺﾞｼｯｸM-PRO での表示を保証するものではございません）

他のフォント（書体）への変更も全く同じ作業で可能です。

font-family:"HG行書体", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

に変更すると、以下のように HG行書体 で表示されます。

※画像は保存後の Internet Explorer での画面です。

font-family:"MS UI Gothic", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

に変更すると、以下のように MS UI Gothic で表示されます。

※画像は保存後の Internet Explorer での画面です。

font-family:"HGP創英角ﾎﾟｯﾌﾟ体", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;

に変更すると、以下のように HGP創英角ﾎﾟｯﾌﾟ体 で表示されます。

※画像は保存後の Internet Explorer での画面です。

今回は、（個人的主観ですが）各種ブラウザでも MS UI Gothic が綺麗に表示されていたので採用しました。ご自身のブログの内容に合ったフォントを選択して頂けたらと思います。お役に立てば幸いです。