Google Font APIて何？て人のために簡単に説明をすると、使いたいフォントを見る人が持っていなくても、ちゃんと表示できるって仕組みです。
個人的にはフォントってサイトを良く見せたり、個性的に見せたりするのにとても大きな役目を果たしていると思っているので、このサービスはとても嬉しい。
Bloggerで適用するのに試行錯誤したので、備忘録＆同じように困っている人の助けになれば、と手順をポストしておきます。
1. お気に入りのフォントをさがそう
まずはブログで使いたいフォントを探しましょう。
Google Font Directory
色々なフォントがありますね。
今回はJosefin Sans Std Lightにしてみましょう。
クリック。つぎに Get the code をクリックします。
Embed the font into your page の下にあるアドレスをコピーしましょう。
2. HTMLを編集しよう
次に今コピーした内容をブログに適用しましょう。
bloggerのダッシュボード→デザイン→HTMLの編集 とすすみます。
下の画像を参考にしながらコピーした内容をペーストします。
ここで注意して欲しいのですが、コピーした内容を２点修正しなければなりません。
修正前
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light&subset=latin' rel='stylesheet' type='text/css'>
↓
修正後
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light&subset=latin' rel='stylesheet' type='text/css'/>
& を & に、 最後の> を />にします。
これをしないと、
テンプレートの形式が適切でないため、解析できませんでした。
すべての XML 要素が適切に閉じられているかどうかを確認してください。
XML エラー メッセージ: The element type "link" must be terminated by the matching end-tag "".というエラーが発生してしまいます。
3. CSSを設定しよう
最後はCSSファイルを設定します。
先程のHTMLファイルからフォントを変更することも出来ますが、やりにくいのでCSSを設定する方がいいと思います。
テンプレートデザイナーを開き、アドバンスのCSSを追加を選択します。
今回はブログタイトルにAPIを適用したかったので、次のようにしました。
h1.title{
text-align:right;
font-size:8em;
font-family : 'Josefin Sans Std Light', arial, serif;
}
以上が解説になります。
結構雰囲気が変わって、なかなか気に入っています。
今すぐ使える Googleサービス完全活用ガイド
posted with amazlet at 10.11.06
清水 隆夫 佐橋 慶信 佐野 正弘 青木 恵美 松田 真理
技術評論社
売り上げランキング: 54028
技術評論社
売り上げランキング: 54028
おすすめ度の平均: 
Googleの可能性を、網羅的にイメージできます。 現時点でのＧｏｏｇｌｅの利用法がわかりやすく丁寧に説明されていてわかりやすい わかりやすくおすすめの本です
0 件のコメント:
コメントを投稿