今まで、当ブログのエントリータイトル部分にはアイデアマンズ株式会社さんが開発した「BJKit(BeautifulJapaneseKit)」というFlashとJavascriptを使った俗に言う「なめらかフォント」を表示していました。(詳しくはコチラをご覧下さい。)
確かにアイデアマンズなだけに(w)、アイデアある素晴らしいツールでしたが、『ちょっと重い』のが難点でした…。今まで当サイトを何度かご覧になってくださったリピーターの方々にも表示レスポンスの悪さのご指摘を頂いていました。
タイトル部分のフォントは「メイリオ」を採用し、Windows Vista以外のOSをお使いの方(メイリオをインストールされていない方)にもメイリオの素晴らしさを知っていただく為に試みたんですが…。
なかなか、どうして世の中上手く行かないものです…苦笑。
本来ならそんな小細工しなくてもいいんですけどね(ブログとして割り切っちゃえば)…。
まぁ、諦めの悪いボクとしては、「どうにかならないか。」と常々思っていました。
ある時、開発案件で色々と調べ物をしている時に、この「BJKit」に取って代わる『FLIR』というツールを紹介しているブログを見つけました。
(RAGARD-JP.com 様)
「お!! これだ!!」
と、早速当ブログにも導入いたしました。
RAGARD-JP.com様のこのエントリーは非常に丁寧な説明で、導入も比較的簡単(少しオリジナルのJavacriptを編集しましたが。)、且つ今まではFlashで擬似的に出力していたタイトル文字を画像として吐き出してくれる為、レスポンス(表示)も格段に早くなりました。
「SEO的に<h3>タグを画像にしてしまっているのは如何か?」とは思いましたが…汗。
alt属性もちゃんと日本語で出力されるので、「まぁいっか」の胸中です。
さて、では、どうやったか?
先ほども書きましたが、少しオリジナルのJavascriptを触る必要があります。(制作上のディレクトリ環境を考慮)
基本的にはRAGARD-JP.com様のエントリーで説明されている内容で構いません。
ただ、「flir.js」内で呼び出される「generate.php」がサイト構築時のディレクトリ環境によってリンク切れとなりパースできない事がわかりました。
以下、ダウンロードした各種ソースファイルをドキュメントルートに設置したと仮定し、ソースの修正箇所をご説明いたします。尚、ドキュメントルート以外に設置する場合はディレクトリ環境が変わりますので、下記の通りでは無い事を予めご理解ください。
- flir.jsの修正
773行目あたりの…
return FLIR.options.path+'generate.php?text='+enc_text+'&h='+o.offsetHeight+'&w='+o.offsetWidth+'&fstyle='+this.serialize(o);
をコメントアウト(行ごと削除でも可)し、その下の行に
return '/generate.php?text='+enc_text+'&h='+o.offsetHeight+'&w='+o.offsetWidth+'&fstyle='+this.serialize(o);
とする。
同じく、779行目あたりの…
return FLIR.options.path+'generate.php?text='+enc_text+'&h=800&w=800&fstyle='+this.serialize();
をコメントアウト(行ごと削除でも可)し、その下の行に
return '/generate.php?text='+enc_text+'&h=800&w=800&fstyle='+this.serialize();
とする。
- <head></head>内で読み込む「flir.js」をドキュメントルートからの「絶対パス」で指定。
(例)<script language="javascript" src="/flir.js"></script>
- cacheディレクトリのパーミッションを「777」へ変更
707でもOKかもしれません…。
以上の事を施す事で、どのディレクトリに格納した(X)HTMLでも問題なく「なめらかフォント画像」が表示できるかと思います。
尚、このエントリーに関する問合せはお請け出来ません。
また導入は自己責任という事でご理解ご了承ください。