Webフォントでブログを華やかに! Google Fontsの「Quicksand」がいい感じ【WordPress、はてなブログ導入方法】

Google Fonts

フォントを変える。

多くのメディアの記事だとか、ブログだとかを読んでいて本当にフォントって重要だと思います。フォントによって記事の印象が変わったり、記事の読みやすさ読む意欲すらにも影響してしまいます。

ぼくは別にフォントについて、タイポグラフィーを学んだわけじゃないけど、Powerpointとか資料作るときにもフォントを見やすいように意識して使っています。

そして自分のブログもいい感じのフォントを使いたいなーということで、Google Fonts「Quicksand」というフォントをご紹介。WordPressはてなブログでの導入方法も解説します。

Sponsored link

Google Fontsって何?

Google Fontsとは、Googleが提供している商用利用可能な無料のWebフォントです。ではWebフォントとは何なのでしょうか?

フォントはPCにインストールされているものに依存する

通常、Webページを閲覧しているときのフォントというものは、閲覧しているPCにインストールされているフォントに依存してしまいます。

MacとWindowsで、文字を読んだときに「同じサイトなのにフォントが違う!」という経験をしたことがある人は多いと思うのですが、これはPCにインストールされているフォントがそもそも違うことからです。

このようにPCによって「フォントが変わってしまう…」という問題を解消するために、Webフォントが生まれました。

Webサーバーからフォントを持ってくる「Webフォント」

フォントが閲覧しているPCによって変わってしまわないように、Webサーバー上にフォントのファイルを置き、そこからフォントを読みこむのが「Webフォント」です。

単純に考えると、「Webフォントを導入すれば、どんなPCからでも同じようなフォント表示をしてくれる!」と抑えておけばよいでしょう。

webfont01

▲「OXY NOTES」より

Google Fontsの導入方法(Wordpress&はてなブログ)

ではそんなWebフォントを導入してみます。ここではぼくが使っているGoogleさん提供の「Google Fonts」での導入方法を紹介しましょう。

今回はこのブログで導入している「Quicksand」を紹介しますが、Googl Fontsではたくさんのフォントが提供されているので、お好みのフォントを探してもいいでしょう。

WordPressで「Quicksand」を導入する

導入手順としては以下の3つです。おそらく3分くらいでできます。

  1. Google Fontsでフォントを選択する
  2. CSSを追加する
  3. font-familyで適用する

1.Google Fontsでフォントを選択する

まずは以下から「Google Fonts」にアクセスします

そこから、フォントを選択しましょう。ここでは「Quicksand」で検索しちゃいます。

Google Fonts

お目当てのフォントが決まったら、フォントの右下あたりにあるボタンを押しましょう。

Google Fonts

ボタンを押すと、フォントの導入ページに飛びます。そこで、フォントの太さを自由に選んでください。ここでは通常の「normal」を選択。

Google Fonts

2.CSSを追加する

ここから、CSSファイルを編集していきます。実はGoogleフォントの導入には3種類あるのですが、一番わかりやすかった方法を紹介します。

さきほどのフォントの太さを選択したページをスクロールしていき、「3. Add this code to your website:」の@importを選択したコードをCSSファイルに追加します。

Google Fonts

面倒な人は以下をコピペしましょう!

追加する場所は、CSSファイルの一番上です。すでに@importがある場合は、その下に追加します。

テーマの編集 ‹ masalog.me(まさろぐ) — WordPress

3.font-familyで適用する

最後に、好みの場所にfont-familyで、フォントを適用します。Google Fontsの「4. Integrate the fonts into your CSS:」の部分のコードを使うといいでしょう。

Google Fonts

このブログのテーマはSimiplicityを使っているのですが、以下のコードでだいたい適用できます。

はてなブログで「Quicksand」を導入する

次ははてなブログです。手順はWordpressとほぼ同じなので、プロセスを知りたい人はWordpressと同じのような手順で行ってください。

ただ、CSSとかよくわかないけど、早く導入したいって方は、以下の方法でやってください。

まず、はてなブログにログインして、その後「デザイン>トンカチマーク>デザインCSS」にみます。

そのデザインCSSの中に以下2つをコピペします

@importの下のどこでも好きな場所に以下をコピペ。

はい!これで完成です!簡単ですね!

スクリーンショット 2015-10-12 14.47.42

完成すると…

これ(元々は「Meiryo」)が、

Webフォントでブログを少し華やかに!Google Fontsの「Quicksand」がいい感じ【WordPress、はてなブログ導入方法】

こう変わる!!オシャレ!

Webフォントdでブログを少し華やかに!Google Fontsの「Quicksand」がいい感じ【WordPress、はてなブログ導入方法】

Google Fontsは「Quicksand」以外にも多様なフォントがあり、どれもオシャレなものが多いので、自分のブログのフォントをちょっと違うものにしたい人は他のフォントも試してみてください!

それでは。

トップへ戻る