読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

Googleフォントを導入してブログにちょっとした変化を出す方法【はてなブログを例にとって】

Web制作
スポンサーリンク

前回記事が、自分にとってけっこう大きいシェアをもらうことができました。ありがとうございます!

www.yukihy.com

この記事友人も見ていて、Lineで誤字や脱字をものすごく指摘してきたり、自分でシェアしてたり鬱陶しかったのですが、友人としては何でバズったのかいまいち分からないみたいです。

その友人から見ると、フォントの話も補色の話も、ほぼ定石通りなんだそう。

ただ僕から見ると意外だったので記事にしたのですが、やっぱり人から聞いた「気づき」だったり、自分が当然だと思っていることも記事にすることは価値があるなあと感じ取れた瞬間でもありました。

今回は具体的にGoogleフォントの導入の仕方を、はてなブログを例にとってやってみたいと思います。

Googleフォントの導入の仕方

  1. 使いすぎると、すごく重くなります
  2. 英語しかできません…orz

やり方はそこまで難しくありません。まずはGoogleフォントにアクセスします。

そしたらタブの「Word」を押します。

f:id:ftmaccho:20150918121554p:plain

そしたら「Preview Text」から、自分が入れたい単語を入れます。そうすると下の文字に反映されるので、どのフォントが良いか選んでいきます。

f:id:ftmaccho:20150918121827p:plain

フォントサイズを下げた方がみやすいですね。

f:id:ftmaccho:20150918122429p:plain

フォントの数はものすごくたくさんあるので、選ぶのは正直かなり大変です。

自分はかなり考えこんでしまったのですが、あんまり深いこと考えなくっても良いと思います。何にしても、ある程度まとまる気がしますので。

例えばこれに選んでみることにしました!変化したのが分かりやすいようなのにしてます。

f:id:ftmaccho:20150918122700p:plain

そうするとページが遷移されて、いろいろと設定できるみたいですが、下の方の「3」と「4」が必要な部分です。

やり方としてはいろいろあるみたいですが、今回はこの「3」のところをコピーして、

f:id:ftmaccho:20150918123057p:plain

はてなブログであれば、設定の「headに要素を追加」にコピペします。一般的にはheadタグの中に入れれば良いと思います。

f:id:ftmaccho:20150918123403p:plain

そして、Googleフォントの4番をコピペします。

f:id:ftmaccho:20150918125410p:plain

これをはてなブログならば「デザインCSS」、一般的にはスタイルシートに入れて、デザインしていきます。

f:id:ftmaccho:20150918125513p:plain

書き方ですが、はてなブログの、例えばブログタイトルに入れたいのであれば、

#title a{
    /*ここにペースト!*/
}

自分の例で言うと、

#title a{
    font-family: 'Candal', sans-serif;
}

と言った感じです。後半の「サンセリフ」は、一般的に「body」などでフォントが指定されていると思うので消しても良いかもしれません。

するとこんな感じになりました。

f:id:ftmaccho:20150918124121p:plain

印象がグッと変わりますよね!

その他のところも変えたいのであえば、はてなブログであれば、以前つくった文字の構成図

www.yukihy.com

を見ていただくと、わりと簡単にできるかなあと思いますのでぜひ試してみてください。

まとめ

ちなみにGoogleフォントは、導入すると若干重くなります。特に本文全体に適応したりすると、とんでもなく遅くなってしまうので気をつけてください。

こういったちょっとした変化が、他ブログとの差別化になったりするかもしれないのでぜひ試してみてください!

フォントや配色に関しての和む話

www.yukihy.com

はてなカスタマイズまとめはこちらから

www.yukihy.com