- トップ>
- アメブロカスタマイズ>
- フォントの変更
アメーバブログのフォント(書体)の変更
アメーバブログ(アメブロ)の CSS を編集して、無料でデザインをカスタマイズする方法の続きです。
背景の変更に続いて、今度はブログ全体のフォント(書体)を変更してみたいと思います。
フォントリストから CSS で様々なフォントの設定が可能ですが、設定したフォントが閲覧者のシステムにインストールされていない場合は表示できません。
その場合は、第一候補がなければ第二候補、第二候補がなければ第三候補のフォントが表示されます。
以下のように、左から順番に候補が並びます。(一番左が第一候補となります)フォントの種類は、「 , 」(カンマ)で区切ります。
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
それでは実際にアメブロ全体のフォント(書体)を変更してみたいと思います。
アメブロへログインして「ブログを書く」-「デザインの変更」-「CSSの編集」を選択します。
スポンサーリンク
画像内で赤線を引いた、
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
を変更すると、アメーバブログ全体のフォントが変更されます。
HG丸ゴシックM-PRO を追加してみたいと思います。
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
の第一候補に
"HG丸ゴシックM-PRO",
を追加して
font-family:"HG丸ゴシックM-PRO", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
と変更します。
※画像は保存後の Internet Explorer での画面です。
表示を確認する(プレビュー)をクリックすると、ブログ全体が HG丸ゴシックM-PRO に変更されたことが確認できます。
保存後に各種ブラウザ、Internet Explorer(インターネット・エクスプローラー)、Firefox(ファイアフォックス)、Google chrome(グーグル・クローム)、Safari(サファリ)、Opera(オペラ)、Lunascape(ルナスケイプ)で表示を確認しましたが、特に問題なく表示されています。(バージョンによる違いもありますので、 HG丸ゴシックM-PRO での表示を保証するものではございません)
他のフォント(書体)への変更も全く同じ作業で可能です。
font-family:"HG行書体", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
に変更すると、以下のように HG行書体 で表示されます。
※画像は保存後の Internet Explorer での画面です。
font-family:"MS UI Gothic", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
に変更すると、以下のように MS UI Gothic で表示されます。
※画像は保存後の Internet Explorer での画面です。
font-family:"HGP創英角ポップ体", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
に変更すると、以下のように HGP創英角ポップ体 で表示されます。
※画像は保存後の Internet Explorer での画面です。
今回は、(個人的主観ですが)各種ブラウザでも MS UI Gothic が綺麗に表示されていたので採用しました。ご自身のブログの内容に合ったフォントを選択して頂けたらと思います。お役に立てば幸いです。
スポンサーリンク