BloggerテンプレートをWEBフォントで日本語化しました

当ブログ「Code or Design」はgoogleが提供しているBloggerを利用しています。
テンプレートのカスタマイズやブログパーツの配置など色々変更できるのでデザインにこだわりがある方にはもってこいなんじゃないかなぁと思います。

ただ一つ問題があって、
日本語対応のテンプレートがほとんどないんです(-_-;)

かくいうこのブログも"Ideas Mag"というテンプレートを使っているんですが、フォントが英語版とかなり違ってきます。
仮にもWEBデザイナーを名乗っている身としてはちょっと我慢できません。今回はWEBフォントを使って日本語対応します。

WEBフォントについて

今回はGoogleとAdobeが共同開発した"Noto Sans Japanese"を利用します。
ポートフォリオでも採用していますが、太さにバリエーションがあって読みやすいという点で大変重宝しています。
WEBフォントとは?
今まではPCやスマホで同じWEBサイトを見ても、デバイスに入っている書体はバラバラなので見た目が違っていたんですね。
ところがこのWEBフォントをCSSを使って導入することでどのデバイスでも同じ書体で統一できるようになります。
つまり書体へのこだわりを一層反映させることできるようになります。素晴らしい!

WEBフォント導入

テンプレートファイルに直接CSSは追加しません。いたずらにコードを消してテンプレートファイルを壊したくないです (・Θ・;)Bloggerの設定画面から行います。
場所は設定画面の左メニューから「テンプレート」をクリック。カスタマイズボタンを押すと 「Bloggerデザイナーテンプレート」が表示されます。
そこから「上級者向け」→「CSSを追加」を選択してください。

表示されたテキストエリアにWEBフォントが読み込めるように@import文を追加します。
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

後は各セレクタに
font-family:"Noto Sans Japanese";
font-weight:好みの太さ;
を指定すれば終わりです。

読み込み時間の短縮

修正後のブログを表示してみます・・・うん。遅いね(+o+)
試しに読み込み時間を計測してみると
合計で0.167秒。既に"Noto Sans Japanese"が入っている場合はローカルのフォントファイルが使えるようにCSSを修正すればもうちょっと短縮できそうです。
使うのは@font-faceプロパティです。これを使うと書体や太さだけではなく、使用するフォントファイルの設定ができるようになります。書き方はこんな感じ。
@font-face {
  font-family: 'Noto300';
  font-style: normal;
  font-weight: 300;
  src: local('Noto Sans Japanese'), url('外部URL');
}
この書き方をすると各セレクタに
font-family:'Noto300';
と書くだけでフォントスタイルが標準で、太さ300の"Noto Sans Japanese"フォントに適用されるようになります。
ポイントは5行目の"src:"以降。"local""url"がカンマ区切りで書かれてますね。ざっくり言うと「"local"で指定したファイルを探して、あったらそれを使ってね。無かったら"url"で指定したURLからファイルを読み込んでね」と設定しています。

@font-faceを使って書き直したCSS設定はこちら。(各セレクタは省略してます)
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@font-face {
  font-family: 'Noto300';
  font-style: normal;
  font-weight: 300;
  src: local("NotoSansJP-DemiLight.woff2") format('woff2'),
        local("NotoSansJP-DemiLight.woff") format('woff'),
        local("NotoSansJP-DemiLight.otf") format('opentype'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype');
}

@font-face {
  font-family: 'Noto500';
  font-style: normal;
  font-weight: 500;
  src: local("NotoSansJP-Medium.woff2") format('woff2'),
        local("NotoSansJP- Medium .woff") format('woff'),
        local("NotoSansJP- Medium .otf") format('opentype'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
 }
"local"と"url" が3つずつあるのはWebブラウザによって読み込み可能なファイル形式が違うから書いています。詳しく書くと長くなるので割愛します。

これでもう一度計測しましょう。
おぉ!私のPCにも一部フォントが入っていたので外部から読み込むファイルも減りましたね!
そして合計時間も0.048秒とだいぶ短縮されています。
では最後に導入前と導入後で比べてみましょう。

before



after


装飾と余白も調整したのもありますが、だいぶ読みやすくなりましたね。

本来なら「フォントファイルをダウンロード→いらないフォントを削除→WEBサーバーにアップロード」の手順を踏むんですが、Bloggerにはテンプレートファイルしかアップロードできないので今回はこの手法を取りました。
それにしても日本語テンプレートの種類が増えてほしいですねぇ。自作しようかしら(^ ^;

Sponsored link

コメント