【準備編】WordPressに独自アイコンをWebフォントとして導入する方法

【準備編】WordPressに独自アイコンをWebフォントとして導入する方法

今回は独自のアイコンをWordPressにWebフォントとして導入する方法@準備編です。
アイコンは自作も可能ですが、今回はフリー素材を利用しての説明となります。
icomoonというサイトでフリー素材が提供されていますので、ここではicomoonからフォントデータを入手するまでの手順を紹介します。

前提

このブログで使用しているテンプレートはLION MEDIA2.0(前記事)というものになります。
今回はこのテンプレートでの利用方法をご紹介します。他のテンプレートで利用可能かどうかは未検証のため不明です。
しかしWordPressというフレームワーク、あるいはそれに限らずHTML+CSSという組み合わせで作られているサイトであれば適用可能な方法である為、ご参考にしていただければと思います。また、冒頭で記載した通り、自作アイコンの作成方法(お絵描きの方法)はこの記事では紹介していません。
フリー素材を利用(一例としてicomoon)して導入する方法をご説明します。

まえがき:Webフォントについて

まず「Webフォント」について軽く説明します。

Webフォントとはなんなのか

WebフォントはWWWのコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化(レンダリング)をともなうクライアントが文字表示を行うシステムおよびそのフォントである。CSS3.0 fonts moduleで、この機能の標準が提供された。 Wikipedia

Webサーバ側にフォントデータを持たせて、それをブラウザが読み込んで・解釈して表示させる仕組みということになります。
アイコンに限った話ではないということです。

導入するとなにが良いのか

Webフォントというのを特に何もWebサイト側で指定していしない場合、本来はクライアント側が持つフォントデータが利用されてブラウザに文字が表示されます。しかし、それだとWeb製作者側が意図しないフォントが読み込まれてしまい、ひいてはWebのデザインやレイアウトが意図と異なるものになってしまうことがあります。
これを防ぐために導入された仕組みになります。

アイコンをWebフォント化

例えば、
等、馴染みの深いアイコン
等、Webのデザインで使えるアイコン
を画像ではなくフォントとして利用してしまおうというのがこの記事の主旨です。

本編:フォントデータのダウンロード

ここからが本編です。

導入するアイコン(Webフォント)を用意する

当ブログでは、icomoonというフリーのアイコン素材を提供しているサイトからアイコンを入手し、導入しています。

icomoonからダウンロード

以下、icomoonからダウンロードする方法です。

1.導入したいアイコンを選択する

まず、トップページ中央に大きく表示されている「IcoMoon」のエリアをクリック

アイコンの選択画面が表示されます。

導入したいアイコンを選びます。

選び終わったら、右下のGenerate Fontをクリックします。

2.アイコンと文字コードの紐付け

ここではutf-8という文字コードの、どの文字コードに対してアイコンを割り当てるかを編集できます。
基本的には何もいじる必要はありません。
が!当ブログで利用しているLionMediaで実はIcoMoonのiconが標準で搭載されています。冒頭で紹介したなんかは既に入っており、テンプレートで利用されていました。文字コードでいうとe900〜e90fまでは既に使われています。
なのでこの範囲を利用してしまうと既存テンプレートに影響を与えてしまうのでこの範囲を避けます。

編集後はこんな感じです。16進数表記なのでe90fの次はe910からです。

3.ダウンロード

最後に、右下のDownloadをクリックすることでダウンロードが可能です。
ダウンロードしたzipファイル内のファイル構成は以下の通りです。

これでフォントデータの準備は完了です。

次回はWordPress(LionMediaテーマ)への導入方法についてご紹介します。

WordPressカテゴリの最新記事