今回ブログで使用するアイコン画像を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>
というように１つ１つ違うスタイルを変更する事もできます。ちなみにこのアイコンを私は下記の「ソーシャルボタン」と「スマートフォンのフッターメニュー」で使ってます。
しげぞう様
ご指摘ありがとうございます。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の記述を変更しスマートフォンのように各ボタンの角を丸く、隙間を開けるように記述したのが原因なんでしょうか？
原因の方は分かりますでしょうか？すいません。よろしくお願い致します。 スマホのほうでもご確認してもらえるでしょうか？。
やはり、それでよかったのですね。ありがとうございました。
余談ですが・・・。私、スマホとか、あーゆうちっちゃいのを持ってないんですね。だから、例えばアイコンをフワァ～と浮き出させる方法とかをやっても、確認が取れないので、最低限度の配慮でいいやって思っています。そもそもそういうフワァ～と表示させる技があったなんて、それを知れた時は、ちょっと感激しました。ちっちゃい画面用への最低限度の配慮として、例えば、写真は複数の場合、横並びにせずに、縦並びに１枚ずつに変更したりしました。今、毎日毎日、しげぞうさんの記事を読み、こんな方法があったんだぁ～・・・と思い、驚きと感動の日々です。今後もよろしくお願いします。
乃風様
コメントありがとうございます。フォントを使いたいサイトは自分のWordPressのサイトです。FTPで自分のドメインを選択して、「wp-content」⇒「themes」⇒「child（子テーマ）」と進み、フォルダを追加してみてください。また何か分からない事があれば遠慮なくコメント下さい。
いつもお世話になっております。
「fontsフォルダをアップロード」という上記の記事の中で、｛ロリポップのユーザー専用ページから「WEBツール」⇒「ロリポップFTP」と進み、『フォントを使いたいサイト』を選択し、「wp-content」⇒「themes」⇒「child（子テーマ）」と進みます。｝と書いてあったのですが、『フォントを使いたいサイト』ってなんのことでしょうか？
私の場合だと、その画面での選択肢は２つで、「自分のURL」か、「welcome.html」しかなかったのですが、「自分のURL」の方の選択でよかったのでしょうか？
＞青りんご様
コメントありがとうございます。そうですね。その4点ができればOKと思います。結構難しい部分で、複雑な部分もありますので、また分からない時にはいつでもコメント下さい。青りんごさんが眠れなくならないように？対応しますね（笑）。
ドキドメ！の目次の一番最初から、ずっと順番に進んできております。twentytwelveカスタマイズの「?スマートフォンページのフッターに固定メニューを作成してみました」に辿り着いて、あ！これやってみたい～となったのですが、そこからこのページに来たのです。
・アイコン画像をWebフォントに変更して高速化
・ページの先頭に戻るボタンを自作してみた
・自作のJavaScriptをWordPressで利用する方法
・WordPressの条件分岐でスマートフォンとタブレットを分ける方法
上記４点をまずやっておく、とのお教えでして、何から手をつけてよいのやら、とりあえず一番上からやってみよう←いまここ
また、ぐるぐるトンネルのイヤぁ～な予感がしております。。。苦笑
＞青りんご様
こんにちは！もうこんな記事まで進んでいるのですね！えっと、アイコンは記事中とか好きな場所で使えますが、私の場合は「ソーシャルボタンのアイコン」と「スマートフォンページのフッターメニュー」などに使っています。詳しくはこの記事で書いてますのでもし、自作のSNSボタンやフッターメニューを作成する場合に使えますよ。
⇒ソーシャルボタンを自作してWordPressの高速化
⇒スマートフォンページのフッターに固定メニューを作成してみました
こんにちは、ご無沙汰しております笑
本日、ここまでたどり着きました！
が、記事内の、「アイコンを表示させたい部分にこのように記述します。」のコードをどこに記述するのかわからなくなってしまいました。ご教示をお願いします。。
＞gouhou.black様
わざわざありがとうございます。文字列変更されているんですね。無事に設置できてよかったです。今後ともどうぞよろしくお願い致します。
どうも！合法BLACKです。参考にさせていただきました。
IcoMoon では現在
googleplus は
google-plus に
対象の文字列は変化していました。
変わっていましたが、変更後にはちゃんと設置できましたよー
レクチャー本当にありがとうーー！