はてなブログでフリーフォントを使う方法
当ブログはしばらくの間、タイトル ” プリウスミサイル対策本部 ” をgoogleのwebフォントであるニコモジを使用して表示してきた。だが！！そこには大きな問題があった！
次の画像を見てくれ！
これはその時のブログタイトルだ。御覧の通りプリウスミサイルと対策本部のフォントが異なっている。
クソダサ凸凹フォントタイトルである。
ニコモジには漢字のフォントはないのだ。
ブログの顔とも言えるタイトルをこのクソフォントで恥ずかしげもなく堂々と表示してきたのはもちろん当ブログの管理人達が豪傑で懐の深い聖人君子というのが主な理由なのだが他にもフリーフォントをブログで使用する方法が分からなかったというのもある。
重い腰をあげ方法を調べ、ようやく変更できたのだがその手の記事が少なく苦労したので自分以外にもそういうのがしたいという方のためにできるだけ簡単に紹介しよう。
ということでフリーフォントをはてなブログで使用する方法について述べていくぞ。
１．フリーフォントのダウンロード
取り合えず、使いたいフォントを以下のURLとか自分で適当に調べてダウンロードしてくるのだ。
商用利用okなどの確認もお忘れなく。
zipファイルがダウンロードされると思うがその中にある拡張子が.ttfのTTFファイル（開くとそのフォントが使用された文が出てくる）を後に使用。
ちなみに当ブログはニコモジ＋というニコモジに漢字が追加されたフォントを使ったぞ。
２．ソフト、サービスの準備
次にフリーフォントをブログで使う上で必要なソフト、サービスの準備を行う。
つまりは道具を用意するようなもの。
以下にまとめたものがその " 道具 " である。
-
サブセットフォントメーカー
-フォントのファイルサイズを小さくするソフト -
WOFFコンバーター
-フォントファイルをweb用に変換するソフト
-
Dropbox
-オンライン上でファイルを保存できるサービス
ダウンロード、インストールおよびアカウントの作成したら準備オーケー。
次章からはそのソフトを使って実際の作業に移る。
３．フォントファイルを縮小
使用する道具：サブセットフォントメーカー
<目的>
和文フォントはひらがなやらカタカナやら漢字やらで文字数が多くファイルサイズが大きくなってしまう。というわけでそのまま使うとサイトの読み込みが遅くなるので使う文字を制限してファイルサイズを小さくしようという訳である。ちなみにこれをサブセット化というぞ。
<実践>
インストールしたサブセットフォントメーカーを起動し、次の画像に従って使用する。
<２. の部分について補足>
保存先だけでなくフォント名も決めるぞ。元のフォント名とは違う名前にしよう。
<３. の部分について補足>
私たちのブログのようにタイトルのみにフォントを使いたい人はブログタイトルを入力するだけでいいのだが普通に使いたいのであれば以下のサイトから使いたい文字をコピペしてくる。文字数が少ないほど読み込み早し。
" JIS第一水準＋常用漢字+その他でまとめると " の欄をコピペが無難。
日本語WEBフォントをサブセット化する際の参考文字列一覧 | U-618WEB
４．web用フォント化
使用する道具：woffコンバーター
<目的>
web上で使用するためのフォントファイルに変換する。TTFファイルではwebフォントに使えないのでWOFFファイルに変換する。woffコンバーターではwoff2ファイルやeotファイルなどにも変換でき、違いは圧縮率だったり対応しているブラウザだったりする。このブログではwoffを使うが以下のサイトから調べて自分のブログにあうのを選ぶのもありだがwoffでだいたい間に合うぞ。
Webフォントの拡張子あれこれ | WEB業界で働く人や興味がある人に役立つ情報サイト"qam（カム）"
<実践>
次の画像の従って使用する。前章の通りにやればwoffコンバーターは自動で起動と先ほどの圧縮後ttfファイルを選択してくれている。
簡単２ステップ。
５．Dropboxにファイルをアップロード
使用する道具：Dropbox
<目的>
フォントを使用する際にブログは他のところからファイルを読み込むのでその読み込み先としてDropboxを使用する。Dropboxはオンラインでファイルを保存できる無料のサービスである。ずばりGoogleDriveと同じサービスなのだがなぜかGoogleDriveではできなかったので諦めてDropboxのアカウントを作ってくれ。
実際にやることは次章の内容含み次の3つ。
・ファイルをアップロード
・共有リンクを取得
・共有リンクを直リンクに書き換える
とりあえずこの章ではアップロードのみを簡単に解説。
<実践>
Dropboxのホームの右側に" ファイルをアップロード "とあるのでそこクリックし前章で作成したwoffファイルをアップロードしよう。
６．はてなブログにファイルをアップロード
正確には” はてなブログにファイルをアップロードする準備 ”
引き続きDropboxを利用。
この章では以下の残り２つをやっていくぞ。
・共有リンクを取得
・共有リンクを直リンクに書き換える
<実践>
次の画像に従って共有リンクを取得。
このブログでは例としてpurimisa.woffを使っていく。
ステップ１
ステップ２
これで共有リンクをゲットできたがこのままでは使えない。
なので次の例のように書き換えて直リンクにしょう。
直リンク前 : https://www.dropbox.com/s/あーだこーだ/ファイル名.woff?dl=0
↓
直リンク : https://dl.www.dropbox.com/s/あーだこーだ/ファイル名.woff
変換後のURLが直リンクと呼ばれるものである。アクセスして自動でファイルがダウンロードされれば成功である。
これを次章で入力する。
書き換えが面倒だったら以下のリンク先で変換してくれるぞ。
７．コーディング
ついにはてなブログでの作業に移るぞ。
実はここではてなブログへフォントファイルをアップロードする。
あっさり終わるから肩の力抜いてもおｋ。
まず作業をする場所へ行こう。
はてなブログ → デザイン メニュー→ カスタマイズ → デザインCSS
デザインCSSについたらそこで以下に従いコードを入力していく。
<ファイルのアップデート>
まずフォントファイルをはてなブログへアップロードする。
@font-face {
font-family: "フォント名（自由に決めていい）";
src: url("前章で取得したURL") format('woff');
}
※この色のところは指示に従い入力、それ以外は丸写し
これで使う準備は完了。
<使用例>
ということで実際に使用していく。引き続きCSSデザインで入力する。
どこに使うかによって書き方が異なるのでここでは当ブログのようにタイトルに使う場合とサイト全体で使う場合の２パターンを例として掲示する。
ここでいうフォント名は上で自由に決めたフォント名。
タイトル
#title{ font-family: "フォント名"; }
サイト全体
#body{ font-family: "フォント名"; }
これでフォントが変更完成である。
あとがき
簡単に説明するとは言ったけど短く説明するとは言ってないのでセーフ。
フォントを変えるだけでガラッと雰囲気が変わる気がするのでおすすめ。
こういう色々やって目に見えて変化するのは達成感あって楽しいよね。
HTMLとかCSSとか勉強しようかしら。
