鳩ブログ

サラリーマンが綴るブログ

ブログのフォントを変更した

f:id:hato36:20200705232938p:plain

フォントの種類とフォントサイズを変更した。

 

私はフォントが好きだ

私はフォントフェチで、Microsoft Wordを使って資料を作る時も、校正をを最後にするまでは気に入ったフォントで資料を作っている。
また、過去にWindowsで開発をやっていた頃は、Windowsだけど当時のmacで使われていたOsakaフォントを使っていた。

今まではどうせ皆スマホで見ているだろうし...はてなブログ Proを使っていない私はスマホ側の設定は変更できないし....と思っていたが、PCからのアクセスもWindowsとmacおよびLinux合わせて35%程はアクセスがあるので改善してみた。

自分自身もmacで見ているので、どうせなら美しいフォントで読み返したいという思いもある。

 

調べたところ、最近ではWebフォントなるものを使ってフォントを変えることが一般的な様なので私もそれにならって設定を行った。

まずはフォント選びから

f:id:hato36:20200705234114p:plain

fonts.google.com

日本語フォントを選ぶので、Google FontのサイトからLanguateの部分でJapaneseを選ぶ。そうすると日本語フォントがピックアップされる。
そこから好きな日本語フォントを選択すると画面右側に必要なコードが表示される。

f:id:hato36:20200705234541p:plain

はてなブログの設定(私はProではない)

f:id:hato36:20200705234754p:plain

デザインーカスタマイズーヘッダーーヘッダー下と進んで、下記の様に利用するフォントの文字列を入力する。(実際はGoogle Fontsのサイトの情報をコピペするだけ)

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

 次いで、デザインーカスタマイズーデザインCSSの設定を以下の様に変更。

/* <system section="theme" selected="6653586347155924442"> */
@import "https://blog.hatena.ne.jp/-/theme/6653586347155924442.css";
/* </system> */

#title{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 32px;
letter-spacing: 15px;
}

body{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 17px;
}

これで現在の私のサイトの見た目で使われているフォントとフォントサイズに変更される。

もちろんフォントを変えたい時はヘッダー下で読み込むフォントを変えてあげた上で、CSSのfont-familyを変えて、あとはサイズなどみたままの英語の部分をちょこっといじってあげればOK。
もう少しいろいろなオプション(行間とか文字間とかね)もあるので、必要ならばその辺を調べて追記してあげれば簡単に変わる。

ポイントは元に戻せないと困るので、作業前にもとのヘッダー下の情報やCSSの情報をEvernoteにでもコピーして履歴を保持しておくこと。
これは開発でGitとか使っているなら履歴管理もされるだろうが、はてなブログにはそういう機能は無いので、自分でちゃんと管理しよう。

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログ Perfect GuideBook [改訂第2版]

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: 単行本
 
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

  • 作者:Mana
  • 発売日: 2019/03/16
  • メディア: Kindle版