【簡単】アメブロのフォントをおしゃれに！（コピペで簡単変更）

アメブロのフォントの変更方法を解説します。

フォントが変わるだけでグッとブログの魅力が上がるので試してみてください。

CSSのコードをコピペするだけです。

参考になれば幸いです。

【アメブロカスタマイズまとめ】CSSコピペでできるおしゃれアレンジアメブロカスタマイズ記事をまとめていきます。 コピペするだけでできるものがほとんどなので「Webとか全然わかんない！」という方も簡...

アメブロのフォント変更イメージ（Before→After）

こんな感じになるよう変更します。※見るデバイスによって変わります

では、実際に変更していきましょう。

アメブロのフォント変更方法

フォントの変更はCSSにフォント指定用のコードを追加して対応します。

CSS編集用デザインを使用していない方は「アメブロのデザインをカスタマイズする方法」を参考にしてください。

今回はCSSにフォント指定用のプロパティ「font-family」を追加します。

編集用CSSの一番下に下記のコードをコピペします。

/*フォントの設定 */
body {
font-family: 'ヒラギノ角ゴ ProN W3', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
}

こんな感じです。

コードの追加箇所ミスやコピペミス、変な文字やスペースが入ると表示が崩れる可能性があるので保存前に表示確認はしましょう。

解説

アメブロの標準のフォント設定はこうなっています。

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS PGothic',sans-serif,メイリオ,Meiryo

つまり、パソコンにインストールされているフォントを次の順で探してヒットした最初のフォントで表示されます。

そして、たいていのWindowsパソコンだと「ＭＳ Ｐゴシック」になります。

これを次の設定に変えています。

font-family: 'ヒラギノ角ゴ ProN W3', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;

だいたいのWindowsパソコンはメイリオで表示されるようになります。

ヒラギノ角ゴはMac/iOSの標準フォント

BeforeもAfterも「ヒラギノ角ゴがある」と気になった方もいるかもしれません。

これはMacやiOSに標準インストールされているフォントです。やっぱキレイです。

Windowsでも有料でインストールできるので、入っているパソコンはこちらのフォントで表示されるようにしています。

アメブロのフォント変更まとめ

コピペで楽々1分でフォント変更が完了しました。

一気にグッとオシャレ度が増すので、より自分のブログが好きになります。

他にもいろいろとアメブロカスタマイズの記事を書いていますので、良かったら見てみてください。

最後まで読んでいただき、ありがとうございました。

【アメブロカスタマイズまとめ】CSSコピペでできるおしゃれアレンジアメブロカスタマイズ記事をまとめていきます。 コピペするだけでできるものがほとんどなので「Webとか全然わかんない！」という方も簡...