ブログ(MT5)へGoogle web fontを設定してみる

| コメント(0) | トラックバック(0)

今回はGoogleが無料で提供しているサービスで、Webフォントというサービスの利用方法をご説明いたします。 すぐに設定方法に進みたい方はこちら

Google Web fontの概要

特殊な文字を画像ではなくテキスト情報のままで表示させることができますので、検索エンジン対策上も有効といわれています。

設定にあたってはテンプレートなどを変更せずに、ブログ記事の中で行えますので、安心して設定できます。ただし部分的にソース表示(プログラムのコード表示)にしての設定が必要ですので、多少難しそうにみえますが・・。

下に表示されているものがWebフォントの事例です。以前ですとこういった字体はphotoshopなどで画像として作成して挿入する必要がありましたが、このWebフォントという技術を使用すると文字情報として扱うことができます。よって文字の変更も簡単です。文字情報のままですので、下事例の文字を選択すると文字としてコピーができます。(以前だと再度photoshopで加工しなおす必要がありました)

 

This is Google Web font! Please try it!.

通常ホームページを表示する際は個々のパソコンに保存されている通常のフォントを使用してホームページを表示しています。下の事例の字体や手書き文字風な字体は、ホームページを作成する管理画面で選べたとしても、閲覧者のパソコンに入っていなければ反映はされません。そんため、画像にしてその字体を表示させていました。

Webフォントという技術では、GoogleのWebfontの場合であれば、文字を表示する際、閲覧者のパソコンの字体を使用せずに、Googleのサーバから字体の情報(データ)ダウンロードして表示させているというイメージです。

 

まずは実際に使ってみましょう。

 

Google web fontの設定方法

設定方法の手順の概要

  ※コードを貼り付ける際はフォーマットを”なし”にする。

 

大まかには上記の3つの手順です。

 

Google Web Font サイトでフォントの選択

GoogleのWebフォントを提供しているサイトへいってみましょう。

 Go to Google Web font

Google web fontサイト

上記のサイトの中からまずは好きな字体をひとつ選択してみましょう。

 

選択したフォントのコードをコピー

ここでは例として上から6番目の”Fondamento”という字体を選んでみました。下記左端の赤枠。

Google web fontで字体を選択

次に選択した字体の右側に表示されている”→”矢印のようなマークをクリックします。(マウスを上にかざすと”Quick-use”と表示されるアイコンです)

すると新しいページが表示されますので、そのページの「3」と「4」に表示されているコードをコピーしてメモ帳などに貼り付けておきます。(タブで開いている方はそのタブを残しておいてもよいです。)

googlewebfontコードの取得

 

ブログ管理画面でコードを貼り付け

2つのコードをコピーしたら、次にブログまたはホームページの管理画面を開きます。ここではブログ(Movable type Ver5)で説明します。

選択した字体を表示させたい記事(もしくは新しい記事)の編集画面を表示します。

その際にフォーマットを”なし”に選択しておきます。※リッチテキストのままだとうまくいきません。

ブログ管理画面の表示ここで本文欄に、”3”のコードを貼り付けます。(<link  で始まっているコード)

下のような感じです。

googlewebfontのコード貼り付け

ここで一旦フォーマットを”リッチテキスト”に戻して、英文で文字を入力してみましょう。※半角英数字です。日本語対応ではないため。またリッチテキストに戻すと、コードが見えなくなりますが、問題ありません。

下図のようになると思います。

文字入力文字を入力したら、再度フォトーマットを”なし”に戻し、Google Webフォントのサイトでコピーした”4”のコードを貼り付けていきます。

まずフォーマットを”なし”に戻すと下記のように入力した文字の前後にタグ<p></p>などが表示されるはずです。

管理画面の表示

上の例では<p>と</p>というタグは挿入されています。

ここで”4”のコードを貼り付ける前準備として、コードを追加します。

<p>となっているのを<p style="">となるように style="" を追記します。※これも必ず半角です。

次にダブルコーテーションマーク2つの間に事前にコピーしておいた”4”のコードを貼り付けます。

結果、<p style="font-family: 'Fondamento', cursive;"> のようになります。

googlewebfontのコードを貼り付けた画面この状態で「公開」もしくは「更新」をすれば、ブログ記事として表示されるはずです。下記のような感じです。

webフォントの埋め込み完成

どうでしょうか。うまくできましたでしょうか。

一度試してみればできそうな気がするかと思います。

是非ほかの字体でも試してみてください。

今回のGoogleのwebフォントは英語のみですので、日本語で行いたい場合は無料のものや有料のものなどありますので、別のサイトからコードを取得して張り付けることになります。

「webフォント 日本語 フリー」などで検索するといくつかでてくると思います。

 

過去の記事について

過去のGoogle フォントの設定方法の記事へ(若干Google webfontのサイトが変わっています)

Webフォントの概要を書いた記事

 

 

静岡の(有)アイ・リンク・コンサルタントでは、静岡・浜松・豊橋・群馬伊勢崎にてWEB勉強会「駿河友の会」を開催しています。

検索エンジン対策、画像加工方法、アクセス解析、Facebookなどwebに関する最新情報と設定方法など様々なテーマで実施しています。ご興味のある方は弊社事務局までお問合わせください。 
TEL 054-205-3320。

過去に開催した勉強会テーマは下記よりご確認できます。

平成25年度の勉強会テーマ

平成24年度勉強会テーマ

平成23年度のweb勉強会テーマ

平成22年度のweb勉強会テーマ

 

よろしくお願いいたします。

トラックバック(0)

トラックバックURL: http://www.surugatomo.com/mt/mt-tb.cgi/587

コメントする