モカモカ工房

1. アイデアマンズ株式会社のBJKitからファイルをダウンロードします
2. 「beautifulJapanese.js」を開き、「beautifulJapanese.swf」のファイルの位置を指定します。

   baseSwfFile = 'http://mocamoca.com/blog/bjkit/swf/beautifulJapanese.swf';

   　「http://mocamoca.com/blog」の部分はそれぞれのサーバーに合わせてください。
   　<$MTBlogURL$>は使えないようです。
3. Movable Typeのディレクトリに「bjkitディレクトリ」を作りファイルをアップします
   
4. ヘッダテンプレートにbeautifulJapanese.jsへのリンクを入れます

   <script type="text/javascript" src="<$MTBlogURL$>bjkit/js/beautifulJapanese.js"></script>

5. フッタテンプレートに下記のコードを付け足します。
   　これで、ブログタイトルのh1、ブログの説明、個別記事見出しのh2にアンチエイリアスがかかります。
   　設定の詳細はBJKitのページをご覧下さい。

   <script class="javascript" type="text/javascript">  
   window.onLoad = replaceFonts( 'content', 'h2', '<$MTBlogURL$>bjkit/swf/fontsData/gothic.swf', '495', '16', '1', '20', '006699', '006699', 'FF6633' );
   window.onLoad = replaceFonts( 'header', 'h1', '<$MTBlogURL$>bjkit/swf/fontsData/gothic.swf', '220', '32', '1', '20', '006699', '006699', 'FF6633' );
   window.onLoad = replaceFonts( 'header', 'p', '<$MTBlogURL$>bjkit/swf/fontsData/gothic.swf', '300', '12', '1', '40', '000000', '006699', 'FF6633' );
   </script>
   

さらに、自分の好きなフォントを作ることが出来ます。

1. sample.flaを立ち上げます
2. テキストボックスを選択し、アクティブにします。
3. ［フォント］サブメニューから新規に作成するフォントを選びます（ライセンスにご注意）
4. テキストボックスの周りに2pxほどの余白が出きるように調整します
   
5. ファイルを任意の名前で保存します（hima.flaなど）
6. パブリッシュします
7. 出来上がったswfファイルをfontsDataディレクトリにアップします
8. フッタのJSでフォントを指定します
   

   window.onLoad = replaceFonts( 'hima', '', '<$MTBlogURL$>bjkit/swf/fontsData/hima.swf', '600', '14', '1', '60', '000000', '006699', 'FF6633' );
   window.onLoad = replaceFonts( 'tare', '', '<$MTBlogURL$>bjkit/swf/fontsData/tare.swf', '600', '14', '1', '60', '000000', '006699', 'FF6633' );
   

9. さらにコンテナタグに上で指定したid（hima、tare）を付記します。

   <p id="tare">たれた文字を表示出来ます</p>
   <p id="hima">ひまな文字を表示出来ます</p>
   

   たれた文字を表示出来ます

   ひまな文字を表示出来ます

• JavaScriptとswfでフォントを美しくする、BJKit - DesignWalker