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

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

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

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

icon-1

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

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

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

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

スポンサーリンク

Webフォント導入

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

icon-2

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

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

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

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

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

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

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

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

アイコンボタン-1

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

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

sns-2

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

icon-5

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

icon-6

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

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

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

icon-8

icon-9

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

icon-10

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

icon-11

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

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

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

icon-12

ここで修正する場所があります。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」となっています。

icon-7

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

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

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

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

icon-13

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

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

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

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

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

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

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

アイコン画像をWebフォントに変更して高速化”に14件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. Kita

    しげぞう様

    ご指摘ありがとうございます。CSSの余分な「 } 」を削除し、幅を49%、余白を1%・1%にしたところ無事反映されました。本当にありがとうございます。その上の広告が表示されていないような気もしますが、ここは自分でいじってみます。

    アドバイスありがとうございました。そしていろいろと勉強になりました。(^-^)

  2. しげぞう 投稿作成者

    kita様

    返信ありがとうございます。「single.php」は関係はないですね。今確認したのですが、私の方からスマートフォンで確認したらきちんと揃っていましたので、再度確認してもらないでしょうか?また、念のため複数の記事で確認する事をおすすめします。

    それから2列になるように記述したという事ですが、スタイルシートの「/* スマートフォンSNSボタン */」という部分の直前に「 } 」が1つ多く記述されているようですので、これを削除してみて下さい。

    また、幅は50%では2列にはなりません。というのも、それぞれのボタンに少し余白があるからです。なので、ここは50%ではなく、48%くらいの幅にしてみると良いと思います。

  3. Kita

    しげぞう様

    ご返答ありがとうございます。
    ご教授頂いた箇所の修正をしましたら、今度はそれぞれ高さがバラバラになってしまいました。
    また、2列になるように記述しても4列のままです。記事下広告の下に設置するためcontent.phpではなくsingle.phpに記述しているのが影響しているのでしょうか?
    またになりますがよろしくお願い致します。

  4. しげぞう 投稿作成者

    Kita様

    コメントありがとうございます。並べるボタンの数でやや違う部分がでてきていると思いますので、記事も修正しておきました。これでおそらく大丈夫とは思います。

    変更する点としてはスタイルシートの「.share li a」部分です。現在はこのようになっていると思います。

    .share li a {
        display: block;
        padding: 10px 0;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        text-align: center;
    }

    ここの「padding:10px 0;」という部分がありますが、これを「padding:10px;」にしてみて下さい。「0」の部分を削除して10pxだけに変更する感じでOKかと思います。一度試して再度報告して頂けると助かります。

  5. Kita

    本当に何度もすいません。_(_^_)_
    確かこちらに質問させていただいた件については自己解決致しました。読み間違い?勘違い?が原因でした。申し訳ありません。

    また、ちょっとした質問なんですがソーシャルボタンを設置し、CSSにスマートフォンのコードを記述したんですがスマートフォンのみ反映されません…。PCのほうでは反映されるんですが。
    PCでは横4・縦2で、スマートフォンでは横2・縦4で記述してます。しかし、スマートフォンではPCと同様に横4・縦2になり「Facebook」が長く列が崩れます…。ちょっとPCの記述を変更しスマートフォンのように各ボタンの角を丸く、隙間を開けるように記述したのが原因なんでしょうか?

    原因の方は分かりますでしょうか?すいません。よろしくお願い致します。 スマホのほうでもご確認してもらえるでしょうか?。

  6. 乃風

    やはり、それでよかったのですね。ありがとうございました。

    余談ですが・・・。私、スマホとか、あーゆうちっちゃいのを持ってないんですね。だから、例えばアイコンをフワァ~と浮き出させる方法とかをやっても、確認が取れないので、最低限度の配慮でいいやって思っています。そもそもそういうフワァ~と表示させる技があったなんて、それを知れた時は、ちょっと感激しました。ちっちゃい画面用への最低限度の配慮として、例えば、写真は複数の場合、横並びにせずに、縦並びに1枚ずつに変更したりしました。今、毎日毎日、しげぞうさんの記事を読み、こんな方法があったんだぁ~・・・と思い、驚きと感動の日々です。今後もよろしくお願いします。

  7. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。フォントを使いたいサイトは自分のWordPressのサイトです。FTPで自分のドメインを選択して、「wp-content」⇒「themes」⇒「child(子テーマ)」と進み、フォルダを追加してみてください。また何か分からない事があれば遠慮なくコメント下さい。

  8. 乃風

    いつもお世話になっております。

    「fontsフォルダをアップロード」という上記の記事の中で、{ロリポップのユーザー専用ページから「WEBツール」⇒「ロリポップFTP」と進み、『フォントを使いたいサイト』を選択し、「wp-content」⇒「themes」⇒「child(子テーマ)」と進みます。}と書いてあったのですが、『フォントを使いたいサイト』ってなんのことでしょうか?

    私の場合だと、その画面での選択肢は2つで、「自分のURL」か、「welcome.html」しかなかったのですが、「自分のURL」の方の選択でよかったのでしょうか?

  9. しげぞう 投稿作成者

    >青りんご様

    コメントありがとうございます。そうですね。その4点ができればOKと思います。結構難しい部分で、複雑な部分もありますので、また分からない時にはいつでもコメント下さい。青りんごさんが眠れなくならないように?対応しますね(笑)。

  10. 青りんご

    ドキドメ!の目次の一番最初から、ずっと順番に進んできております。twentytwelveカスタマイズの「?スマートフォンページのフッターに固定メニューを作成してみました」に辿り着いて、あ!これやってみたい~となったのですが、そこからこのページに来たのです。

    ・アイコン画像をWebフォントに変更して高速化
    ・ページの先頭に戻るボタンを自作してみた
    ・自作のJavaScriptをWordPressで利用する方法
    ・WordPressの条件分岐でスマートフォンとタブレットを分ける方法

    上記4点をまずやっておく、とのお教えでして、何から手をつけてよいのやら、とりあえず一番上からやってみよう←いまここ
    また、ぐるぐるトンネルのイヤぁ~な予感がしております。。。苦笑

  11. しげぞう 投稿作成者

    >青りんご様

    こんにちは!もうこんな記事まで進んでいるのですね!えっと、アイコンは記事中とか好きな場所で使えますが、私の場合は「ソーシャルボタンのアイコン」と「スマートフォンページのフッターメニュー」などに使っています。詳しくはこの記事で書いてますのでもし、自作のSNSボタンやフッターメニューを作成する場合に使えますよ。
    ソーシャルボタンを自作してWordPressの高速化
    スマートフォンページのフッターに固定メニューを作成してみました

  12. 青りんご

    こんにちは、ご無沙汰しております笑
    本日、ここまでたどり着きました!
    が、記事内の、「アイコンを表示させたい部分にこのように記述します。」のコードをどこに記述するのかわからなくなってしまいました。ご教示をお願いします。。

  13. poko 投稿作成者

    >gouhou.black様

    わざわざありがとうございます。文字列変更されているんですね。無事に設置できてよかったです。今後ともどうぞよろしくお願い致します。

  14. gouhou.black

    どうも!合法BLACKです。参考にさせていただきました。

    IcoMoon では現在
    googleplus は
    google-plus に
    対象の文字列は変化していました。

    変わっていましたが、変更後にはちゃんと設置できましたよー
    レクチャー本当にありがとうーー!