KLWPでFontIconの新しいセットを追加する方法 SVGファイルからオリジナルで作成も可能

|
20160816-klwp-0

KLWPには「FontIcon」という、いわゆるアイコンフォントを表示する機能があります。デフォルトでは「Entypo」「Fontawesome」「Material」「Meteo」の4種類のセットが用意されています。これだけでも充分ではありますが、もっとほかのセットを追加したい、自分オリジナルのものを使いたい、ということもあるでしょう。

今回はKLWPにFontIconの新しいセットを追加する方法を紹介します。

概要

詳しくはこのあとに説明しますが、まずは簡単に流れを説明します。慣れている人ならこれだけでも理解できるでしょう。

  1. icomoonでフォントを作成
  2. ダウンロードしてzipを展開
  3. 中にあるselection.jsonをリネーム(フォントファイルと合わせる)
  4. ***.jsonと***.ttfをKustom/Iconsフォルダにコピー
  5. 使えるようになっているのを確認

以上です。

1.アイコンフォントの作成

新しいセットを追加するには、まずその元となるアイコンフォントを作成します。これにはicomoonというサイトを利用します。

20160816-klwp-220160816-klwp-3

このサイトは、公開されている様々なフォントアイコンから自分の好きなもの、必要な物だけを選んで1つのフォントとしてダウンロードできるサイトです。
まずは自分の使いたいアイコンをタップして選んでいきます。

20160816-klwp-420160816-klwp-5

もし使いたいものがなければ、一番下にある「Add Icons From Library…」をタップし、アイコンのセットを追加しましょう。一部有料のものもありますが、多くは無料で利用できます。

20160816-klwp-620160816-klwp-7

選び終わったら下のタブメニューから「Font」をタップします。
選んだフォントが1つ1つ並んでいるので、必要があれば名前を変更します。ここで入力した名前はKLWPでもFontIconで選ぶ時の名前になります。

20160816-klwp-820160816-klwp-9

上のほうにある設定ボタンをタップするとフォント全体の設定となります。基本的にはそのままでいいですが、フォント名(Font Name)だけは変えておきましょう。

20160816-klwp-1020160816-klwp-11

設定が終わったら右下のボタンからダウンロードします。

2.フォントをKLWPで使えるように

20160816-klwp-1220160816-klwp-13

Icomoonからダウンロードしたものはフォントファイル単体ではなく、複数のファイルがzipで圧縮されています。まずはファイラーアプリでこれを解凍(展開)しましょう。

.ttfファイルを確認

20160816-klwp-1420160816-klwp-15

回答したファイル内「fonts」フォルダに.ttfファイルがあります。ファイル名は自分で作成したフォント名になっているはずです。
まずはこれが必要になります。

.jsonファイルをリネーム

20160816-klwp-1620160816-klwp-17

次に、1つ戻って「selection.json」というファイルがあります。これのファイル名を変更します。変更する名前はフォント名と一緒にします。フォント名がsample.ttfなら、これもsample.jsonにします。

.ttfと.jsonをKLWPフォルダに移動

20160816-klwp-1820160816-klwp-19

sample.ttfとsample.jsonの2つのファイルをコピーして、KLWPのフォルダ(内蔵ストレージ/Kustom/Icons)にコピーします。ここにはデフォルトの「Entypo」なども同様に.ttfと.jsonファイルが置かれています。

KLWPで確認

20160816-klwp-2020160816-klwp-21

これでKLWP内で使えるようになっているはずなので確認します。
適当にFontIconを置いて、Setを開いてみましょう。先ほど作成した新しいセット「Sample」が加わっているはずです。

20160816-klwp-2220160816-klwp-23

中身もちゃんと自分で設定した名前になっているはずです。
これであとはもう普通にFontIconとして使うことができます。

まったくオリジナルのものを作る

Icomoonでは、用意されたセットだけでなく、SVGファイルなどを取り込んでフォント化する事もできます。つまり自分でSVGファイルが作れれば、それをFontIcon化することもできます。

20160816-klwp-24

さすがにSVGファイルの作成方法までは掲載しませんが、Illustrator等で好きなものをちょちょいのちょいと作成します。

20160816-klwp-25

あとはそれをIcomoonでインポートして、先ほどと同様にFontIcon化すれば、KLWPで自由に使うことができます。

まとめ

FontIconはKLWP内でアイコンとして使うときに便利です。画像ファイルと違って大きさによる劣化などを気にすることもないので、うまく使いたいですね。Icomoonで追加できるアイコンフォントのセットは天気やアプリ、サービスのアイコンなどたくさんありますので、きっと気に入るものが見つかると思います。
KLWPで使えそうなFontIconのセットやSVGファイルも、私オリジナルのものを、そのうち公開したいと思います。


KLWPの使い方についてはこちらのページにてまとめています。使い方に困ったときなど、こちらのページも参考にしてください。

Random Posts

XOutOf10:AndroidスマホでもiPhone Xの気分を味わえるジョークアプリ
Xiaomi Mi Band 3 開封の儀:0.78インチ有機ELディスプレイ搭載のスマートバンド
タイルアイコンメーカー:Windows Phoneのようなタイル型アイコンを作るウィジェット
Pixel 3用にアンチグレアの画面保護フィルムを3種類購入するも、結果はあと一歩と言ったところ
貯まったGoogle Play クレジットで何買おう?おすすめの有料アプリ
Clear Clock:ダイヤルロックのような数字盤が回転する時計ウィジェット
MSLバッテリーウィジェット:AIでバッテリーが指定数値まで減る時間を表示するウィジェット
アニメーション特化型ホーム画面【ホーム画面定期コンテスト】
Galaxy Gear VR with Controller 開封の儀:コントローラー付きで没入感アップ!また未来の扉を開けてしまったか
第7回ホーム画面カスタマイズ定期コンテスト 投票開始のお知らせ
To-Do Widget:明るいフラットデザインのシンプルなTo Doリストウィジェット
まさにファーウェイ三昧! 都内で行われたファーウェイイベント3つをはしごした日 #HWJTT2016
Just a Line:空間にお絵かきして10秒動画を作成できる未来的で面白いアプリ
Sleep as Android:眠りの浅いタイミングで起こしてくれる賢い目覚まし&睡眠解析アプリ
UMIDIGIのスマートウォッチUMIDIGI Uwatchが登場!超お得なキャンペーンもアリ!