手書き風フォントと手書き風ボタンを組み合わせたらこんな感じになった

本記事は手書き風フォントと手書き風ボタンを組み合わせてみたところ、実に味のあるデザインになったという内容です。

サイトに手書き文字をアクセントとして採り入れてみたい方、

ボタン単体だけでなく、UIの統一感が図れて、いい感じになります。

手書き文字とBootstrapデザインは合わない

本サイトはいかにもなBootstrap風味にしています。
いらっしゃる方は記事を読むというより情報収集という感じでしょうし。
余計な装飾のない、無骨な方が好まれるかなあと。

しかしメインは手書きタイトルで、かなり雰囲気を変えています。

サインペンで殴り書きした感じが気に入ってます。

しかしボタンはというと、

手書き風フォントと手書き風ボタンを組み合わせてみる

導入方法

手書き文字フォントの設置方法はこちらとなります。

本サイトでは「ふい字P」を使っています。

プラグインでお手軽に導入したいならJapanese Font for WordPress。
これを使えばCSSで指定せずとも、記事編集画面で直接ふい字フォントを指定できます。

CSSは次の通り。

.tegaki-button{
 font-family: 'huimin' !important;
 display: inline-block;
 font-size: 1.8rem;
 padding: .2em 2.5em;
 border: 2px solid #333;
 border-radius: .4em 2em .5em 3em/3em .5em 2em .5em;
 color: #333;
 text-decoration: none;
 text-align: center;
 background-color: #fff;
 margin:10px;
 font-weight: bold;
}

字は指定よりも大きめにするのがポイント（フォントによると思いますが）。
色を付けたらのっぺりするので、白のままにするか工夫した方がよさそうです。

結果

かなり統一感とれたと思います。
サイドバーもこんな感じ。

サイトの雰囲気、大分柔らかくなったかなあって思います。

まとめ