ReRICK

忘れるな、いつか必ずそれは来る

はてなブログでふい字が使えたのでメモ風cssを作ってみた

f:id:c-miya:20170225174413j:plain
はてなブログでウェブフォントとして使えるアイコンフォントが用意されているということは知っていましたが、日本語の手書き風フォント「ふい字」も用意されているということを知りました。ので、さっそく使ってみました。

====

はてなブログにふい字があった

Minimal Greenさんの記事を読んでいたらふい字が使えるって書いてあったんですよね。

design.syofuso.com


ほんとは、色白おばけさんのように『たぬき油性マジック』をwebフォント化すれば、もっと黒板に書いたチョークっぽくなるんですが、面倒だったので(^_^;)はてなブログに組み込まれている手書き風フォント『ふい字』を指定しています。
黒板風囲み枠CSSでブログの解説記事をまとめよう - Minimal Green

え?はてなブログに組み込まれてる!?日本語フォントも組み込みであったのか!?

…と思ったのですが、そういえばふい字を使っているオフィシャルテーマがありました。パパーっと確認したところ、本文まで使用しているのは以下の2つ。

ほかにもタイトルだけで使っているといった限定的な使い方をしているものもあります。で、これらのcssを確認したところ、たしかにはてなブログに「ふい字」があるようです。

ふい字の使い方

cssに以下を追加すればふい字を使えます。

css

@font-face{
   font-family:HuiFontP109;
   src:url(/fonts/public/HuiFont/HuiFontP109.eot);
   src:
   url(/fonts/public/HuiFont/HuiFontP109.eot?#iefix) format('embedded-opentype'),
   url(/fonts/public/HuiFont/HuiFontP109.woff) format('woff'),
   url(/fonts/public/HuiFont/HuiFontP109.ttf) format('truetype'),
   url(/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109) format('svg');
}

.huifont{font-family:HuiFontP109}

html

htmlでstyle属性に直接font-family:HuiFontP109を加えてもいいですし、cssでクラスを作ってそれを指定してもOKです。

<p style="font-family:HuiFontP109">font-family:HuiFontP109で直接指定</p>
<p class="huifont">.huifont{font-family:HuiFontP109}でhuifontクラスにふい字を指定</p>

表示結果

font-family:HuiFontP109で直接指定

.huifont{font-family:HuiFontP109}でhuifontクラスにふい字を指定

メモ風cssを作ってみる

Minimal Greenさんの記事では黒板に使っていたのですが(というか黒板がメインの記事ですし)同じものを作っても仕方ないので、ほかに似合いそうなメモを作ってみました。(これも目新しくはないですけどね。)


  1. 手書き風フォントのふい字は黒板よりメモのほうが合うかも?
  2. transform: rotate(-2deg);でちょこっと傾ける
  3. テープとタイトルは疑似要素を使って作成
  4. タイトル部分はborder-radiusを使って手書き風の下線に

css

さきほどのふい字を使うためのcssに以下を追加します。

.memox{
   position:relative;
   background:#fffde7;
   width:85%;
   margin:2em auto;
   padding:1.5em 1em;
   transform: rotate(-2deg);
   box-shadow:1px 1px 4px rgba(0,0,0,0.2);
   color:#795548;
}
.memox::before{
   content:'ここがポイント';
   position:relative;
   display:inline-block;
   border-bottom:3px solid #795548;
   border-radius: 0 0 40% 5% / 0 0 15% 20%;
   padding:0 1em 0.1em 0.2em;
   font-size:110%;
   font-weight:bold;
   transform: rotate(-5deg);
}
.memox::after{
   content:'';
   position:absolute;
   left:50%;
   top:-15px;
   margin-left:-75px;
   width:150px;
   height:30px;
   background:rgba(245,245,245,0.7);
   box-shadow:1px 1px 4px rgba(0,0,0,0.2);
   transform: rotate(-4deg);
}
.memox ol{
   margin:1em 0.5em 0 2em;
   padding:0 0 0 0;
}
.memox ol li{
   margin-bottom:0.5em;
}

html

<div class="memox huifont">
<ol>
<li>手書き風フォントのふい字は黒板よりメモのほうが合うかも?</li>
<li>transform: rotate(-2deg);でちょこっと傾ける</li>
<li>テープとタイトルは疑似要素を使って作成</li>
<li>タイトル部分はborder-radiusを使って手書き風の下線に</li>
</ol>
</div>

黒板風のcssもいいですが、もう少し柔らかいものにしたいときはこういったメモ風がいいかもですね。

ふい字を使うときに気をつけたいこと

ふい字はウェブフォントとしては数少ない漢字も入っているフォントです。ブログの雰囲気を変えるには便利ですが、弱点もあります。

日本語フォント共通のことですが、ファイルサイズが大きいのが問題です。ふい字も(環境によっていくつか形式が分かれますが)1-1.5MBほどのファイルになっています。見出しだけにしか使わない場合でもそれだけ大きなファイルを読み込む事になります。

これだけデータ量が大きいと、モバイルからはキツイかもしれません。表示速度に気をつけている人は、なるべく使わないほうがいいと思います。

参考記事

design.syofuso.com

www.fair-skinned-monster.com