アメブロのフォントの変更方法を解説します。
フォントが変わるだけでグッとブログの魅力が上がるので試してみてください。
CSSのコードをコピペするだけです。
- アメブロのフォント変更方法
- コピペでできるフォント変更用CSSコード
- フォントCSSについて簡単な説明
参考になれば幸いです。
アメブロのフォント変更イメージ(Before→After)
こんな感じになるよう変更します。※見るデバイスによって変わります
では、実際に変更していきましょう。
アメブロのフォント変更方法
フォントの変更はCSSにフォント指定用のコードを追加して対応します。
CSS編集用デザインを使用していない方は「アメブロのデザインをカスタマイズする方法」を参考にしてください。
今回はCSSにフォント指定用のプロパティ「font-family」を追加します。
編集用CSSの一番下に下記のコードをコピペします。
/*フォントの設定 */
body {
font-family: 'ヒラギノ角ゴ ProN W3', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
}
こんな感じです。
コードの追加箇所ミスやコピペミス、変な文字やスペースが入ると表示が崩れる可能性があるので保存前に表示確認はしましょう。
解説
- 一般的に複数フォントを指定
- 左(1番目)から順に読んでいって、見ているパソコンにインストールされている最初のフォントが表示される
アメブロの標準のフォント設定はこうなっています。
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック','MS PGothic',sans-serif,メイリオ,Meiryo
つまり、パソコンにインストールされているフォントを次の順で探してヒットした最初のフォントで表示されます。
- ヒラギノ角ゴ Pro W3
- Hiragino Kaku Gothic Pro
- MS Pゴシック
- MS PGothic
- sans-serif
- メイリオ
- Meiryo
そして、たいていのWindowsパソコンだと「MS Pゴシック」になります。
これを次の設定に変えています。
font-family: 'ヒラギノ角ゴ ProN W3', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
- ヒラギノ角ゴ ProN W3
- Hiragino Sans
- ヒラギノ角ゴ ProN W3
- Hiragino Kaku Gothic ProN
- メイリオ
- Meiryo
- sans-serif
だいたいのWindowsパソコンはメイリオで表示されるようになります。
ヒラギノ角ゴはMac/iOSの標準フォント
BeforeもAfterも「ヒラギノ角ゴがある」と気になった方もいるかもしれません。
これはMacやiOSに標準インストールされているフォントです。やっぱキレイです。
Windowsでも有料でインストールできるので、入っているパソコンはこちらのフォントで表示されるようにしています。
アメブロのフォント変更まとめ
コピペで楽々1分でフォント変更が完了しました。
一気にグッとオシャレ度が増すので、より自分のブログが好きになります。
他にもいろいろとアメブロカスタマイズの記事を書いていますので、良かったら見てみてください。
最後まで読んでいただき、ありがとうございました。