ブログカスタマイズ第五弾: ブログのタイトルをWeb fontsでかっこよくしよう!

スポンサード リンク

引き続きMT5スマフォオプションのテンプレートカスタマイズのお話、じゃんじゃかいきます!今回は、Web fontsでかっちょよく!のお話です。

さて、このブログのタイトルはWeb fontsで書かれています。

@kaoritter BLOG

これね。なんだかちょっとロゴっぽいでしょ?マウスを持っていってなぞってみてください。一文字一文字普通にテキストなのがわかると思います。

私がかっちょいいデザイナーならPhotoshopでさらりっとかっこいいロゴを作っちゃうところでしょうが、できないので技術に頼りました。

Web fonts ってなあに?

Web fontsっていうのは、オンライン上に公開されているフォント(字体)データを読み込んでそのフォントでテキストを表示する方法。通常はパソコンに入っているフォント(MSゴシックとか、ヒラギノとか)でしかWebページのテキストは表現できませんが、Web fonts を使えればかっちょいい字体でさらっとタイトルやメニューを表現できちゃうというわけです。

オロナインのページは、本文も含めてとっても素敵にWeb fontsを活用しています。

そのフォントはどこから手に入れるの?

日本語/英語それぞれ様々なWeb fontsプロバイダーがありますが、日本語のものは有料だったりサイズが大きいので、利用するには注意(ていうかデメリットも含めた知識)が必要。

英文は文字数も少ないから軽めだし、無料で提供しているプロバイダーがたくさんあるので気軽に使えていいですね。

ということで、わたしはよく使われている、Google Web Fontsを使いました。

いろんなフォントがあるんで、どれをどこで利用するか選んでおきましょう。

では早速設置

私はタイトルロゴに、Sonsie Oneというフォントを使うことにしましたので、それを例にご紹介。

テンプレートの[HTMLヘッダー]、[HTMLヘッダーモバイル用]の両方に以下の一行を追加して、フォントを読み込みます。

<!-- Header font -->
<link href='http://fonts.googleapis.com/css?family=Sonsie+One' rel='stylesheet' type='text/css'>

そして、ブログタイトルのH1タグのstyleを設定すべく、[バナーヘッダー]に以下のように追加。※もちろんCSSファイルに書いても構いません。

<h1 class="title page-title" style="font-family: 'Sonsie One', cursive;">

目次にもどる

http://www.kaoritter.com/archives/2012/0129_020313.html

スポンサード リンク