WordPressにIcoMoonで作ったアイコンフォントを入れる方法_前編
サイトでアイコンフォントが使えるとパッと見で何の説明をしているのか分かり易いです。
架空のキャンプ場情報。同じ事が書いてありますがこれよりも、、
こっちの方が分かりやすいね
そう。私達もwebアイコンフォントなのよ◎
この記事の目次
1. アイコンフォントとは？
web上で文字（フォント）と同じように表示出来るアイコンの事です。画像でアイコンを貼るのと違って拡大してもぼやけず綺麗で、サイズも色も簡単に変えることが出来ます。
instagramやfacebookなど有名なアイコンは勿論、IcoMoonを使えばオリジナルのアイコンもwebで使える形式にしてくれます。
このサイトで販売しているバッグや革の説明に使う動物のアイコンが欲しくなったのがそもそもの始まりでした。フリーのバッグのアイコンもありますが特徴あるオリジナルが欲しかったのです。
●内側にピッグスエードを使ったバッグです。
●鹿革は刀剣の鞘など日本では古くから、、、
2. Scratch → IcoMoon → WordPress の流れ
大まかな流れです。今回は最終的にWordPressで使います（※WordPress自体は使える前提で書いています）が、２のIcoMoonまで（アイコンフォントを作るまで）を読むだけでも価値はあると思います◎ ちなみにこのサイトもWordPressで作っています。
WordPressではなく自分で作ったサイトに設置する方法はこちら。
ファイルを置く位置を間違えなければ簡単です。
1. Scratchでイラストを描く
子供に人気のScratch（スクラッチ）のお絵描き機能を使います。本来はプログラミング開発環境ですがイラストの保存形式がsvgで、次に使うIcoMoonもsvgのデータが必要なので好都合なのです。もちろんイラストレーターやインクスケープでもsvgデータが作れますが、自分のパソコンにインストールする必要のないScratchはハードルが低いと思うので今回は簡単な方法で行きます◎
インクスケープ（フリーソフト）で描く方法はこちらで解説しています。
「インクスケープ1年生」ではソフトのインストールから解説しています。
2. IcoMoonでアイコンフォントにする
1のScratchで作ったオリジナルのアイコン用イラストを、IcoMoonに取り込んでアイコンフォントとして使えるようにします。オリジナルを作るだけでなく、既存のフリーアイコンも沢山あるので使いたい分を選んでまとめてダウンロードします。
3. WordPress でアイコンフォントを使えるよにする
最終目標。2のIcoMoonでダウンロードしたファイルをここに入れて色やサイズなど自由に変更して使えるようにします。WordPressの入っているサーバーをいじる事になるので、慣れていないとここが一番「うっ」と来るかもしれません。でも、画像満載で丁寧に説明しますのでその通りやって頂けば出来る（出来てほしい）と思います。
ファイッ
3. Scratchでイラストを描く
欲しいアイコンのイラストをScratchで描きます。大きさは適当で、、というのも後（WordPressで使う時）から大きくも小さくも出来ますしIcoMoonに取り込んだ時に自動的にそれなりの大きさにしてくれるからです。
Scratchで絵を描く準備をします
スクラッチのサイトに行きます。
「作る」「作ってみよう」どちらでもいいのでクリックします。
（恐らく初めてだと出て来る）チュートリアルは見ても見なくてもOKで、終わったら×で閉じます。
デフォルトはプログラミングのスペース（コード）が表示されています。お絵描きのスペースを出すため、上のタブ「コスチューム」をクリックします。
Scratchのキャラクターのネコ？さんがデフォルトで出ているので、
右下の「スプライト１」の×で消します。
真っさらな状態になったここに描きます。
イラスト完成図。架空のキャンプ場説明のためのランタンを描きます。ツールを使って描きます。
もし下の水色の中の表示が「ベクターに変換」となっていたらクリックして「ビットマップに変換」が表示されている状態にして今後の作業を進めてください。
イラストを描きます
ポイント：黒１色で描きます
次のIcoMoonで作るwebアイコンフォントは黒一色という事になっているので、「色」「鮮やかさ」「明るさ」の○を全て左側に動かして真っ黒にします。「太さ」は好みで◎
色も大きさもCSS（プログラミング）で後から好きに変えられるので安心してね
色が決まったらランタンのフタ部分を描いてみます。（左下、完成図です）
上手くいかなかったら「戻る」で操作を戻せます。
メリハリをつけるために黒で塗りつぶしてみます。バケツのイラスト「塗りつぶし」ツールです。
塗りつぶしたい部分をクリックします。画面を拡大して見たい時は下の虫メガネマークを操作してください。
炎の中、”抜け”の部分が小さ過ぎるので大きくします。
「形を変える」ツールをクリックして形を変えたい所をクリックします。このように水色と○が表示されます。
○を持って引っ張ります。先に四角の付いたハンドルが出たら動かして調整します。
滑らかな線を描きたい時は上の丸っぽいマーク「滑らか」をクリックします。逆にカクッとさせたい時は隣の「角ばった」をクリックします。
Scratchのお絵描き機能もっと使えるようになりたい
ここではツールの使い方をほとんど解説していませんが、「プログラミング1年生」の11時限、12時限 「スクラッチでオリジナルキャラクターを作る」で詳しく解説しいます。
それなりのピシッとした物もScratchで描ける事がわかります。
こちらは写真を下に敷いてトレースする解説です。「18時限：スクラッチでカブト虫をトレースして描く」
トレースする画像を取り込む所から解説した動画もあります。
ポイント：正方形の中に描くと収まりがいいです
正方形の中に描く（Inkscapeやイラレで可能なら正方形の画面に設定する）と後々背景色など付けた時に収まりがいいという事なのだと分かりました。この後のIcoMoonの所で解説します◎
2021年11月11日 追記
Inkscapeで描いた場合ですが正方形の画面（ドキュメントのプロパティ）で保存した場合は、
右の上下○印のように表示されます。左の上下△印はイラストの大きさに合わせて長方形の画面で保存した結果です。長方形でも良いのですがこのように背景に色をつけた場合に納まりが良くありません。更に背景色の角の丸さを50%にした時に右のような正円になりません。
この後Icomoonで画像を取り込む説明がありますが、正方形（○）の画面でも長方形（△）の画面でもここでの見た目は同じでした。違いを確認するには、
上の鉛筆マーク（Edit クリックすると青くなります）でアイコンをクリックすると、
分かります。（Edit：編集 の通り左下の矢印などで位置、反転など出来ます）
長方形の画面で保存したものは水色で表示した部分も長方形です。
Scratchで正方形の画面に設定できない時は？
Inkscapeは画面の大きさを変更出来るけど、Scratchはどうすればいいの？
Scratchで描いたファイルは
イラストの幅いっぱいいっぱいに収まっていました。”正方形の画面”は無理そうです。
正方形の中に書けないと何が問題？
先にも書いた通り収まりが悪いというだけです。気になる人は気になるかなという程度で◎
１：Scratch（又はInkscape、Illustratorで正方形に設定しなかった）背景色を付けた場合
２：Inkscape、Illustratorで正方形に設定し背景色を付けた場合
１、２それぞれの背景の角の丸（border-radius）さを50%に設定した場合。正方形だと50％で綺麗な正円になります。
イラストを書き出します
完成したイラストを書き出します。左上の「背景１」の所で右クリックすると表示される「書き出し」を選んでください。
ポイント：ファイル形式はsvgでOKです
macだとこんな感じで自分のパソコンにダウンロードされます。
今後の事を考えて英数半角で名前を書き換えます。
Webアイコンフォント用のイラスト完成。次はIcoMoonを使っていきます◎
4. IcoMoonでアイコンフォントにする
IcoMoonのサイトへ行きヘッダー部分をクリックします。
サイト上部、、
「Import Icons」で先程Scratchで作ってデスクトップにダウンロードしたファイルを取り込みます。
この「〇〇.svg」ファイルです。
5. 4や既存のアイコンをダウンロードする
上の黄色い矢印（Serect）でクリックすると「Selection」が１になりました。
せっかくなのでIcoMoonに用意されているアイコンからもいくつか選んでまとめてダウンロードしようと思います。左下のAdd〜をクリックします。
カートの物は有料で、Addは無料です。例えばIcoMoon-Free を選んでみます。
右上の32,64など大きい数字にすると大きく表示されます。
キャンプなので火を選択、Selectionが２になりました。現在2つアイコンを選択しているという意味です。
インスタのマークも何かと使えるので。3つ目。
（Scratchでちょっと気にしていた「正方形の範囲内に」余談ですが、YouTubeのアイコンは2つ分のスペースを取っています。下の画像のテントも横長でIcoMoonに取り込んだ時に案の定というか2つ分のスペースになりました。選択したら1つで２という表示になったのでなるほど2つ分でカウントされるんだ、と思って他の作業をしていたらいつの間にか１になっていました。この後のWordPressでは特に問題無かったので、もし今後何かあったら追記します◎）
実はScratchでテントのイラストも描いていまして、これを含めて全部で4つになりました。
決まったら右下の「Generata Font」をクリックします。
選んだ物の一覧です。lantan、tent はScratchでダウンロードした時に自分で付けた名前になっていて、IcoMoonで選んだfire、instagramはデフォルトです。ダブルクリックで変更も出来ますが分かり易いのでこのままでいいと思います。
右下、Download横の歯車マークをクリックします。
選んだ4つのファイルをどんな形式にするかの小窓が出てきます。今回は「Font Name：icomoon 」「 Class Prefix : icon- 」、CSS Selector をUse i (for selecting <i>)。全てデフォルトのまま行こうと思いますので特に変更が無ければこのまま上の×で小窓を閉じます。
では4つDownloadでダウンロードします。（もし、もっと増やしたい時はSelectionで戻れます）
zipファイルがダウンロードされるのでダブルクリック（macの場合）で解凍します。
解凍した中身はこうなっています。この後WordPressで必要なファイルは fontsフォルダ（の中の4つのファイル）とstyle.cssファイルです。今後アイコンを追加したいイラストを修正したい時などは今回の情報が入っているselection.jsonファイルが必要です。
2020年8月3日 追記
ダウンロードしたファイルは保存しておいてください
ダウンロードしたファイルはWPに入れ終わった後もアイコンを追加したい時、イラストだけ新しくして差し替えたい時など必要になる（selection.jsonファイル）ので保存しておいてください。（IcoMoonはキャッシュ機能があるの故意に捨てない限りイラストは残りますが、e901などの番号が変わってしまいます）
アイコンフォントの差し替えと新規追加
プログラミング25時限で「webアイコンフォントの差し替えと新規追加」方法を書きました。
すでに使っているアイコンはそのままに新規追加はもちろん、 昔のアイコンのコードを書き直す事なくイラストだけ新しく差し替えたりも出来ます。この21時限とセットで覚えておくと便利です◎
そしてIcoMoonの選んだアイコン一覧のページ（「Generata Font」）の、各アイコンの数字下にカーソルを持っていくと表示される<>Get Code を押すと出てくる、、
HTML、CSS のコードは今後WordPressの投稿記事を書く時に使うので、このページはブックマークするなどいつでも見れるようにしておくと便利です◎
これでIcoMoonのパートは終了、webアイコンフォントが4つ出来ました。後編ではこれをWordPressに入れて使えるようにします。
お疲れ様でした
アイコンフォント制作します
無料・有料のアイコンやWebフォントは便利で私も使っています。 でも、デザインや見易さにこだわればこだわるほど御社独自の製品、サービスのアイコン が欲しいと感じませんか。
スキルのオンラインマーケットcoconala（ココナラ）にて4つで17,000円で承っています。現在ご覧のサイトの「お問い合わせ」からもご相談ください◎
