今回ブログで使用するアイコン画像を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」でインポートしました。このサイトから使わせて頂きました。
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箇所くらいあると思います。
1 2 3 4 5 6 7 8 | @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」となっています。
アイコンを表示させたい部分にこのように記述します。
1 | <span class="icon-googleplus"></span> |
という記述をすると「」となります。つまり「icon-名前」という使い方です。
アイコンの名前はIcoMoonのサイトに戻って右下の「Generate font」をクリックすると前回までに選んだアイコンの名前が表示されます。
またはダウンロードしたフォルダの「demo.html」でも確認できます。
アイコンフォントの色やサイズを変更したい場合はスタイルシート（CSS）で
1 | .icon-googleplus {color:#dd4b39;font-size:18px} |
というようにGoogleプラスのアイコン全部のスタイルを変更する事もできますし、記事本文中に
1 | <span class="icon-twitter" style="color:#4dccf5"></span> |
というように１つ１つ違うスタイルを変更する事もできます。ちなみにこのアイコンを私は下記の「ソーシャルボタン」と「スマートフォンのフッターメニュー」で使ってます。
WordPressでふい字を使う方法と手順【図解】
ソーシャルボタンを自作してWordPressの高速化
スマートフォンページのフッターに固定メニューを作成してみました
TwentyTwelveタイトル全般のカスタマイズ
しげぞう様
ご回答ありがとうございました。しげぞう様の回答を見ていて、色々調べていたところ私が使っていたSafariがダメだったみたいです。どうしてかは分からないですが、、FirefoxでロリポップにログインしSafari同様にアップロードしてみたところアップロードが出来ました。ただの私の知識不足ですね。。。まだまだしげぞうさんのサイトにはお世話になりそうです泣
本当にありがとうございました。
しおから様
コメントありがとうございます。icomoon.eotファイルを開く必要はありません。「fontsフォルダ」を解凍するだけでOKです。解凍したらeot、svg、ttf、woffなどのファイルがありますので、これらを作成したFontsフォルダにアップロードします。
本当はダウンロードしたFontsフォルダまるごとアップロードしたい所なんですが、フォルダごとのアップロードができないので、フォルダを作成し、中身をアップロードしてる感じです。再度になりますが、中身のファイルは開く必要はありませんので解凍だけしてアップロードです。
解凍だけできれば他のアプリなどをインストールする必要もありません。分からない部分があればまた再度コメント下さい。
始めまして。いつも参考にさせてもらっています。
こちらのサイトに出会ったおかげでアフェリエイトを始めるきっかけになりました。ありがとうございます。
質問があります。
child（子テーマ）に進み、子テーマの中にフォルダを作成してfontsと名づける所まで進めれたのですが、作ったfontsにIcoMoonからダウンロードしてきたfontsフォルダを解凍してアップロードをしようとして、色々と試しましたが出来ませんでした。他の方のコメントを見る限り、皆さんスンナリ出来ているようなので、ただ私のアップロードのやり方が違うのでしょうか？上記の記事に書いている。。。今作った「fonts」というフォルダにダウンロードしてきた「fonts」フォルダの中身を１つ１つアップロードします。をもう少し詳しく教えて欲しいです！
もしかしたら、最初 icomoon→fonts→icomoon.eotとファイルを開く時に、対応していません。と表示され開けなくApp storeでOpen Any Fileというアプリをインストールしました。こちらが関係しているのかもしれません。。
お時間がある時で構わないです。もし宜しければ教えていただけないでしょうか？
ご回答お待ちしています。
しげぞう様
ご回答いただきありがとうございます。
テキストエディタからビジュアルエディタに切り替えるとやはり消えるのですね。了解しました。AddQuicktagを使ってもビジュアルエディタでは消えてしまいました。記事中には使用せず、ソーシャルボタンに適用したかっただけなので、このままでもいけるかもしれません。とりあえず、この状態で次の記事に進んでみたいと思います。
ご回答ありがとうございました。
gura様
コメントありがとうございます。これはあります、テキストエディタからビジュアルエディタに切り替えすると消えますね。私の場合はほとんどがテキストエディタしか使わないので問題ないのですが、時々間違ってビジュアルエディタに切り替えたりするとアイコン消えたりします。
多分プレビューで表示されるって事はCSSなども間違っていないと思われます。
ビジュアルエディタを使ってないので対策があっているか分かりませんが、AddQuicktagでアイコンのコードそのままを登録しておいて、ビジュアルエディタで使用するというのはできないかな？と思いました。エディタを切り替えるのが問題であれば切り替えしないで済む方法を試してみるのが良いかなと思います。