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

第1回ホーム画面カスタマイズ定期コンテスト 投票結果発表! 1位はドロイド君の新緑ホーム画面
修理に出してたXperia Z3 Compactが帰ってきたよー!
Try UQ mobileでUQ mobileのスマホとSIMカードを無料で15日間借りてみる
KLWPのテーマ特集:ドットビューにX型、マテリアルデザインなど雑多なテーマ6種 (2017.07.08)
モノクロ・海外の風景・シンプル、3つの好きを集めたモノクロホーム【ホーム画面企画2016】
UMi Z レビュー:Zの名は伊達じゃない!Helio X27搭載のハイスペック機は久々に出会った「使える」中華端末
ごちゃつくUSBケーブルを整理!マグネットでくっつくケーブルホルダー
C90 コミックマーケット90 参加記
KLWPで500pxのステキな画像をRSSから拾って使う方法
Widgets for Gmail:指定したGmailの受信箱をホーム画面にリスト表示するウィジェット
第2回ホーム画面カスタマイズ定期コンテスト投票開始のお知らせ
アナログの温かみと厳選した情報表示にこだわるノート風ホーム画面【ホーム画面企画2016】
直ぐにアクセス!!…出来ないホームw【ホーム画面企画2016】
Linner Bluetoothイヤホン NC50:アクティブノイズキャンセリング機能で集中したい時にピッタリ
ZenFone 3 購入4ヶ月レビュー:バランス良く使いやすい優等生-本当の「これで充分」がここにある
pocket line hatebu image gallery audio video category tag chat quote googleplus facebook instagram twitter rss search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status