Inkscapeで描く→webアイコンフォントにする→WordPress子テーマに入れる

13時限「INKSCAPEで写真をトレースして簡単に描く」で描いたコガネムシをWordPress（以下：WP)の子テーマに入れてwebアイコンフォント（以下：アイコン）として使う方法です。（この記事の画像以外のイラストは全てwebアイコンフォントです）

 

 

 

アイコンにするにはIcoMoonを使います。既存アイコンでいいデザインが沢山ありますし何と言ってもオリジナルが作れるので革鞄 や小物、革に使う動物 のアイコンを作るなど愛用させてもらっています。

 

Inkscape→IcoMoon→WPの流れ

 

 

アイコンを描く時の注意点

 

プログラミング１年生の「webアイコンフォントを描く時の注意点」で詳しく解説していますが以下の5つのポイントに気をつけて描きます。

 

webアイコンフォントを描く時の注意点

 

 

1:Inkscapeで描いて保存する

 

羽の茶色は黒ベタにしてもいいですがここでは模様を見せたいので削除しました。

 

足の毛、背中部分などは「選択ツール」で選択して「ストロークの塗り」で黒くしてシルエットに残します。

 

 

頭部分も

 

黒ベタではなく模様を生かそうと思います。

 

黒い模様が上になった状態で頭全体を選択、パス＞排他

 

模様部分が抜けました。白ではなく抜けているのがアイコンにする時のポイントです。

 

頭部分も黒にしてコガネムシ全部を選択。 パス＞統合 で1つにします。

 

 

ちゃんと抜けているかチェック

 

このままだと抜けているのか白が残ってしまっているのか分からないのでIcoMoonに取り込む前にチェックします。

 

矩形ツールなどで適当に色のついた四角を作ります。

 

後から作った新しい物は（レイヤーで分ければ別ですが）前に出てしまうので 背面に移動 でコガネムシの後ろに来るようにします。

 

レイヤーの考え方はこちら

 

 

 

 

 

ちゃんと抜けていて白が無い事が分かりました。

 

 

ファイルを正方形にする

 

ついでにカブトムシも作りました。このままだとファイルが大きい（今回たまたまファイルが正方形でしたがA4など正方形でない事の方が多いと思います）のでサイズを変更します。

 

ファイル＞ドキュメントのプロパティを開いて設定します。

 

カスタムサイズにして200×200pxの正方形にしました。

 

コガネムシ、カブトムシそれぞれ別ファイルで保存するためカブトムシを枠の外によけておきます。

 

 

保存します

 

ファイル＞名前をつけて保存

 

scarabとし保存形式はSVGを選んでデスクトップなどに保存(Save)します。

 

カブトムシも同じように保存します。

カブトムシを傾かせましたが、ここでやらなくてもIcomoonでやる方法（90度、180度。このあとご紹介）、WPのCSSで傾きの指示をする方法（角度自由）があります

 

Inkscapeのパートはここまでです。ここからはIcoMoonを使います◎

 

 

2: IcoMoonに取り込んでデータにしてダウンロードします

 

IcoMoonのサイトへ行きます（IcoMoonの詳しい使い方はこちら） Import Icons で 、、

 

先程保存したファイルを開いて取り込みます。

 

2つ入りました。

 

上の黄色い矢印で使いたい（アイコンのデータにしたい）物をクリックします。周りが黄色くなって選択されました。

 

他にも既存のアイコンで使いたい物があればクリックします。浮き輪と方位磁石2つ追加したので下のSelectionの所に(4)と表示されました。使いたいアイコンが決まったら右下のGenerate Font をクリックします。

 

選んだアイコン一覧が表示されました。もしアイコンを傾かせたいと思ったらここでも出来ます。イラストにカーソルを持っていくと水色になるのでクリックします。

 

拡大表示されます。

 

左下のボタンをクリックすると回転、上下左右反転が出来ます。

 

こうすれは左に90度傾いたコガネムシのアイコンが出来ます。（今回はしませんでした）

 

自分オリジナルのアイコンだけでなく既存のアイコンも同様に出来るので方位磁針を回転させてみました。

 

（最初の一覧で見た時と傾きが変わりました）済んだら右下の歯車マークをクリックして

 

Font NameやCSSのセレクターなど設定変更する場合はします。今回はこのデフォルトのまま行きます◎

 

Downloadで4つのファイルをダウンロードします。

 

ダウンロードした物はZIPファイルに圧縮されているので解凍（ダブルクリック）します。

 

解凍した中身に色々入っていますがWPで使うのはAのfontsフォルダ（の中に入っている4つのファイル）とBのstyle.cssファイルです。（selection.jsonファイルはアイコンの更新、追加の時に必要になりますので、結局はicomoonフォルダごと保存しておくのが良いと思います）

 

 

3: WPの子テーマに入れます

子テーマの作り方はプログラミング１年生 「28 WordPressで子テーマを作って安心のカスタマイズ」で解説しています。

 

子テーマとは？

元のテーマ（親テーマ）とセットで使います。親テーマの情報を引き継いでいます。親テーマに手を加える事無く変更したい部分だけ上書きします。最近はテーマ（cocoonなど）によっては自分で作らなくても子テーマも一緒にインストール出来るものもあるようです。

 

 

では「子テーマ」を作り終わった所から行きます。ここではLightningの子テーマLightning-childです。WP管理ツールの外観＞テーマ＞有効化しておきます。

サーバーの入り方詳しくは「自分のレンタルサーバーを見て見ましょう」へ◎

 

 

WPを入れたサーバーの管理ツールに行きます。FTPアカウント設定＞ログイン＞wp-content＞themes＞lightning-child（ご自身が作った子テーマ）をクリックします。

 

 

上にある「新規作成」を押すと窓が出ます。

 

フォルダ名をIcoMoonでダウンロードした中のfontsフォルダ名と同じにして「フォルダ追加」を押します。

 

fontsフォルダが出来たのでクリックします。

 

当然”ディレクトリ（フォルダのような意味）は空です”となっています。「新規作成」を押すとまた窓が出ます。この中に、、

 

IcoMoonで作ったfontsフォルダの中の4つのファイルを入れます。

 

入れたら「アップロード」します。

 

入りました。サーバーの方での作業は終わりです◎　WPの管理ツールへ行きます。

 

 

WordPressのスタイルシートにコピペする

 

子テーマを「有効」にして外観＞テーマエディタを開きます。

 

先ほどサーバー管理ツールから入れたfontsフォルダが入っているのが確認できます（その下層はicomoon.svgだけでOKです)。スタイルシートstyle.cssを開きます。

 

子テーマを作った時に記述した/* */の下に、、

 

IcoMoonでダウンロードした（B)style.css の内容をコピペしますので（B)style.cssを開きます。

 

 

テキストエディタ（フリーのVisual Studio Code使用）がPCに入っているのでこんな黒い画面にカラフルなコードですが入っていないPCでもmacならテキストエディット、winでも何かしらで開くようです◎

ブラウザでも開けるので安心してください

 

その内容を全部コピーして、、

ペーストします。

 

ペーストした１番下は今回私の場合、コンパスcompass2の閉じタグ「 } 」です。アイコンが沢山の方はその分長くなっています。

 

 

4: WPの投稿記事で実際に使ってみる

 

準備が出来たのでWPの投稿記事で実際に使ってみます。投稿＞新規追加 で投稿ページを開きます。

 

画像と文章を入れました。カブトムシとコガネムシの前にそれぞれアイコンを入れようと思います。

 

IcoMoonの今回選んでファイルにした一覧ページを開きます。使いたいアイコンの数字（e935など）下辺りにカーソルを持っていくと < > Get Code と赤く出ますのでクリックします。

 

HTMLのコードをコピーします。

 

投稿をテキストの方にします。表示したい場所、ここでは「コガネムシ」の前にペーストしました。

 

保存して投稿を表示しました。ちゃんと表示されましたがとても小さいです。デフォルトがこの大きさで色は黒だからです。なので今からCSSを書いて見栄えを良くしようと思います◎

 

 

CSSで色や大きさを変えて見栄えを良くする

CSSって？どこに書くの？

CSSをどこに書くかは迷う所ですが今回は投稿ページごとに変更出来るように、投稿でCSSコードを書くためのプラグインを入れる方法でプラグインが入った所から説明しています◎

 

 

先ほどと同じ < > Get Code を開いて今度は CSS をコピーします。

 

プラグインで入れた投稿ページの下の方に出る「カスタムCSS」にペーストします。このままでは何も変わらないのでここに大きさや色など指示を追記します。font-size: 50px;（フォントのサイズを50pxにする）としました。保存して投稿表示を見ると

 

大きくなりました。

 

大きさを100pxにして色、背景色、角の丸さを50%にすると

 

こうなります。

 

ちゃんと書いて保存したのにこんな表示になってしまった時は「スーパーリロード」をしてみてください。

 

 

こう表示させるには

 

こんなCSSです。コガネムシの傾きはdisplay: inline-block; transform: rotate(-30deg);で実現しています。

 

 

余談ですが投稿のビジュアルの方にアイコンは表示されないので「ない！」とびっくりされませんよう◎

 

最後にIcoMoonでダウンロードした残りの2つ、既存アイコンを使った投稿記事例です。CSSに何も書いていない状態です。どちらも丸いアイコンなのでそのままだと文字との間隔もぴっちりで苦しいです。

 

大きくして色を付けて文字とアイコンの水平位置を調整して文字とアイコンにスペースキーでは無く隙間を設定しました。

 

これらを書きました。

浮き輪：font-size: 32px;color: #50ccf1;vertical-align: bottom;margin: 0 6px;

方位磁針：font-size: 22px;color: #d3140d;margin: 0 3px;

CSSは他にも沢山あるので調べると面白いですよ