アイコン画像をWebフォントに変更して高速化

今回ブログで使用するアイコン画像をWebフォントに変更する事にしました。普通のアイコンを利用すると「画像」を使う事になるのですが、画像を使いすぎるとサイトの表示速度を遅くする原因の１つになります。

このWebフォントっていうのはアイコンを「画像」ではなく「文字」として読み込んでくれます。しかも文字と同じなので「font-size」とか「color」などのCSSで色や大きさを変更する事もできます。

アイコン画像のように見えますが、実は「文字」という解釈なので画像を利用するよりも読み込みがスムーズになるという私なりの認識です。では私がどこでこのWebフォントを利用しているのか？というとこの部分で使っています。

そう、ソーシャルボタン表示のアイコン部分に利用しています。

以前はプラグインでソーシャルボタンを表示させていたのですが、ソーシャルのボタンって１つ１つがJavaScriptやボタンの画像を使うので非常に重いのです。そこでサイトの表示速度を上げる為に自作のボタンを作成しました（作成方法は別記事で解説します）。

そこで必要になったのがこのアイコンなんです。

普通の画像でも良かったのですが、せっかく表示速度を上げる為に作成したのでWebフォントを利用する事にしたのです。

Webフォント導入

webフォント（アイコンフォント）導入するにあたって複数の案がでました。有名なのは「Font Awesome」というサービスで色々なアイコンフォントが利用できます。一部見せておくとこんな感じです。

非常にアイコンの種類が豊富で使い方も簡単なのですが、「Font Awesome」で私の使い方SNSのアイコン（はてブとかLineとかPocket等）がありませんでした。

結局必要なアイコンだけダウンロードして使える「IcoMoon」というサービスを利用する事にしました。この「IcoMoon」では自作したアイコンをインポートしてウェブフォントにできるのですよ。

さて、この「IcoMoon」に自作したSNSボタンをインポートするのですが、私自身「Illustrator」とかそれ系のソフトを利用した事がないので、アイコン作成する知識がありません。でもネットで自作したSNSボタンを公開してくれている人がいるのですよ！ありがたい。

という訳で足りないSNSボタンをダウンロードさせて頂き、「Icomoon」でインポートしました。このサイトから使わせて頂きました。

ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！ | ドウラク

Feedly、LINE、はてなブックマーク、PocketのSVGファイルをダウンロードさせて頂きました。

IcoMoonでアイコンをダウンロードしてサーバーにアップロード

まずはSNSで使う画像やブログで利用したいアイコンを探しに行きます。
⇒IcoMoon

先ほどダウンロードさせて頂いたFeedly、LINE、はてなブックマーク、PocketのSVGファイルをインポートして選択。

それ以外にもアイコンの一覧がありますので使いたいアイコンをどんどん選択していきます。欲しいアイコンが全部決まったら右下にある「Generate font」というボタンをクリックします。

私の場合は「Twitter」「Googleプラス」「フェイスブック」「RSS」系のアイコンを幾つか選択しておきました。

右下の「Generate font」をクリックすると選択したアイコンの一覧が表示されますのでOKなら右下の「Download」をクリックします。

するとフォルダがダウンロードされます。解凍して中身をみると色々入っていますが、必要なのは「fonts」というフォルダと「style.css」の２つです。

fontsフォルダをアップロード

では「fonts」フォルダをサーバーにアップロードします。FTPソフトを使うならフォルダのままアップロードできますが、ロリポップの場合はフォルダの中身を１つ１つアップロードします。

ロリポップのユーザー専用ページから「WEBツール」⇒「ロリポップFTP」と進み、フォントを使いたいサイトを選択し、「wp-content」⇒「themes」⇒「child（子テーマ）」と進みます。子テーマの中に（子テーマのCSSやphpがある場所）にフォルダを作成して「fonts」と名づけて保存します。

次に今作った「fonts」というフォルダにダウンロードしてきた「fonts」フォルダの中身を１つ１つアップロードします。

最終的に「fonts」フォルダの中身がこのようにまりました。

ここまでできれば後少しです。

ダウンロードしたstyle.cssをコピーする

IcoMoonからダウンロードしたフォルダからstyle.cssを開いて中身の記述を全部コピーして子テーマのCSSに貼り付けます。

ここで修正する場所があります。url（）の部分を‘./fonts/icomoon～のようにfontsの前に【./】を追加します。5箇所くらいあると思います。

@font-face {
	font-family: 'icomoon';
	src:url('./fonts/icomoon.eot?-icure6');
	src:url('./fonts/icomoon.eot?#iefix-icure6') format('embedded-opentype'),
		url('./fonts/icomoon.woff?-icure6') format('woff'),
		url('./fonts/icomoon.ttf?-icure6') format('truetype'),
		url('./fonts/icomoon.svg?-icure6#icomoon') format('svg');
}

これで準備はOKです。

Webフォントを使ってみよう

それぞれのアイコンには名前が付いています。例えば「Google+」のアイコンの名前は「googleplus」となっています。

アイコンを表示させたい部分にこのように記述します。

<span class="icon-googleplus"></span>

という記述をすると「」となります。つまり「icon-名前」という使い方です。

アイコンの名前はIcoMoonのサイトに戻って右下の「Generate font」をクリックすると前回までに選んだアイコンの名前が表示されます。

またはダウンロードしたフォルダの「demo.html」でも確認できます。

アイコンフォントの色やサイズを変更したい場合はスタイルシート（CSS）で

.icon-googleplus {color:#dd4b39;font-size:18px}

というようにGoogleプラスのアイコン全部のスタイルを変更する事もできますし、記事本文中に

<span class="icon-twitter" style="color:#4dccf5"></span>

というように１つ１つ違うスタイルを変更する事もできます。ちなみにこのアイコンを私は下記の「ソーシャルボタン」と「スマートフォンのフッターメニュー」で使ってます。

• ⇒ソーシャルボタンを自作してWordPressの高速化
• ⇒スマートフォンページのフッターに固定メニューを作成してみました
• ⇒WordPress高速化まとめページ