今回ブログで使用するアイコン画像を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箇所くらいあると思います。
@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>
というように１つ１つ違うスタイルを変更する事もできます。ちなみにこのアイコンを私は下記の「ソーシャルボタン」と「スマートフォンのフッターメニュー」で使ってます。
コメント
しげぞう様
ご回答ありがとうございました。しげぞう様の回答を見ていて、色々調べていたところ私が使っていた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でアイコンのコードそのままを登録しておいて、ビジュアルエディタで使用するというのはできないかな？と思いました。エディタを切り替えるのが問題であれば切り替えしないで済む方法を試してみるのが良いかなと思います。
しげぞう様
いつもお世話になっております。何度か質問しているguraといいます。このページの設定をしたのですが、WEBフォントが表示されず困っておりコメントしました。
試しに投稿のテキスト（HTML）へ「」を書いて、そのままプレビュー押すとwebフォントは一時的に表示されます。しかし、テキストからビジュアル編集画面に戻ると上の記述が消えてしまいます。もう一度テキスト画面へ戻ると「 」になっており、うまく表示がされません。
ちなみにダウンロードしたstyle.cssには以下のように書いてあったので、これに「./」だけ5ヶ所追加してコピペしています。しげぞう様のcssと比べるとだいぶ長いのですが、これが正しいのかも良く分かりません。一応違う部分だけ消して上記のことをやりましたが、同じ結果でした。
お忙しい中、大変申し訳ございません。
手が空いたときで良いので、回答して頂けると嬉しいです。
しげぞう様
ご指摘ありがとうございます。CSSの余分な「 } 」を削除し、幅を49％、余白を1%・1%にしたところ無事反映されました。本当にありがとうございます。その上の広告が表示されていないような気もしますが、ここは自分でいじってみます。
アドバイスありがとうございました。そしていろいろと勉強になりました。(^-^)
kita様
返信ありがとうございます。「single.php」は関係はないですね。今確認したのですが、私の方からスマートフォンで確認したらきちんと揃っていましたので、再度確認してもらないでしょうか？また、念のため複数の記事で確認する事をおすすめします。
それから2列になるように記述したという事ですが、スタイルシートの「/* スマートフォンSNSボタン */」という部分の直前に「 } 」が１つ多く記述されているようですので、これを削除してみて下さい。
また、幅は50%では2列にはなりません。というのも、それぞれのボタンに少し余白があるからです。なので、ここは50%ではなく、48%くらいの幅にしてみると良いと思います。
しげぞう様
ご返答ありがとうございます。
ご教授頂いた箇所の修正をしましたら、今度はそれぞれ高さがバラバラになってしまいました。
また、2列になるように記述しても4列のままです。記事下広告の下に設置するためcontent.phpではなくsingle.phpに記述しているのが影響しているのでしょうか？
またになりますがよろしくお願い致します。
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かと思います。一度試して再度報告して頂けると助かります。
本当に何度もすいません。_(_^_)_
確かこちらに質問させていただいた件については自己解決致しました。読み間違い？勘違い？が原因でした。申し訳ありません。
また、ちょっとした質問なんですがソーシャルボタンを設置し、CSSにスマートフォンのコードを記述したんですがスマートフォンのみ反映されません…。PCのほうでは反映されるんですが。
PCでは横4・縦2で、スマートフォンでは横2・縦4で記述してます。しかし、スマートフォンではPCと同様に横4・縦2になり「Facebook」が長く列が崩れます…。ちょっとPCの記述を変更しスマートフォンのように各ボタンの角を丸く、隙間を開けるように記述したのが原因なんでしょうか？
原因の方は分かりますでしょうか？すいません。よろしくお願い致します。 スマホのほうでもご確認してもらえるでしょうか？。
＞青りんご様
コメントありがとうございます。そうですね。その4点ができればOKと思います。結構難しい部分で、複雑な部分もありますので、また分からない時にはいつでもコメント下さい。青りんごさんが眠れなくならないように？対応しますね（笑）。
ドキドメ！の目次の一番最初から、ずっと順番に進んできております。twentytwelveカスタマイズの「?スマートフォンページのフッターに固定メニューを作成してみました」に辿り着いて、あ！これやってみたい～となったのですが、そこからこのページに来たのです。
・アイコン画像をWebフォントに変更して高速化
・ページの先頭に戻るボタンを自作してみた
・自作のJavaScriptをWordPressで利用する方法
・WordPressの条件分岐でスマートフォンとタブレットを分ける方法
上記４点をまずやっておく、とのお教えでして、何から手をつけてよいのやら、とりあえず一番上からやってみよう←いまここ
また、ぐるぐるトンネルのイヤぁ～な予感がしております。。。苦笑
＞青りんご様
こんにちは！もうこんな記事まで進んでいるのですね！えっと、アイコンは記事中とか好きな場所で使えますが、私の場合は「ソーシャルボタンのアイコン」と「スマートフォンページのフッターメニュー」などに使っています。詳しくはこの記事で書いてますのでもし、自作のSNSボタンやフッターメニューを作成する場合に使えますよ。
⇒ソーシャルボタンを自作してWordPressの高速化
⇒スマートフォンページのフッターに固定メニューを作成してみました
こんにちは、ご無沙汰しております笑
本日、ここまでたどり着きました！
が、記事内の、「アイコンを表示させたい部分にこのように記述します。」のコードをどこに記述するのかわからなくなってしまいました。ご教示をお願いします。。
＞gouhou.black様
わざわざありがとうございます。文字列変更されているんですね。無事に設置できてよかったです。今後ともどうぞよろしくお願い致します。
どうも！合法BLACKです。参考にさせていただきました。
IcoMoon では現在
googleplus は
google-plus に
対象の文字列は変化していました。
変わっていましたが、変更後にはちゃんと設置できましたよー
レクチャー本当にありがとうーー！