Not Quick a Nine

日々の気になることを、独断と偏見で綴る、バカ親父ブログです

超キュートなフォント『M+font』 をはてなブログで使う方法

こんにちは、しばらくブログ更新をサボってしまいましたが元気でやってますよ(^_^;)

先日、とあるサイトを見ていたら、なんとも可愛らしいサイトデザインだったんで、なにが良いんだろうなぁと思って眺めてみると、使用されているフォントが良い感じ。

これは可愛い!!

一目惚れしちゃったんで、うちのサイトでも使うべく色々やってみたので、そのやり方などを例のごとく備忘録しました。

注記:諸事情により現在はぼくたちのゴシック2レギュラーを使用しています。

サイト使用されているフォントを調べる

まずはサイトに使われているフォントが何なのか?を調べてたいと思います。

使用するツールはChromeのExtention『WhatFont

chrome.google.com

インストールが終わったら、エクステンションのボタンを押すと、閲覧しているWeb上のフォントがカーソル上に出てきます。

更にクリックすると、こんな感じでフォントファミリーの名前が分かるようになります。

なんて分かりやすい!!

こうやってわかったフォント名が

"M+ 1p regular"でした。

なんだ、M+なんてず~っと前から知ってるよぉ、なんでパット見てわからなかったんだろう……。

M+をWebフォントとして使う

って事で、今回はこのM+をWebフォントとして使うことにします。

Webフォントを使う方法には以下の様な手順が必要です。

  1. 使用するフォントのダウンロード
  2. フォントのサブセット化
  3. フォントのWebフォント化
  4. サーバーやストレージにフォントをアップロード
  5. コードを設定

う~~~ん、、、とっても面倒なんだな(^_^;)

サブセット化ってのは、いわゆる軽量化です。

日本語は文字数が多いので、全ての文字をWeb経由で読み込んでいたら、とても時間がかかってしまいます。

そこで、日常的に使用する文字だけを抽出して使用出来るようにするのがサブセット化です。

その後、Webで使用できるように専用のフォーマットに変換して、サーバーにアップロードして……といろいろとやるわけですが、面倒な作業を簡略化できる良さげな方法を見つけたので、その方法を使います。

1.M+Web Font Subsetterを使ってトコトン楽をする

先程お話したような煩雑な作業の1~3を自動的にやってくれるツールをM+さんが公開してくれてますので、今回はそれを使っちゃいたいと思います。

mplus.font-face.jp

サイトを表示したら順番に

  • フォントを選択
    お好みのフォントを選択します。

  • サブセット化する文字を入力
    ここにサブセット化したい文字群を入力します。その下にあるチェックボックスである程度まとめて選択できますが、(第一水準漢字+記号+ローマ字+カタカナ+ひらがな)はWebなどから検索して入力します。 ちなみに私はこの文字を入力しておきました。

  • ダウンロード
    設定が終わったら「変換・ダウンロード」を押します。

たったコレだけの作業でeot、woff、ttfを一発で生成してくれます。

驚きの3ステップ

なんて便利!!! わんだほーー!!

2.フォントをDropboxにアップ&URL取得

出来上がったファイル群を一般的にはサーバーなどへアップロードするわけですが、はてなブログなどで使うには、Dropboxにファイルを置いておくのが手軽で便利です。

Dropboxのアカウントを持っていない場合にはこちらから登録しましょう。(通常は2Gですがこちらから登録すると2.5GB分のストレージを無料で取得できます)

Dropboxにアップロード

先程ダウンロードしたフォントファイルをDropboxへアップロードします。
こういう時はWebFont専用のフォルダを作成してアップしたほうが便利ですね。

URL取得

次にWebFontへアクセスするためのURLを取得します。
ちなみに今回はWeb版のDropboxで説明をします。

アップロードしたファイルの右端の方にある[共有]というボタンをクリックし、出てきたウィンドウにある[リンクをコピー]をクリックすると、汎用的にアクセス可能なURLが取得できます。

URL変換

先程取得したURLはダウンロード用のURLでリダイレクトされてしまうので、Webアクセス用の直リンクのURLに変更します。
下記を参考に3種類のウェブフォントそれぞれを直リンクに変更してメモしておきます。

DL用URL
https://www.dropbox.com/s/xxxxxxxx/mplus-1p-regular-sub.eot?dl=0
↓ 変更 ↓
直リンクURL
https://dl.dropboxusercontent.com/s/xxxxxxxx/mplus-1p-regular-sub.eot

具体的にはドメイン名を変更し、一番うしろの?以降を削除します。

はてなのデザインに反映する

M+Web Font Subsetterの一番下にある「使い方」にあるコードを参考に、はてなブログにデザインを反映させて行きます。

ここに書かれているコードをはてなブログのCSSの部分にコピペするわけですが、その際相対URLが書いてある部分を先程作成した直リンクURLに書き換えます。

記入する場所は、デザイン設定のPC用ならばデザインCSS内、スマホ用ならばヘッダのタイトル下となります(ただしPro契約のみ) もし、Proに契約していない場合には、レスポンシブデザインを採用するという方法でも対応可能です。

ちなみに、私の場合にはこのような設定になっていますので、参考にしてください。

/* フォントファミリー準備start */
@font-face {
    font-family: 'M+ 1p regular';
    src: url('https://dl.dropboxusercontent.com/s/xxxxxxxx/mplus-1p-regular-sub.eot');
    src: url('https://dl.dropboxusercontent.com/s/xxxxxxxx/mplus-1p-regular-sub.eot?#iefix') format('embedded-opentype'),
    url('https://dl.dropboxusercontent.com/s/xxxxxxxx/mplus-1p-regular-sub.woff') format('woff'),
    url('https://dl.dropboxusercontent.com/s/xxxxxxxx/mplus-1p-regular-sub.ttf') format('truetype');
}

body {
    font-family: 'M+ 1p regular';
}
/* フォントファミリー準備end */

設定した結果がこちら

ということで、設定が完了した結果がこちらです。

キュートでしょ? いいですよねぇ。

昔からこのフォントの形が好きだったんですよね。
しばらくこのフォントでいこうかなって思ってます。

まぁ、私のことだからすぐに気が変わるかも知れませんがね……。

ブンガ的まとめ

今日ははてなブログでM+をWebフォントとして簡単に使用する方法ということで備忘録を書いてみました。

今後M+使いたいなぁって思ってる人は参考にしてみてね(^.^)/~~~