ブログは、かわいいフォントで書きたい。
手書きで書いたようなフォントがあったらいいな。
と思っている方はいらっしゃいませんか？？
もともと使っているフォントは、見やすくても、普通過ぎてつまらないですよね。
たまには、フォントを変えてみませんか？
強調したい部分だけ一部を変えるだけでも、雰囲気が変わりますよ。
でも、フォントを変えるにはどうしたらいいの？
難しそう、、、
大丈夫です。ただCSSとHTMLに張り付けるだけで簡単にできます。
では、一緒にやり方を見ていきましょう。
はてなブログのみの場合ですので、その他のプラットホームをお使いの方はご注意ください。
「こんにちは」のフォントを変えたいと思います。
HTMLは、今時点では
<p>こんにちは</p>
となっています。
次のようにしてみましょう。
<p style="font-family: HuiFontP109;">こんにちは</p>
そして、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}
以上を行えば、フォントを変えられます。
こんにちは
こちらを参考にしました。
はてなブログでふい字が使えたのでメモ風cssを作ってみた
ただし
日本語フォント共通のことですが、ファイルサイズが大きいのが問題です。
（中略）
これだけデータ量が大きいと、モバイルからはキツイかもしれません。表示速度に気をつけている人は、なるべく使わないほうがいいと思います。
だそうです。
表示速度を気にする方にはおすすめできません。
私はこの記事
【おすすめのバレエ漫画】山岸凉子さんのアラベスク【あらすじ】
のフォントを変えました。
どうして好きなの？？
二部構成で、
第一部は、苦しくても頑張らなくちゃならない主人公ノンナに
「この次どうなっちゃうの」とハラハラそしてワクワクさせられ、一気に読んでしまいました。
第二部は、高校生の私には複雑な心理状態すぎて意味が分かりませんでしたが、
そんな訳が分からずもやもやする感情を求めて何回も読むうちに、心理描写の凄さに気づいて何度も読む好きな漫画になりました。
htmlはこちらです。
<p style="font-family: HuiFontP109;"><br /><span style="color: #f5a2a2;">どうして好きなの？？</span></p>
<p class="wf-roundedmplus1c" style="font-family: HuiFontP109; border-radius: 5px; border: 1px dashed #ffb6c1; font-size: 100%; padding: 20px;">二部構成で、<br />第一部は、<span style="color: #f5a2a2;">苦しくても頑張らなくちゃ</span>ならない主人公ノンナに<br />「この次どうなっちゃうの」とハラハラそしてワクワクさせられ、一気に読んでしまいました。<br /><br />第二部は、高校生の私には複雑な心理状態すぎて意味が分かりませんでしたが、<br />そんな訳が分からずもやもやする感情を求めて何回も読むうちに、<span style="color: #f5a2a2;">心理描写の凄さ</span>に気づいて何度も読む好きな漫画になりました。</p>
ちなみに点線の囲み枠はこちら
を参考にしました。ありがとうございます。
最後まで読んでくださりありがとうございました。
ブログを始めたばっかりで、HTMLとかCSSとか全然分からない！という方は、分かりやすい本がたくさん出版されていますので、是非ご検討ください。
こちらは、1冊ですべて身につきます。キャッチコピーに惹かれちゃいます。
