mania-ku

何か作りたいプログラマ未満。

Macでアイコンフォント作成の手順まとめ

今日試しにMacでアイコンフォントを作ってみたので、忘れないためにメモ。

アイコンを用意する

イラレでパスを用意して、1アイコンずつSVGに保存します。

フォントにする

OTEDIT for Macで、1文字に1ファイルずつインポート(読んで)サイズなど調整。
新規作成でフォントの太さやフォント名などが聞かれます。
なぜかフォント名は効かなかったけど・・・
保存してTTFにします。

フォントを必要な形式分用意する

実験したときは、eot、woff、ttf、svgを使いました。
下記のツールで変換しました。

CSSで使う

こんな感じで書いて使いました。

@font-face {
	font-family: 'フォント名';
	src: url('フォントURL.eot?#iefix') format('embedded-opentype'), 
	     url('フォントURL.woff') format('woff'), 
	     url('フォントURL.ttf')  format('truetype'),
	     url('フォントURL.svg#svgFontName') format('svg');
}

使いたい要素 {
	font-family: フォント名;	
}

キアヌ・リーヴスが出る47 roninが見たくて、しょうがないです。
ポスターみたら、見たくなりまして。

2013都議選とインターネット利用とWordPress

夏休みにはちょっと(だいぶ?)早いですが、2013都議選とインターネットとWordPressを題材に自由研究(?)をしました。
きっかけはインターネット選挙運動解禁されたけど、候補者や当選者はどれだけインターネットを使っているものなのか純粋に興味があったからです。
とは言っても、調べて情報をGoogleDocsに集め集計(Google Apps Script初利用!利用方法間違ってないといいけど。。。)しただけですが・・・。
人数が多かったため、始めた日から一週間もかかってしまいましたorz

【CSS】ZenCodingを試した

ようやくZenCodingを試した。
これは・・・!すごい。さらっとやっただけでも、かなりの時間短縮ができるようになった。
CSSのほうもごりごり覚えていけたら、かなりの時短ができるようになると思う。

PhotoShopでレタッチを覚えたり、
JavaScriptをなんとなくだけど使えるようになったときくらいの衝撃。

会社用にDreamWeaverにセッティングしたものの、最初古いプラグインを入れてしまって挙動がおかしかった・・・。
ちゃんと確認しないと。反省。
自分や社内のコーディング規則に合わせて、もっとzen_settings.jsを合わせた方が良さげだが、
かなり時短できそうなので時間があるときに進めていこうかと思う。

試しに使いたいなんてときはjsdo.itでもできるので、使ってみてもいいかも。
こちらの展開はCtrl+E。
なかなか使える。

覚え書きをjsdo.itに書いた▼