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

Traveling Creator's Life

旅するクリエイターちびまやのライフスタイルマガジン!

Google Fontを使ってあなたのブログを簡単にオシャレにしよう!

f:id:ogimaya26:20160115221848j:plain

フォントを変えて、ブログの雰囲気を変えてみませんか??

 

このちびまやブログでは、英語の文字をwebフォントを使って少し雰囲気を変えています!気が付いてくれた方がいると嬉しいです^^

 

実はこれ、webフォントを使ってやっています! 

今回は、はてなブログで、HTML/CSSを触ったことのない人でも簡単にできるやり方を紹介しますので、興味がある方はぜひやってみてください!

 

※今回は英字の変更のみについての紹介です。

 

Web Font / Google Fontって?

 

Web Fontって?

まず、Webフォントについてざっくりと紹介します。

 

通常、画面のテキストというのは、その人のPCに入っているフォントを利用して表示しています。Macならヒラギノフォント、WindowsならMSPゴシックなどですね。

しかし、Webフォントを使うことで、フォント情報をインターネットから読み込んで表示させられるようになるので、閲覧者のPCに入っていないフォントを使用することができるようになります。

 

つまり、Webフォントを使用すると、相手のPC環境に制限されずに、あなたが表示させたいフォントを表示させられる!

デザインの幅が広がるんです!

 

 

Google Fontって?

 

Google Fontは、「Webフォントを使いたい」と思った時にぜひ見てもらいたい、最も簡単に導入できるGoogleが提供しているWebフォントの宝庫です。

 

Google Fonts

 

この、ちびまやブログにもwebフォント(Google Font)を使用しています!

タイトルの「Traveling Creator's Life」にはLeague Scriptを、そのほかの英字にはQuicksandを使用しています。このサイトは、全体的に英字数字は丸みのある書体が特長です。

 

 

Google Fontを導入してみよう!

 

 

使い方その①:まずは使いたいwebフォントを探そう!

f:id:ogimaya26:20160116151105j:plain

まず最初に、あなたが使いたいwebフォントを探してみましょう。

左側のFiltersカテゴリを選べます。

 

Serif:セリフのついた明朝体のような書体

Sans Serif:セリフのつかないゴシック体のような書体

Display:見出しなどで使うのに適する書体

Handwriting:筆記体、手で書いたような書体

Monospace文字によらずすべて同じ幅で実装された書体

 

このような種類の書体があります。

 

上部のPreview Textに表示させたい文字を入れることで、より雰囲気が調べやすくなりますよ!

 

 

使い方その②:使用したいフォントが見つかったら

 

使用したいフォントが見つかったら、次はコードをコピーしてはてなブログに貼り付けます。

f:id:ogimaya26:20160116152307j:plain

青くなっている「Add to Cellection」をクリックして自分のコレクションに追加。

 

f:id:ogimaya26:20160116152315j:plain

すると下部にあなたが使いたいと思ったコレクションとして表示されるので、一番右の「Use」をクリックします。

 

f:id:ogimaya26:20160116153129p:plain

 するとこういう画面がでてきますよね。これを下にスクロールすると、

 

f:id:ogimaya26:20160116153325p:plain

このようなコードが出てきます。使うのはこのコードです!

 

 

使い方その③:はてなブログにコードを貼り付けよう

では、ここからはコピー&ペーストでいきます!

f:id:ogimaya26:20160116153659p:plain

<link〜から始まる、選択した青い部分をコピー。(※この画面はまだ閉じないでくださいね)

 

これを、はてなブログのダッシュボードにある「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」に貼り付けます。

f:id:ogimaya26:20160116154017j:plain

こんな風に。

するとあなたのブログでこのフォントを使えるようになります♪

 

 

使い方その④:使用したい場所を指定する

さて最後のステップです。

先ほど使用した、GoogleFontのページを開き、

f:id:ogimaya26:20160116154756j:plain

今度はCSSの部分をコピーします。(青く選択されている部分)

 

これを、今度ははてなブログの「デザイン」→「カスタマイズ」→「デザインCSS」内に貼り付け。

 

ここで重要なのが、このフォントをしようしている箇所を指定してあげることです。

HTMLとCSSをさわったことがある人なら分かると思いますが、

f:id:ogimaya26:20160116155305j:plain

こんな風に、タイトルですと「#title」と指定したところに、先ほどコピーした部分を貼り付けます。

 

他にも、サイドバーのタイトルなら「.hatena-module-title」

全体的に変更させたい場合は、「body」と指定して貼り付けます。

 

 

 

「なんて名前をつけたらいいかわからない><!」って場合は、要素の検証を使用します。

少し技術的な話になりますが、

 

Chromeの場合は、変更させたい部分にカーソルを置いて右クリック→検証

f:id:ogimaya26:20160116160020j:plain

 

 

Safari変更させたい部分にカーソルを置いて右クリック→要素の詳細を表示

f:id:ogimaya26:20160116160303j:plain

で、指定の位置にどんな名前がついているか確認します。

「id="◯◯◯"」や「class="◯◯◯"」で名前が付いていると思うので、◯◯◯部分をコピーし、idの場合は「#」、classの場合は「.」を名前の前につけて指定します。

 

※この辺をもっと勉強したい!って方はHTML/CSSの本を参考にしてみてください^^

 

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

 

 

以上4ステップではてなブログでのGoogle Fontの使い方を紹介しました*

ブログのリニューアルを考えている方など、ぜひGoogle Fontを使ってみてください!