はいさい。山川です。

今回は、23日に『フォントが自由になる！』で紹介した、Typekit の使い方を紹介します。

下記の順番通りに作業を行えば、あなたのホームページやブログに、ちょっとしたアクセントを加えることができますよ。

※この操作方法は2011年11月24日現在のものです。

1. typekitのサイトを開き、「 Try it for Free 」ボタンをクリックします。
URLは　https://typekit.com　です。


2. 「 Sign up 」ボタンをクリックします。


3. 名前やメールアドレス、パスワード入力し、「 I agree to the Terms of Service. 」にチェックして、「 Create my account 」ボタンをクリックします。


4. 「 Get Started 」ボタンをクリックします。


5. 「 Name 」にのあなたのブログの名前を、「 Domain 」にあなたのhttp://を含まないブログのアドレスを入力して、「 Continue 」ボタンをクリックします。
※「 Name 」には日本語入力を試していませんので、受け付けてくれるかどうか分かりませんので、とりあえず英字で入力しておいて下さい。
※「 Domain 」は下記のような感じになります。
yourblog.ti-da.net


6. 「 Continue 」ボタンをクリックします。とりあえずここはスルーします。


7. 「 go fine some fonts! 」をクリックします。登録されているいろいろなフォントが出てきます。画面右のClassificationでフォントを種類別に表示すると、選びやすいです。


8. 気に入ったフォントの上にマウスを持って行くと「 +Add to Kit 」ボタンが表示されますので、それをクリックします。ポップアップウィンドでtypekitEditorが表示されます。


9. とりあえず、「 Publish 」ボタンをクリックします。

※設定を変更するたびに、このボタンをクリックする必要があります。

10. 同じウィンドー内の右上にある「 Embed Code 」をクリックします。


11. ポップアップしてきたウィンドー内の「 <script type="text/javascript" 」で始まる文字をクリックします。すると、その文字が入っているテキストエリア内の文字全部が選択された状態になりますので、選択された部分（青い部分）で右クリックして、コピーを選択します。


12. 右上の×印をクリックして、ポップアップウィンドーを閉じます。


13. 自分のブログの管理画面を開き、左のメニューからテンプレートを選択します。


14. 使用中のテンプレートの「 カスタマイズ 」をクリックして、CSSやHTMLの編集画面を表示させます。


15. てぃーだブログの場合、HTMLを編集するところが3つ（トップページ、個別記事、アーカイブ）ありますが、それぞれの </head> タグの直前に、11.でコピーしたコードを貼り付けます。

こういう感じになります。

※「 xxxxxx 」の部分は人によって異なります。

16. typekitEditor画面に戻り、画面左上「 Selectors 」の所に準備されたセレクタ名選択してコピーします。
このとき、セレクタ名の1文字目「.　（ドット）」はコピーしないで下さい。


17. ブログの投稿画面を開き、下記のように書きます。

tk-good-kitty の部分を１６．でコピーしたセレクタ名に変更して下さい。また、適宜、「 My name is Tomonori Yamakawa. 」の所も、あなたの文章に変えて下さいね。もちろん、英文字でお願いします。

18. 17.で作った記事を投稿するか、プレビューしてみて下さい。「 My name is Tomonori Yamakawa. 」の部分（あるいは、あなたが変更した文字）が、Typekitで選んだフォントで表示されているはずです。

フォントが反映されない場合は、少し時間をおいてから再度、その記事を確認してみて下さい。Typekitの反映には少し時間がかかる場合があるようです。

どうでしょうか？できましたか？


前のブログ記事でも言いましたが、現時点では英文字のフォントしかありません。日本語のフォントも早く日本語のフォントも出てきて欲しいですね。



↑
これもTypekit。