きおろし

とある大学生のブログ

【ブログ初心者必見】簡単に文字の大きさ・フォントを変更してみた

ブログ初心者のきおろしです。ご覧いただきありがとうございます。

今回、私は文字のフォントと大きさを変更しました。

実は、4時間かけてついさっき終わったばかりなんですよね。(現在AM3時)(!)

まあなぜこうなったかというと、私Googleフォントを使ってみたかったんですよ。使ってみたかったのですが、もうずっとCSSとHTMLとかいじくりまわして、いくら調べてもできなくて悪戦苦闘しておりました。そしてついにGoogleフォントを使うのをあきらめて、もう簡単に設定できるのでいいや・・・、と思い断念。

やっぱりプログラミングの勉強って大事ですね~。

前置きが長くなりましたが、今回は文字の大きさとフォントの変更方法についてお話していきます。

 

やっぱり文字は大きいほうが見やすい!

/* 文字の大きさ */
.entry-content {
font-size:18px;
line-height:1.8em;
}

これをデザインCSSにコピーしてください。

そしてこの18の部分の数字を変えると文字の大きさが変わります。数字が大きければ大きくなり、小さくなれば小さくなる。私は22です。少し大きめ。

ブログを始めた方でなにも設定しないと、デフォルト(初期設定)の大きさなんですね。私からすると少し小さく感じます。

やっぱり小さい文字ですと、お年寄りの方や視力悪い人なんかは見ずらいんですよね。あと、目が疲れてる時に文字が小さいとイライラします。(笑)

ということで私は少し大きめに設定してあります。ぜひここは設定しましょう。読者的にもSEOにも良い影響があります。

 

フォントも変更

游明朝よりも游ゴシックのほうが見やすい?

/* フォント */
body {
font-family: "游ゴシック", Yu Gothic;
}

もしメイリオとか他のフォントにしたければ、文字とアルファベットを変えてください。例えば、メイリオにしたければ「游ゴシック」から「メイリオ」、「Yu Gothic」から「Meiryo」というかんじで。

w3g.jp

私はこれをもとにいじくりまわして、游ゴシックになりました(笑)

今回の変更で游ゴシックにしたのですが、游明朝だとなんかデフォルトと変わらないような気がして、ちょっと見づらいかな~とも思い游ゴシックに変更しました。

ただ、游ゴシックに変更しても、文字が細く薄い感じがしたので、これまた見づらい・・・。

f:id:ogw0206:20200501040959p:image

なんか薄いし細くて見づらくない?(気のせい?)

どうしようかなと思い、「游ゴシック 薄い」と検索しました。

そしたら見事に有能なサイトを見つけました。(本当にありがとうございます)

www.cherrypieweb.com

じゃじゃーん。こちらです。

ほんと激おこぷんぷん丸ですよ。もうちょっと利用者を考えて開発してほしかったですね!

で、以下をデザインCSSにコピーしました。

body { font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; }

これをコピーすると太くなり、見やすくなりました。

f:id:ogw0206:20200501042243p:plain

薄くて細いが

 

f:id:ogw0206:20200501042255p:plain

太くしました。

後者のほうが見やすくないですか?若干の違いかもしれませんが、大事です。

上の写真はPCのスクショです。スマホで見てる方は分かると思いますが、文字が小さいので後者のほうがさらに見えやすくなっているのではないでしょうか。

 

f:id:ogw0206:20200501042753p:image


f:id:ogw0206:20200501042749p:image

これはスマホからのスクショです。どうでしょうか。おそらくこれも後者のほうが見やすいでしょう。

POINT

デフォルト(初期設定のまま)だと文字が読みにくいと思う人もいるので

ちょうどいい文字の大きさ・太さにしよう。