花鳥風月のフォントをwebで使ってみよう【古見さんは、コミュ症です。】
「古見さんは、コミュ症です。」というアニメを最近見ました。
その中で、こみさんが黒板に書いた文字がものすごく綺麗に感じて使ってみたいと思いました。
調べてみると、
アニメ『古見さんは、コミュ症です。』、手書き風のフリーフォントが活躍していますね。
— むささび@C99 2日目 東ナ11a (@mpr6n) October 14, 2021
古見さんのめちゃくちゃ綺麗な字やOPのテロップは「花鳥風月」、只野くんの字は「ふい字」です。#古見さん #komisan pic.twitter.com/dxwyUNBYGD
このツイートによると花鳥風月というフリーフォントを使っているようです。
この花鳥風月をBloggerで使ってみようと思い、その使い方をここに残します。
まず、花鳥風月はこのサイトで紹介されています。
もともとのサイトは消えてしまったようで、waybackmachineというあらゆるサイトを保存してある所からアクセスしているようです。
webでどうやって使うのか調べると、花鳥風月のwebフォント版があるサイトを見つけました。
そこに @font-face のCSSのコードが載っているので、それを用いれば花鳥風月のフォントをBloggerで表示することができます。
しかし私はCSSとか苦手なので、CSSの使い方も復習しておきます。
まずBloggerでCSSを別のファイルに書くのはおそらくできないと思うので、htmlに書きます。
htmlにCSSを書くときは、<style></style>で囲みます。
先ほどの@font-faceのコードを<style>タグの中に書きます。
その後、そのフォントを適用する範囲を指定します。
クラスごとに指定するのならば、
.myfont{
font-family:花鳥風月BB;
}
こうすると、myfontというクラスに花鳥風月BBのフォントが適用されるようになります。
あとは適用したい文字を<p></p>か<div></div>で囲って、<p>だったら
<p class="myfont">~
とすればOKです。
Bloggerだと最初に何か文字を書いて生成された<p>タグにクラスをつけると、あとは書いているだけで勝手にそのクラスがつけられるみたいです。
他の方法としては、このサイトによると
html{
font-family:花鳥風月BB;
}
とか、
*{
font-family:花鳥風月BB;
}
のようにすると全体に適用できるようです。
しかし全体に適用すると、特にBloggerはなんか崩れそうなのでクラスでいいと思います。
また花鳥風月のwebフォントを配布しているサイトでは、花鳥風月は重いフォントと書かれているので全体は厳しいと思います。
あと普通のは薄いので、BBのものがおすすめで、Bloggerで文字の大きさを最大にすると読みやすいかもしれません。
あとはもっと行間を開けたほうが読みやすそうですが、面倒くさいのでそんな感じで終わります。
コメント
0 件のコメント :
コメントを投稿