こんにちは！
オンラインBizサポート講師
井上かおりです。
文字の書体（フォント）が違うブログを見ては
「アレ、どうやっているんだろう？」
「私のブログの書体も変えられるのかな？」
そう思ったことはありませんか？
標準のままでも悪くはないけれど、おしゃれなフォントを使っているブログを見ると、うらやましい気分になりますよね。
実は、アメブロの書体（フォント）は変えることができるんです！
書体（フォント）の変更方法は2つあります。
- PC版のCSS編集で変える
- 記事ごとにHTML表示で変える
「PC版のCSS編集」で変える方法は、一度設定すれば「過去・現在・未来」の記事が全部変わります。
ですが、スマホ版（アプリやブラウザ）には反映されないんですよね。
あくまで「パソコンで見たとき」の書体が変わる設定です。
もう一つの方法
「記事ごとにHTML表示で変える」方法は、1記事ごと、毎回設定が必要なんです。
手間はかかるけど、スマホから見た時も書体が変わります。ここが最大のメリット！
なんですが、毎回設定するのは、めんどうですよね。
そこで本日は、「PC版のCSS編集」でブログの書体（フォント）を変更する方法についてお伝えします。
書体（フォント）を変更する前に準備しておくこと2つ
書体（フォント）を変えてブログの雰囲気をガラリと変える前に、作業をスムーズに進めるため準備することが2つあります。
- ブログデザインを変更する
- 今のCSSをコピーする
1.ブログデザインを変更する
アメブロで書体（フォント）を変えるには、ブログデザイン「CSS編集用デザイン」を使っていないと変更できません。
ほかのデザインを使っている方は、デザインの変更を先にしておいてくださいね。
デザインの変更方法
1.ブログ管理画面の左下にある【デザインの設定】をクリックします。
2.「CSS編集用デザイン」になっているか確認します。
ほかのデザインを使っていたら、デザインを変更します。
3.下にスクロールして【カテゴリから探す】→「カスタム可能」をクリックします。
4.【カスタム可能デザイン一覧】から「CSS編集用デザイン」を選びます。（下にスクロールする）
「CSS編集用デザイン」が並んでいます。
オススメは真ん中のデザイン。
2.今のCSSをコピーする
設定を触る前に万が一、失敗しても元に戻せるように念のため、今のCSSを全部、メモ帳などにコピーしておきます。
もし、設定の仕方を間違えた場合でもコピーがあれば元に戻せるので安心です。
1.「CSSの編集」をクリックして、画面を開けます。
2. CSSの編集画面を開けたら、「現在使用中のブログデザインCSS」を全部コピーして、メモ帳などに保存しておきます。
好みの書体（フォント）を選ぶ
ブログの読みやすさを左右するのが、フォント選び。
今回、ご紹介するのは、次の2つです。
『メイリオ』：大きめで丸みのあるデザイン。画面上でとても読みやすいフォント。
『遊ゴシック体(ミディアム)』：読みやすく、長文を読んでも目が疲れにくいフォント。
選んだ書体（フォント）コードをコピーする
使いたいフォントが決まったら、専用コードをコピーしておきます。
●メイリオ
「メイリオ」を優先。
「メイリオ」が表示されない場合は、「ＭＳ Ｐゴシック」や「ヒラギノ角ゴシック」で表示されます。
↓ここから下コピー
/* フォントの設定 */
body {
font-family: “メイリオ, Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', "ＭＳ Ｐゴシック",'MS PGothic', sans-serif;
}
⚫︎遊ゴシック体フォント(ミディアム)
「游ゴシック体」を優先。
「游ゴシック体」が表示されない場合は、「メイリオ」や「ヒラギノ角ゴシック」で表示されます。
↓ここから下コピー
【遊ゴシック体フォント(ミディアム)コード】
/* フォントの設定 */
body {
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, メイリオ, Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', "ＭＳ Ｐゴシック", 'MS PGothic', sans-serif;
}
書体（フォント）の変更方法
コピーして準備ができたらいよいよ設定です。
1.【デザインの設定】から「CSSの編集」をクリックします。
2.CSSの編集画面を一番下までスクロールします。
3.コピーしたコードを一番下に貼り付けます。
コードを貼り付ければ完成なんですが、保存を押すのはちょっと待って！
プレビューで確認する
1.きちんと書体（フォント）が反映されているか、『表示を確認する』ボタンをクリックして、必ず確認してください。
2.書体（フォント）が反映できていたら保存しましょう。
ブログの書体（フォント）を変える理由
なぜ、わざわざ手間をかけてまで書体（フォント）を変えるのは、「ブログの第一印象」をよくする効果があるからです。
パッと開いた瞬間に「あ、このブログ読みやすそう」「センスがいいな」と記事の内容以前に「見た目」で決めてしまうことも多いのです。
私が書体（フォント）を変えたワケ
実は私も、ブログを始めた頃は標準のフォントのまま記事を書いていました。
あるとき、自分のブログを見ていたら「文字がカクカクしていて、冷たい印象だな…」と感じてしまったんです。
「もっと柔らかい、優しい感じにならないかなぁ」と…
そこで、画面上で読みやすいと聞いていた『メイリオ』に設定し直したんです。
大きめで丸みのあるデザイン。
画面全体がふんわりと柔らかく感じられようになった気がして、とても気に入っています
ブログの書体（フォント）フォントは変えることができる
書体（フォント）ひとつで、ブログの読みやすさや雰囲気は驚くほど変わります。
- 「カスタム可能」なデザインに変更する
- 「メイリオ」や「遊ゴシック」など、好みの書体（フォント）を選ぶ
- 保存する前に、必ずプレビューで確認する
読者さんにとって読みやすいブログにするために、まずは自分好みの書体（フォント）に変えるところから一歩踏み出してみましょう。
もし、手順通りにやってみたけれど「うまく反映されない」「ここがわからない」といったことがありましたら、お気軽にコメント欄からご質問ください。
せっかく「やってみよう！」と設定に挑戦したのに、できないままで終わってしまうのは本当にもったいないことです。
あなたのブログが、よりあなたらしく、そして読者さんに想いが届きやすいものになるように応援しています
読者が本当に知りたい情報が書いてあるか
記事タイトルと内容、テーマのチェック
50代女性のおうちビジネスを加速させるブログ構築とオンラインツールの使い方をサポート
