前回記事が、自分にとってけっこう大きいシェアをもらうことができました。ありがとうございます！
この記事友人も見ていて、Lineで誤字や脱字をものすごく指摘してきたり、自分でシェアしてたり鬱陶しかったのですが、友人としては何でバズったのかいまいち分からないみたいです。
その友人から見ると、フォントの話も補色の話も、ほぼ定石通りなんだそう。
ただ僕から見ると意外だったので記事にしたのですが、やっぱり人から聞いた「気づき」だったり、自分が当然だと思っていることも記事にすることは価値があるなあと感じ取れた瞬間でもありました。
今回は具体的にGoogleフォントの導入の仕方を、はてなブログを例にとってやってみたいと思います。
Googleフォントの導入の仕方
- 使いすぎると、すごく重くなります
- 英語しかできません…orz
やり方はそこまで難しくありません。まずはGoogleフォントにアクセスします。
そしたらタブの「Word」を押します。
そしたら「Preview Text」から、自分が入れたい単語を入れます。そうすると下の文字に反映されるので、どのフォントが良いか選んでいきます。
フォントサイズを下げた方がみやすいですね。
フォントの数はものすごくたくさんあるので、選ぶのは正直かなり大変です。
自分はかなり考えこんでしまったのですが、あんまり深いこと考えなくっても良いと思います。何にしても、ある程度まとまる気がしますので。
例えばこれに選んでみることにしました！変化したのが分かりやすいようなのにしてます。
そうするとページが遷移されて、いろいろと設定できるみたいですが、下の方の「３」と「４」が必要な部分です。
やり方としてはいろいろあるみたいですが、今回はこの「３」のところをコピーして、
はてなブログであれば、設定の「headに要素を追加」にコピペします。一般的にはheadタグの中に入れれば良いと思います。
そして、Googleフォントの４番をコピペします。
これをはてなブログならば「デザインCSS」、一般的にはスタイルシートに入れて、デザインしていきます。
書き方ですが、はてなブログの、例えばブログタイトルに入れたいのであれば、
#title a{ /*ここにペースト！*/ }
自分の例で言うと、
#title a{ font-family: 'Candal', sans-serif; }
と言った感じです。後半の「サンセリフ」は、一般的に「body」などでフォントが指定されていると思うので消しても良いかもしれません。
するとこんな感じになりました。
印象がグッと変わりますよね！
その他のところも変えたいのであえば、はてなブログであれば、以前つくった文字の構成図
を見ていただくと、わりと簡単にできるかなあと思いますのでぜひ試してみてください。
まとめ
ちなみにGoogleフォントは、導入すると若干重くなります。特に本文全体に適応したりすると、とんでもなく遅くなってしまうので気をつけてください。
こういったちょっとした変化が、他ブログとの差別化になったりするかもしれないのでぜひ試してみてください！
フォントや配色に関しての和む話
はてなカスタマイズまとめはこちらから
