小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

カスタマイズ&プラグイン
この記事は約3分で読めます。

本記事は手書き風フォントと手書き風ボタンを組み合わせてみたところ、実に味のあるデザインになったという内容です。
恐らく他の方には使い途ないと思いますが、よろしければ読んでみてください。

スポンサーリンク
この記事を読む方へのオススメ

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

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

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

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

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

質問者の写真

右下のボタンが雰囲気に合ってない……
 
スポンサーリンク

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

CSS整えるのもボチボチ慣れてきたということで、何かいいのないか探しに行きました。
すると一発で見つかりました。

手書き風ボタンを紹介しているサイト

http://www.nxworld.net/tips/10-css-cute-design-good-chemistry-button-design-and-hover-effect.html

質問者の写真

あるものだなあ……
 

英字の手書き風フォントとは組み合わせてるけど、日本語のWebフォントと組み合わせたらどうなるか。

結果

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

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

導入方法

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

手書き文字風日本語フリーフォントでブログをデザインして高速に読み込む
メイリオなどデフォルトのフォントは読みやすいけど単調。 特にテーマが被ると、少々のカスタマイズでは被って見えます。 ちょっと変化をつけてみたかったので手書き文字...

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

ふい字置き場
フリーの手書きかなフォント「ふい字」のサイト。2バイトで打ててシフトJIS第二水準漢字まで使えます。可愛くも綺麗でもないですが、しいて言えば普通っぽさが特徴。

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;
}

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

スポンサーリンク

まとめ

解答者の写真
味はあると思う
ワンポイントに使って遊んでみると面白いかも
 
ブログやサイトを始めたい・引っ越したい方へ

レンタルサーバーWING。
KUSANAGI&WEXALが使えるVPS。
どちらでも高速でコスパに優れたConoHaで始めるのがおすすめです。
もっと知りたい方はボタンをクリックしてください。
(ボタン経由で入会した場合、1000円分のクーポンがもらえます)

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
カスタマイズ&プラグイン
スポンサーリンク

コメント

タイトルとURLをコピーしました