このブログのタイトル 自由ネコ の文字は、ほっこりかわいい手書き風ですが、実をいうと手書きの「画像」ではなく、ちゃんとした「文字(フォント)」だって、初心者の皆さん知ってました?
え?
「私もほっこり文字を使ってみたい!」 って?
よし!じゃあ、一緒にやってみましょう!
(私もやり方を忘れています)
【お知らせ】
このブログでは、2019年4月15日より、「ふい字」の導入を廃止しました。
よって、この記事内で「ふい字」で表示されていた部分も、現在では普通のフォントに戻って表示されています。ご了承ください。
まずは、ほっこりかわいい文字「ふい字」を使うことによるメリットを考えてみよう。
とりあえず、インパクトがありますよね。
「メイリオ」や「游ゴシック」などの中に、突然「ふい字」が出てくると、
ハッとします。
それに、画像ではなく文字ですから、普通に、
コピペが出来ます。
さらには、かわいい文字で書いちゃえば、とりあえず何でも許されちゃうような気がします。
きわどいことや、えげつないことを書く時でも、可愛い文字を使えば全然、問題なし!
例えば・・・
骨肉の争い とか。
「ふい字」で書くと、なんかソフトになっちゃいます。
「いいよいいよ、遺産なんて適当で。みんなで仲良く分配しよう!」
っていう気持ちになりますよね。
あるいは・・・
懲役三百年 とか。
かわいい字で書くと
「あっなんかいいな!自分も体験してみたいな、懲役 ♪」
みたいな感じになりますよね?
(ならない?ああそうですか)
・・・・・・
・・・・・・
血ヘドを吐いて死ぬ
ってのもいいですね。
はてなブログのタイトルに、ほっこりかわいい手書き風の日本語フリーフォント「ふい字」(無料)を使ってみる。
通常であれば、無料の手書き風フォント「ふい字」をまずダウンロード。
それをネット上のどこかに置いといて、自分のブログに引っ張ってくる、という事になると思います。
え?よく分かんねぇよって?
そんなこと言われても、
私も分かんねぇよ。
ところが・・・
ありがたいことに「ふい字」の場合、自分で用意しなくても運営元の「はてな」さんが、すでにネット上に置いといてくれていますので、そのデータを自分のはてなブログに引っ張ってくることが出来るようです。
詳しいことは知らんけど。
とりあえず実験。しばしお待ちを。
サブのブログで確かめてみます。
(本当にガチで今から調べます)
・・・・・・
うん、出来た。
はてなブログのダッシュボード(管理画面?)から以下の通りに移動します。
ダッシュボード
↓
デザイン
↓
カスタマイズ(スパナのマーク)
↓
{}デザインCSS
まで移動。
デザインCSS内に
「ふい字に関するあれこれ」を書き込みます。
※2018年3月27日追記
「常時SSL化」(「http://」から「https://」への移行)に対応するため、下記のコードを少し変更しました。
もしも過去にこの記事からコピペして「ふい字」を利用していた方で、HTTPSに移行した結果「ふい字」が表示されなくなった方は、お手数ですが修正をお願いします~。
ようするに
http://hatenablog.com/fonts/public/HuiFont/HuiFontP109なんちゃら…
という風な感じで書かれている部分が5カ所あるのですが、その前半部分の
http://hatenablog.com
という部分を削除しました。
全部で5カ所です。
(以上、ここまでが追記)
↓ここから↓(修正済み)
/* ---------ふい字------------ */
@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');
font-weight: normal;
font-style: normal;
}
/* ---------タイトルをふい字に------------ */
#title a {
font-family: 'HuiFontP109', sans-serif;
}
/* ---------ブログの説明をふい字に------------ */
#blog-description {
font-family: 'HuiFontP109', sans-serif;
}
↑ここまで↑
あとは「変更を保存する」 を押して、ブログの表示を確認。
多分「ブログのタイトル」と「ブログの説明」のフォントが、『ふい字』になってるはずです。
もしかしたら、使用する「テーマ」によっては、うまく行かないかも知れません。
試してみる方は、自己責任でお願いいたします。
※文字のサイズ、色、影、その他の装飾に関しては、今回はふれません。
ちなみに、今回のエントリーのように、ブログの本文中の一部分に、フェイント気味で「ふい字」を差し込む時は、こんな感じで。
仕込みとして「{}デザインCSS」内に、上記の「ふい字あれこれ」を書き込みます。
その上で、
記事を書く時には「HTML編集」で、フォントファミリーのタグを書き込みます。
例えばこんな感じ。
↓
<p>はてな<strong><span style="font-family: HuiFontP109; font-size: 200%;">ふい字にしたい文字</span></strong>はてな</p>
↓
実際の表示はこんな感じ。
はてなふい字にしたい文字はてな
どうでしょうか。
できましたか?
そんなこんなで「役に立つ系」の記事を書いたのに、役に立たない部分が大半を占める結果となってしまいました。
こんな時は「ふい字」でごまかすに限ります。
ガタガタ抜かすやつは
東京湾に沈めちゃうぞ ♪