攻めは飛車角銀桂守りは金銀三枚

人生、なすがママ、きゅうりがパパ

はてなブログで独自のWEBフォントを利用する方法

スポンサーリンク
アウトドア&フィッシング ナチュラム

昨日書いた記事
www.fair-skinned-monster.com
のブクマに

PV激減でブログ書く気がしないあなたに朗報。GRCでブログを書くモチベーションを上げる方法を伝授。 - 攻めは飛車角銀桂守りは金銀三枚

人気キーワードなら勝てないしニッチなら人が来ないしジレンマですよね/黒板いいね

2017/02/23 23:10
b.hatena.ne.jp
と「黒板いいね」褒められたので調子に乗って今日はその「黒板」の中を手書き風フォントにしてました。

実はこの「黒板風CSS」はどなたかがされてて「おお、かっこいい」ということで勝手にオマージュして使わせて頂きました。
リンクを貼ろうと思ったのですが、元が見つかりませんでした。
作者の方すみません、お許しください。

そのままではなんなので「ここがポイント!!」なんて付けたりしてます。

で、今日はそのフォントもできればチョーク風に、と思ってフォントをさがしたのですが、なかなか漢字が表示できて無料で自由に使えるフォントなかったのです。
今回は
tanukifont.com
を利用させていただきました。


  1. フォントをダウンロードする。
  2. フォントの形式を変換する。
  3. フォントをサーバにアップロードする。
  4. CSSに反映する。
  5. クロスドメイン対応をごにょごにょする。

では早速始めましょう。

まずフォントをダウンロードします。
今回ダウンロードした「たぬき油性マジック」は「ttf」形式のフォントなので、このままでも使えるのですが、InternetExploreでは反映されませんでした。

「WOFFコンバーター」というソフトを使って形式を「WOFF」「WOFF2」「EOT」という形式に変換して使います。
(ツールの使い方は簡単で「tff」ファイルを選択して「EOTを作る」にチェックを入れて変換するだけなので省略。)

できたフォントファイルをサーバーにアップします・・・そう、サーバーが必要です。
はてなブログはファイル管理できないのでどうしても他のサーバーにアップロードする必要があります。

この際お安いサーバー借りましょう。

はい、借りましたか?

あ、独自ドメインも取っておいた方がいいかな。お任せします。

では次です。FTPツールでサーバーに適当なフォルダー作成してできたフォントファイルごっそりアップロードしましょう。

できましたか?

それではCSSに反映します。
CSSに以下の文を追加します。

@font-face {
    font-family: 'tanuki-pen-font';   /*この名前はなんでもいい。好きにつけて*/
    src:url("http://あんたのドメイン名/TanukiMagic.woff2") format("woff2"),
        url("http://あんたのドメイン名/TanukiMagic.eot?#iefix") format("embedded-opentype"),
        url("http://あんたのドメイン名/TanukiMagic.woff") format("woff"),
        url("http://あんたのドメイン名/TanukiMagic.ttf") format("truetype");
}

あとは実際に黒板CSSを作ってフォントを利用するだけです。

.blackboard{
    font-family: 'tanuki-pen-font';   /*付けたフォントの名前を指定*/
    padding: 1em;
    color: #ffffff;
    background-color: #006600;
    box-shadow: 2px 2px 2px #000000, 2px 2px 2px #000000 inset;
    border: 10px solid #996600;
    font-size: 18px;
}
.blackboard::before {
  font-family: 'tanuki-pen-font';  /*付けたフォントの名前を指定*/
  top: -12px;
  left: 10px;
  padding: 0 10px 0 13px;
  content: "ここがポイント!!";
  background-color: #ff80bf;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
}

でテスト表示・・・で反映されず。

しばり原因調査するとどうやら「クロスドメイン問題」の模様。

はい、これです。

う〜ん、困った。でもこんな時はGoogle先生に聞けば・・・ということで情報ありました。
どうやら「.htaccess」ファイルに「クロスドメイン許しちゃうよ」みたいな設定ができると。

Header set Access-Control-Allow-Origin: "*"

この1行を追加すると、あ〜ら不思議。クロスドメイン問題通り越してちゃんとフォントが読めるようになった。
(実際は「*」はどんなURLからでもという意味らしいので「自分のはてなブログのトップURL」を設定してます。)
注意事項としては「フォントをアップロードしたフォルダーに「.htaccess」作ること。

これで見えてるでしょ?新しいフォント。

<div class="blackboard">
<ol>
<li>まずはレンタルサーバ借りな!!</li>
<li>独自ドメインも獲りな!!</li>
</ol>
話はそれからだ。
</div>

って書くと下のようになるはず。


  1. まずはレンタルサーバ借りな!!
  2. 独自ドメインも獲りな!!
話はそれからだ。

せっかくサーバ借りたのに「できない」などの苦情、質問は面倒なので受け付けませんwww。
なんか問題起きても責任はとれませんので自己責任でお願いします。