鳩ブログ

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

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

f:id:hato36:20200705232938p:plain

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

私はフォントフェチで、Microsoft Wordを使って資料を作る時も、校正をを最後にするのでそれまでの間は気に入ったフォントで書いていたりするぐらい。
また、過去にWindowsで開発をやっていた頃は、Windowsだけど当時のmacで使われていたOsakaフォントをエディタに適用してつかったりもしていた。

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

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

 

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

まずはフォント選びから

f:id:hato36:20200705234114p:plain

fonts.google.com

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

f:id:hato36:20200705234541p:plain

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

f:id:hato36:20200705234754p:plain

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

<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とか使っているなら履歴管理もされるでしょうが、はてなブログはそういう機能は無いので、自分でちゃんと管理しましょう。
Evernote必須でも無いし、OneDriveでも付箋でも何でもOK。ポイントは履歴があって元に戻せることが重要。自分が何の作業をしたのか?を忘れることって意外とあるので、作業内容をキャプチャしつつそれをEvernoteに貼り付けるなんてのも(何かあった際の)作業を効率化するポイントになる。

開発者ってその辺無意識にやっていたりするので、開発者では無い人ならばなおのこと。もしもの時に「元に戻せる」というのを意識してメモを取りながら作業をするとよい。画面のキャプチャも文字のコピペも最大限に活用してカスタムしてみると良いだろう。

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

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

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: 単行本