鳩ブログ

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

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

f:id:hato36:20200705232938p:plain

フォントの種類とフォントサイズを変更してみました。
フォント好きにはたまらない作業ですw

 

私はフォントが好きだ

私はフォントフェチで、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とか使っているなら履歴管理もされるでしょうが、はてなブログにはそういう機能は無いので、自分でちゃんと管理しましょう。