【常時SSL化対応】はてなブログのタイトルを手書き風フォント「ふい字」にカスタマイズしてほっこりする作戦+追記

広告

このブログのタイトル 自由ネコ の文字は、ほっこりかわいい手書き風ですが、実をいうと手書きの「画像」ではなく、ちゃんとした「文字(フォント)」だって、初心者の皆さん知ってました?

え?

「私もほっこり文字を使ってみたい!」 って?

よし!じゃあ、一緒にやってみましょう!

(私もやり方を忘れています)

 

【お知らせ】

このブログでは、2019年4月15日より、「ふい字」の導入を廃止しました。

よって、この記事内で「ふい字」で表示されていた部分も、現在では普通のフォントに戻って表示されています。ご了承ください。

 

まずは、ほっこりかわいい文字「ふい字」を使うことによるメリットを考えてみよう。

とりあえず、インパクトがありますよね。

「メイリオ」や「游ゴシック」などの中に、突然「ふい字」が出てくると、

ハッとします。

それに、画像ではなく文字ですから、普通に、

コピペが出来ます。

 

さらには、かわいい文字で書いちゃえば、とりあえず何でも許されちゃうような気がします。

きわどいことや、えげつないことを書く時でも、可愛い文字を使えば全然、問題なし! 

 

例えば・・・

 

骨肉の争い とか。

「ふい字」で書くと、なんかソフトになっちゃいます。

「いいよいいよ、遺産なんて適当で。みんなで仲良く分配しよう!」

 っていう気持ちになりますよね。

 

 

あるいは・・・

 

懲役三百年 とか。

かわいい字で書くと

「あっなんかいいな!自分も体験してみたいな、懲役 ♪」

みたいな感じになりますよね?

(ならない?ああそうですか) 

 

・・・・・・

 

・・・・・・ 

 

血ヘドを吐いて死ぬ

ってのもいいですね。

 

 

はてなブログのタイトルに、ほっこりかわいい手書き風の日本語フリーフォント「ふい字」(無料)を使ってみる。 

通常であれば、無料の手書き風フォント「ふい字」をまずダウンロード。

ふい字置き場

それをネット上のどこかに置いといて、自分のブログに引っ張ってくる、という事になると思います。

え?よく分かんねぇよって?

そんなこと言われても、

私も分かんねぇよ。

 

ところが・・・

ありがたいことに「ふい字」の場合、自分で用意しなくても運営元の「はてな」さんが、すでにネット上に置いといてくれていますので、そのデータを自分のはてなブログに引っ張ってくることが出来るようです。

詳しいことは知らんけど。

 

とりあえず実験。しばしお待ちを。

サブのブログで確かめてみます。

(本当にガチで今から調べます)

 

・・・・・・

 

うん、出来た。

 

はてなブログのダッシュボード(管理画面?)から以下の通りに移動します。

 

f:id:gattolibero:20160531122031j:plain

ダッシュボード

デザイン

カスタマイズ(スパナのマーク) 

 ↓

{}デザイン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> 

実際の表示はこんな感じ。

はてなふい字にしたい文字はてな

 

どうでしょうか。

できましたか?

 

そんなこんなで「役に立つ系」の記事を書いたのに、役に立たない部分が大半を占める結果となってしまいました。

 

こんな時は「ふい字」でごまかすに限ります。

 

ガタガタ抜かすやつは

東京湾に沈めちゃうぞ ♪