ブログなどでも手軽に色々なフォントを使う方法。

妻が作っていたシフォンケーキの型をオーブンから出したてに素手で触ってしまって火傷したいまがーです、こんばんは。

 

 

今日は、WEBデザインを生業としていない人であっても、例えばブログを書いている、というだけの方であっても役に立つと思う情報を話します。

といっても、ご存知の方も多いかもしれないですが、「WEBページやブログに表示する文字のフォントの種類を簡単に増やせる方法」です。

 

まず文字のフォントとは何?というところは置いておいて。

現在の世の中のホームページには本当に様々な種類のフォントが飛び交っていますが、古くは珍しいフォントを使おうと思えば一苦労で、HTMLやCSSといった知識がないと厳しいものでしたし、物によっては画像にして張り付けてしまうしかない、なんてこともありました。

ただ、今はもっと簡単に、(指定のフォントとかがあるわけではなければ)探してきて使うことができる方法があります。

 

それが、「GoogleFonts」という、Googleが出しているサービス。

fonts.google.com

これは、Googleが無償で何百種類というフォントを公開していて、しかもそれはWEB上であればいとも簡単に使えてしまうというもの。

 

使い方は簡単。

1、サイトに行き、欲しいと思うフォントの右上の「+」ボタンを押す。

2、すると下にバーが出るので、それをクリック。

3、バーの中から出てきた中にある「html」なり「css」なりどちらでも(ブログの方はCSS編集できない場合も多いと思うのでhtmlがおすすめ)のソース部分(灰色網掛けの部分)をコピー。

4、それを自身のサイトの「head要素」と呼ばれる部分に張り付け。

5、あとはそのフォントを使いたいところでフォントを指定すればOK。

 

・・・と、こんなことで分かるなら苦労しないよ、って人も多いだろうと思うので、もう少し分かりやすく、HatenaBlog使用者向けに書いてみると、

 

2まではどうにかしてもらって・・

3、バーがにょきっと出てきたら、その中の「一番始めの灰色の網掛け部分」をすべてコピー

4'、はてなブログの管理画面の中、デザインを選択

5'、左のタブの中、カスタマイズの中の「ヘッダ」と書いてあるところをクリック

6'、その中の「タイトル下」と書いてあるところに先ほどコピーしたものを貼り付け

7'、そしてその上にある「変更を保存」をクリック

8'、あとは普通に記事を書き、そのフォントに変えたいところが出てきたら、「HTML編集」に切り替え

9'、該当箇所の「<p>そのフォントにしたい文章</p>」となっているところを「<p style="font-family: 'フォントの名前';">そのフォントにしたい文章</p>」に変更する

10'、これでめでたくフォント変更完了。

※ちなみに、9'にてフォントの名前を入力する際、フォントの名前に半角スペースが入っている場合は、きちんと入れないと反応しません。

 

ちなみに、今日の最初の一文は同じ手法にてフォント変更をしてあります。

 

 

よく使うフォントだけヘッダのところに書き込んでおけば(7'までの作業)、いつでもあとは8'以下のことをするだけなので、簡単です。

 

ちなみに、これでもわからないよーという方は、メッセージもらえれば教えます

(写真付きで説明したらもっとわかりやすいから載せて、って意見は受け付けません!いつか気が向いたら載せるかも… 笑)

 

 

では、今日はここら辺で。