INKSCAPEでwebアイコンフォントを描く時の注意点
フォント（文字）のように色や大きさを変えて使う事が出来るイラスト、webアイコンフォントを作る時に気をつけたいポイントを5つ書きます◎
「飯ごう」で解説します。私達もwebアイコンフォントよ
僕はサイズが80pxで、色は#77a004 という指定になっているよ。この文字は16pxだよ
webアイコンフォントを描く時に気を付けるポイント5つ
作った物をWordpressに入れて実際に使う方法は「プログラミング1年生」の22時限で詳しく解説しています。
1.正方形の中に描きます
Icomoonに取り込むとこんな感じになりますので、ファイルは正方形にしておきましょう、か。（YouTubeのように長方形の物も時々あります）
インクスケープを立ち上げたら、ファイル＞ドキュメントのプロパティを選択。
デフォルトはA4サイズになっていますので、カスタムサイズの幅と高さを今回は200pxに書き換えました。（ちなみにIcomoonに入っているインスのアイコンは500pxほどでした）
この中に飯ごうを描きます。
この後の解説のため a、b、c 3つの飯ごうを用意しました。一見全部同じですがbとcはちょっと問題があります。
2.保存形式は svg です
(a,b,c個別に) 保存します。ファイル＞名前を付けて保存
インクスケープの保存形式、svg がそのまま使えます。Saveで保存します。
Icomoonにインポートします
Icomoonのサイトを開きヘッダー部分をクリックします。
左上のImport Icons をクリック、先ほどインクスケープで作って保存した〇〇.svgのファイルを選択します。
入りました。
正方形の中に書かないとどうなるのか
ここで、、200pxの正方形の中ではなく、A4ファイルに描いて保存した場合はどうなるのか気になったのでやってみました。
飯ごうの大きさは200pxの中に描いた時と同じです。
200pxの物よりずいぶん小さく表示されました。
大きさはサイトで自由に指定出来るのでこれも使えますが、この場で見にくいのでやはり正方形のファイルの中に描いた方が良しとします。
戻って続けます。
上の黄色いSelectボタンを選択して、使いたいアイコンをクリックしていきます。1つ選ぶと下のSelectionが１になります。
飯ごうabc、3つをクリックし、下のGenerate Font をクリックします。
何か問題があったようです。問題が無い時はこの窓は表示されません。ひとまずContinue。
注意！Multicolor マルチカラー
飯ごう(hango)C が問題でした。Multicolor マルチカラーになっていますよと言っています。単一の色にしてくださいと。
飯ごうCのイラストをクリックするとこのように大きく表示されます。引っかける金具もほとんど消えています。
3.黒１色で描きます
実は「飯ごうC」は蓋の線が白で描かれていました。
本当だ。aとbはその部分が抜けているね
白が入っていないかチェック
後ろに別の色（ここでは水色）を敷くとよく分かります。こんな感じで白が入ってしまっていないかを保存する前によく確認します◎
黒い部分と白い部分を選択します。
パス＞排他 で重なっている白い部分が抜けます。
これで白部分が無くなって黒１色のアイコンなりました◎（水色の部分は解説のため）
4.線は表示されないのでパスに変換します
線はインクスケープでは「ストローク」と表現されています。線のままだとIcomoonに取り込んだ時に表示されなくなってしまいます。
（同じ線なのに、引っかける上のポコっとした所は何故か表示されましたが）
パス＞ストロークをパスに変換 します。
5.パスを統合しておいた方が安全です?
最後に「飯ごうb」。Icomoonで問題にならずWordPressで使っても綺麗に表示されたのですが、
以前バッグのアイコンを（イラストレーターで）作った時にこれが原因で綺麗に表示されず修正した経験があったので「パスの統合」も念のため解説しておきます。
飯ごう本体の上にハンドル部分が乗っかっていて、この段階では2つは別々のパーツです。
拡大するとこうゆう状態ですね
1つにくっつけたいパーツを選択して、パス＞統合
1つのパーツになりました。これで安心です。
「飯ごうC」のハンドル部分も同じように
統合しておきます。
パスを統合せずにアイコンを作って綺麗に表示出来なかったらこの記事を思い出してください◎
Icomoonのファイルをダウンロードする
アイコンがちゃんと修正出来たのでIcomoonに戻ります。選択したアイコンをダウンロードします。その方法はプログラミング1年生、21時限の中の「描いたものをIcoMoonでwebアイコンフォントにする」をご覧ください。
こんな内容のファイルがダンロードされます。この中のフォルダ、ファイルをWordPress（以下WP）が入っているサーバーに入れて使います。
もちろんWP 以外でも使えるのでダウンロードまでやっておいてプログラミングの知識のある方に頼んだりしても◎
HTMLとCSSの知識があればそんなに難しく無いよ
WPで使う場合はプログラミング1年生の22時限「WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_後編」を見ればHTML,CSSの知識が無くても出来るよう解説しています。
サーバーやテーマをいじるのでやったことの無い方は難しく感じるかもしれませんが丁寧に説明しているので是非挑戦してみてください。
WPで実際に使ってみました
架空のキャンプ場の「投稿」記事。
投稿記事を書くときにタブを「ビジュアル」で無く「テキスト」の方にして、文字をIcomoonでget出来るタグ（この辺の詳しい事もプログラミング1年生の22時限の中「IcomoonでコードをGetする」で書いています）で囲むと、、
Icomoonのタグで囲んだだけだとデフォルトでは黒１色でこの位の大きさで表示されます。（ちなみに文字は16pxです）webアイコンフォントの大きさ、色、文字との間隔 などをCSSで調整すると
より華やかで何を言っているのか分かりやすくなります。
CSSをどこに書くかやり方はいろいろあるのですが、この場合はWPのプラグインでカスタムCSSを追加。そこに「”飯ごうa”はサイズ120pxで、色は#454545で、右側を10px空けて、ベースラインを中央で合わせる」などの指示をしました。
以上、インクスケープでwebアイコンフォントを書く時の注意点、
- 正方形の中に描きます
- 保存形式は svgです
- 黒１色で描きます
- 線は表示されないのでパスに変換します
- パスを統合しておいた方が安全です
でした。
