Yaku Han JPで「かっこ」のときにできる余計な隙間を消す

ミュージシャンのホームページに特化したWordPressテーマ「zousanrecords」を制作しています。太田ヒロシです。

現在zousanrecordsのアップデートのため、あれやこれやとやってます。
その中で新しいフォントを導入することにしたので今回はその解説です。

「」（かぎかっこ）を使ったときの隙間が気持ち悪い

「」（かぎかっこ）を使うと余計な隙間ができてしまうので、なるべく使わないようにしてきました。
どういうことかと言いますと、例えばライブ情報のページでイベントタイトルに「」を使うとこうなります↓

「が全角なので、前に隙間ができてしまい文字の頭が揃わなくて気持ち悪く感じます。拡大すると↓

Webフォント「Yaku Han JP」

なんと、これを解消してくれるWebフォントが存在しました。

Yaku Han JPというフォントです。

Yaku Han JP - 約物半角専用のフォント

かっこ類を半角にしてくれるというWebフォントです。

導入方法

導入方法も簡単でした。上のサイトそのままなのですが、
ヘッダーなどにCDNリンクを貼り付け

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css">

CSSでfont-familyの1番目にYakuHanJPを追加

.example {
 font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

これだけです。

実際に反映させてみた

これでライブ情報ページに反映させてみます。

拡大↓

文字の頭が揃ってすっきり！

まとめ

というわけで、Yaku Han JPをzousanrecordsの次のアップデートで導入します。という解説でした。

--------------------------------------

zousanrecordsはクラシック演奏家からロックバンド、アイドルグループまで幅広いジャンルでご利用いただいております。
先日、無料版のダウンロード数が250を突破しました！

zousanrecords

最近ではミュージシャン以外のクリエイター、アーティストにも使っていただけるWordPressテーマ、（最近は劇団のホームページを作りました）

アーティスト向けHPをWordPressで作ります 用途に合わせてページを追加、カスタマイズにも対応します！ | Webサイト修正・カスタム・コンサル | ココナラ

イベントの特設サイトに使えるWordPressテーマも作ってます。