元OLのゆるゆるFIREライフ

32歳で脱サラ。電脳せどり・投資・日常について書きます。

≪はてなブログ≫フォントをおしゃれにするには?

こんにちは、はるるです。

ブログをはじめて3日目になりました。3日坊主になるかどうかの瀬戸際なので、モチベーションを上げるためにフォントを変えてみました。

結構簡単に設定できたので、その方法を紹介したいと思います。

STEP1:Google Fontsでお気に入りのフォントを探す

Google Fonts(グーグルフォント)はGoogleが無料で提供しているWebフォントのことで誰でも自由に使うことが出来ます。

まずはGoogle Fontsでお気に入りのフォントを見つけてみてください。

※赤枠の箇所を"Japanese"に変えると日本語のフォントに絞り込めます。

例えば、こんなフォントがあります。

STEP2:ソースコードを呼び出す

①お気に入りのフォントが見つかったらクリックします。

②下の方にスクロールすると"Style"という箇所があります。太さ順に文字が並んでいるので、どれにするか決めたら右端の"+"をクリックします。

③画面右上にある赤枠の四角いやつをクリックします。

STEP3:ソースコードをはてなブログの設定箇所に貼り付ける

①"Use on the web"にフォントを設定するための2つのコードが表示されます。

↓は"M PLUS Rounded 1c"のRegular400のコードです。

HTML用

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">

CSS用

  1. font-family: 'M PLUS Rounded 1c', sans-serif;

②HTML用コードをはてなブログ管理画面の「デザイン▷カスタマイズ:ヘッダ:ブログタイトル下」に貼り付ける。

③同じようにCSS用コードをはてなブログ管理画面の「デザイン▷カスタマイズ:デザインCSS」に貼り付ける。

④忘れずに保存ボタンを押したら(忘れがち…)完了です(*^-^*)

おわりに

フォントを変えるだけでブログの雰囲気が一気に変わりますよね。ちなみにこのブログで使っているのは"M PLUS Rounded 1c"のRegular500です。丸っこくて読みやすいので気に入りました。皆さんもよかったらこのやり方でお気に入りのフォントに変えてみてください。