テンプレートSmart導入メモ #2【フォントの変更】

テンプレートSmart導入メモ #1の続きです。

フォントを変更する

色々と調べていく中で、どうしても使いたいフォントが出てきた。それは、Noto Sans JPという書体。AdobeとGoogleの共同開発による書体で、「No more TOFU」を縮めて「Noto」だそう。

TOFU（豆腐）とは、PCにフォントが入っていないときに表示される小さい四角のことで、日本人が使っていた業界用語が世界共通認識になって広まったとのこと。

すごい話だよ、最初読んだときは嘘かと思った。

フォントスタイルの変更

すでに、Windows10とWindows11にはインストールされているらしい。これを自分のブログのメインフォントに使いたい。

WEBフォントとfont-familyを書き換えます。

@import url('https://fonts.googleapis.com/css2? family=Noto+Sans+JP:wght@100..900&display=swap');

font-family: 'Noto Sans JP', sans-serif;

Noto Sans JPは遅い？

WEBフォントには賛否両論あるようだけど、遅いっていうのが１番の悪さみたい。多くのサイトでCSSの書き方を、/earlyaccess/notosansjp.css って教えてくれてるけど、この方の言う通りにしたら早くなりました。ありがとうございます。

earlyaccess の PageSpeed Insights

display=swap の PageSpeed Insights

フォントサイズの変更

老眼鏡世代にはフォントが小さすぎるので、記事のフォントを大きくする。

パソコンのフォントサイズを大きくする

まずは、パソコンで見たときのフォントサイズを変更。

font-size（文字の大きさ）を 14px から 16px
　 font-weight（文字の太さ）を 500 から 400
letter-spacing（文字間）を 2px から 0px

メインのフォントを2px大きくしたので、見出しのフォントも2pxずつ大きくする　

スマホのフォントサイズも大きくする

次は、スマホで見たときのフォントサイズも大きくする。フォントサイズを大きくすると１行の文字数が減りすぎるので余白を減らす。

font-size（文字の大きさ）を 14px から 16px
それに合わせて見出しのフォントも2pxずつ大きく
margin-left（余白）を 15px から 10px

画面幅を変更する

サイドバーの幅と隙間を変える

パソコンで見たときのサイドバーが広すぎる気がするので変更。

　サイドバーの幅を 25VM から22VM
メインとサイドバーの幅を 30PX から 15PX
検索ボックスがはみ出るので 18VM から 17VM

スマホの表示幅を広げる

スマホで見ると記事の幅が狭くて見づらいので余白を減らします。

paddingを 30PX 5PX から 30PX 0PX

Ｘフォローボタンを付ける

詳細プロフィールへのリンクを消して、Ｘフォローボタンを付ける。

２ヶ月前にすごく悩んだやつだけど、今ならすぐできる。

これを消して↑　そのスペースにこれを入力する↓

<div style="text-align: center;">
<a href="https://twitter.com/nozpn11?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @nozpn11</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

これでテンプレートが綺麗にできたはず！！
もしこれを読んだ方で、お前全然違うぞ！？ってことだったらぜひ教えて下さい。

💖 読んでいただき有難うございました。