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

2017年2月25日

当ページのリンクには広告が含まれています。

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

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

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

design.syofuso.com

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

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

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

ヨミカキ by kanahei – テーマストア

Pink Pharmacy – テーマストア

ほかにもタイトルだけで使っているといった限定的な使い方をしているものもあります。で、これらの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さんの記事では黒板に使っていたのですが（というか黒板がメインの記事ですし）同じものを作っても仕方ないので、ほかに似合いそうなメモを作ってみました。（これも目新しくはないですけどね。）

手書き風フォントのふい字は黒板よりメモのほうが合うかも？
transform: rotate(-2deg);でちょこっと傾ける
テープとタイトルは疑似要素を使って作成
タイトル部分は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>