自作 WOFF を作ってみた-#1。

投稿アップデート情報  追記(7/17)

Widgets Title on English blog テーマを “Sugar and Spice” に決めた理由の一つに,ウィジェットのタイトルデザインがあった。もともとは,ブログタイトルにもこのデザインが使われるようになっている。これに使われているフォントは Niconne という名前の Google Fonts で,使い方はこの辺にある。

Widgets Title on Japanese blog 間抜けな話だが, Niconne にはアルファベットと数字しか入っていないので,日本語ブログのほうの表示は,右図のようなことになってしまった。無味乾燥だし, wp だけが Nicconne なので,余計変に思える。日本語表示のほうは当然ビジターの環境に左右されるわけだ。これは,ヤダ,と思った。

 なんか使えるもんがないかと探してみたんだが,日本語というのが足を引っ張る。文字数の多さとファイルの馬鹿でかさ。はじめのころのパソコンと同じ理由だ。 NEC のパソコンなんて,漢字ROM が入ってましたからね。
 作るのが大変なため,無料で利用できるものが非常に限られる。丸ごと, WOFF にして乗っけると,ファイルのでかさのため,ブログの表示速度にも影響する。そのうち,パソコンの漢字ROM 同様,技術が解決してくれるだろうが,今は,間に合わない。

 で,自分で作ることにしちゃったのヨ。いるのは,(最近の投稿広告コメントタグアーカイブテゴリ日本公式キャラクwp)の31文字だけだから,サブセット化ということをやれば,自鯖でも行けそうだから d(^o^) 。

 はじめまっせ。

**地道に**

  1. 31 文字を手書きした。字に自信はないので,もとから変な形にした。ハハハ。右のタイトルの字をご覧あれ。
    テーマを替えちゃったので、サイドバーに自作の文字がなくなったのを忘れてた。こんなのだったんだよ。 ☞
  2. 書いた文字をスキャンして, png ファイルにする。 jpg でしか保存できないなら,コンバータがいる。後で, Inkscape をインストールするから,これをコンバータにしてもいい。ちょっと,使いにくいが。
  3. 1文字ずつ, 1000 pixels x 1000 pixels の png ファイルにする。 “p” と “w” は 500 pixels x 1000 pixels。
  4. できた png のは,ビットマップファイルなので,ベクターイメージファイルに変える必要がある。 inkscape-0.48.4-1-win32.7z をダウンロードする。うちのは Windows8 x86 用です。
  5. inkscape-0.48.4-1-win32.7z を適当な場所に展開する。
  6. inkscape.exe を実行。
    1. png を1枚開く。画像上でクリックして,フォーカスを当てる。
    2. ビットマップをトレースする。メニューバーから (パス → ビットマップをトレース)をやると,トレースビットマップの窓が現れる。 [OK] をクリック。窓を×で閉じる。
    3. パスを簡略化する。 (パス → 簡略化する),これだけ。 Inkscape SVG として,ファイルを保存。
    4. Rotate rule.1-3 を png ファイル分繰り返す。
      [注] 手作業でベクターイメージを作る場合には,次のことに気を付けること。右図で矢印方向に進むとき,右側が文字エリア,左側が空白エリアである。これが狂うと,ちゃんと字にならない。
  7. setup-x86.exe (32-bit installation) をダウンロード。 FontForge for Windows が使えるようになっているので,そちらを使ったほうが早い。追記参照。
  8. cygwin をインストールする。 FontForgeSetup_2012-07-31_Windows.exe があるんだが,残念ながらうまく動かなかったので, cygwin 版を使うことにした。
  9. setup-x86.exe を実行。
    • “Choose A Download Source” では “Install from Internet”。
    • “Install For” では “All Users”。空白を含む場所は避ける。たとえば, “Program Files” などはやめたほうがいいらしい。
    • “Internet Connection” では “Direct Connection”。
    • “Choose A Download Site” では,どっか好きなとこ選んで。
    • “Select Packages” では, X11 を “Defalt” から “INstall” に変更。
    • で,インストール。
  10. fontforge_cygwin-20090914.tar.bz2 をダウンロードする。
  11. fontforge_cygwin-20090914.tar.bz2 を cygwin\home\<username> に移動する。
  12. FontForge のインストール。
    cygwin を実行 (cygwin のショートカットをクリックする)。

    1. $ bunzip2 fontforge_cygwin-*.tar.bz2
    2. $ tar xf fontforge_cygwin-*.tar
    3. $ cd fontforge
    4. $ ./doinstall
    5. $ cat >> ~/.bashrc
      PATH=${PATH}:/usr/local/bin ; export PATH
      MANPATH=${MANPATH:-}:/usr/local/man ; export MANPATH
      export LANG=ja
    6. $ exit
  13. mplus_bitmap_fonts-2.2.4.tar.gz をダウンロードする。
  14. mplus_bitmap_fonts-2.2.4.tar.gz を cygwin\home\<username> に移動する。
  15. cygwin を実行 (cygwin のショートカットをクリックする)。
    1. $ tar zxvf mplus_bitmap_fonts-2.2.4.tar.gz
    2. $ cd mplus
    3. $ ./install_mplus_fonts
    4. $ cd ..
    5. $ cat >> ~/.bashrc
      xset fp+ /usr/X11R6/lib/X11/fonts/mplus
    6. $ exit

 やっと, FontForge が使える。

**参考サイト
   MS-Windows 上の cygwin への FontForge のインストール手順
   FontForgeを使う

追記(7/17):

 みなさーん,いいお知らせです!! FontForge for Windows が普通に動くようになってるよぉ。現時点のバージョンは, 20-06-2014 みたい。

Google AdSense-#4。

 Google からサイト運営者向けプラグイン(ベータ版)というのが来たので,入れてみた。ベータ版ということで,不具合があるかもしれないね。

  1. まずは,上記のアドレスにアクセス。
  2. 記載に従い, WordPress のダッシュボードから Google Publisher Plugin (beta) をインストール。
  3. あとは,ここを見ると詳しく書いてある。
    「Google サイト運営者向けプラグインを設定する」

    うちの場合は,すでに ウェブマスター ツールを使っているので, [Get started(設定開始)]をクリックしたら,
    ———————————————————————————————
    Verify your site

    For security reasons we need to verify your site using Google Webmaster Tools (learn more).

    You own http://MySite
    You wish to use the Google Publisher Plugin on http://MySite

    If this is correct, please click the verify button.
    ———————————————————————————————
    というのが戻ってきた。ボタンを押すと,確認は無事終了。

  4. 「AdSense アカウントの情報を確認する」に進む。 AdSense もすでに使っているので,
    + すでに AdSense のアカウントをお持ちの場合: サイト運営者情報を確認する
    をやる。

    次に進む前に WordPress の Widgets に行って,広告ユニットをサイトから外す。

    [Manage adds]をクリックしたら下記が表示された。

    Admin on HTTPS, site on HTTP
    ———————————————————————————————
    The Google Publisher Plugin loads a preview of your site inside the admin panel to enable you to place ads on your site. However, your WordPress admin panel is delivered over HTTPS while your site is delivered over HTTP. This will cause your browser to give a warning about mixed or insecure content, and the preview may not be displayed.
    To enable the Google Publisher Plugin to work correctly with your site, either:

    Configure your site to be delivered over HTTPS (recommended)
    Use the browser prompts or the shield icon in the address bar to enable insecure content on this page

    For more information about this issue, please see our Help Center.
    ———————————————————————————————
    間に合わせで,下記をやることにする。
    Use the browser prompts or the shield icon in the address bar to enable insecure content on this page

  5. も一度[Manage adds]をクリック。
    サイトに AdSense 広告を配置する

    ここに配置できるよという+マークがいっぱい出てくるが,元の形の広告(のつもりだったが,レスポンシブになっていて,予想以上に馬鹿でかい長方形が表示されることがある)を一か所にだけ配置して,保存して開始。

 で,結果。 ———-> 気に入らないので,元に戻した。アワワワ。