2014.12.09今回ブログで使用するアイコン画像をWebフォントに変更する事にしました。普通のアイコンを利用すると「画像」を使う事になるのですが、画像を使いすぎるとサイトの表示速度を遅くする原因の1つになります。このWebフォントっていうのはアイコンを「画像」ではなく「文字」として読み込んでくれます。文字と同じなので「font-size」とか「color」などのCSSで色や大きさを変更する事もできます。アイコン画像のように見えますが、実は「文字」という解釈なので画像を利用するよりも読み込みがスムーズになるという私なりの認識です。私がどこでこのWebフォントを利用しているのか?というとこの部分で使っています。ソーシャルボタン表示のアイコン部分に利用しています。以前はプラグインでソーシャルボタンを表示させていたのですが、ソーシャルのボタンって1つ1つがJavaScriptやボタンの画像を使うので非常に重いのです。そこでサイトの表示速度を上げる為に自作のボタンを作成しました(作成方法は別記事で解説します)。そこで必要になったのがこのアイコンなんです。普通の画像でも良かったのですが、せっかく表示速度を上げる為に作成したのでWebフォントを利用する事にしたのです。Amazonや楽天のアフィリエイトは「もしもアフィリエイト経由」がおすすめの理由Amazonや楽天のアフィリエイトは認知度も高いので初心者におすすめのアフィリエイトです。Amazonや楽天のアフィリエイトから始める方は非常に多いので...affiliate150.com2019.12.31目次Webフォント導入IcoMoonでアイコンをダウンロードしてサーバーにアップロードfontsフォルダをアップロードダウンロードしたstyle.cssをコピーするWebフォントを使ってみようWebフォント導入webフォント(アイコンフォント)導入するにあたって複数の案がでました。Awesome」というサービスで色々なアイコンフォントが利用できます。一部見せておくとこんな感じです。Awesome」で私の使い方SNSのアイコン(はてブとかLineとかPocket等)がありませんでした。結局必要なアイコンだけダウンロードして使える「IcoMoon」というサービスを利用する事にしました。この「IcoMoon」では自作したアイコンをインポートしてウェブフォントにできるのですよ。この「IcoMoon」に自作したSNSボタンをインポートするのですが、私自身「Illustrator」とかそれ系のソフトを利用した事がないので、アイコン作成する知識がありません。ネットで自作したSNSボタンを公開してくれている人がいるのですよ!ありがたい。いう訳で足りないSNSボタンをダウンロードさせて頂き、「Icomoon」でインポートしました。このサイトから使わせて頂きました。ラクFeedly、LINE、はてなブックマーク、PocketのSVGファイルをダウンロードさせて頂きました。IcoMoonでアイコンをダウンロードしてサーバーにアップロードまずはSNSで使う画像やブログで利用したいアイコンを探しに行きます。⇒IcoMoon先ほどダウンロードさせて頂いたFeedly、LINE、はてなブックマーク、PocketのSVGファイルをインポートして選択。それ以外にもアイコンの一覧がありますので使いたいアイコンをどんどん選択していきます。font」というボタンをクリックします。私の場合は「Twitter」「Googleプラス」「フェイスブック」「RSS」系のアイコンを幾つか選択しておきました。font」をクリックすると選択したアイコンの一覧が表示されますのでOKなら右下の「Download」をクリックします。するとフォルダがダウンロードされます。解凍して中身をみると色々入っていますが、必要なのは「fonts」というフォルダと「style.css」の2つです。fontsフォルダをアップロードでは「fonts」フォルダをサーバーにアップロードします。FTPソフトを使うならフォルダのままアップロードできますが、ロリポップの場合はフォルダの中身を1つ1つアップロードします。ロリポップのユーザー専用ページから「WEBツール」⇒「ロリポップFTP」と進み、フォントを使いたいサイトを選択し、「wp-content」⇒「themes」⇒「child(子テーマ)」と進みます。子テーマの中に(子テーマのCSSやphpがある場所)にフォルダを作成して「fonts」と名づけて保存します。次に今作った「fonts」というフォルダにダウンロードしてきた「fonts」フォルダの中身を1つ1つアップロードします。最終的に「fonts」フォルダの中身がこのようにまりました。ここまでできれば後少しです。ダウンロードしたstyle.cssをコピーするIcoMoonからダウンロードしたフォルダからstyle.cssを開いて中身の記述を全部コピーして子テーマのCSSに貼り付けます。ここで修正する場所があります。url()の部分を‘./fonts/icomoon~のようにfontsの前に【./】を追加します。5箇所くらいあると思います。format('svg');}これで準備はOKです。Webフォントを使ってみようそれぞれのアイコンには名前が付いています。「Google+」のアイコンの名前は「googleplus」となっています。アイコンを表示させたい部分にこのように記述します。class="icon-googleplus"></span>という記述をすると「」となります。「icon-名前」という使い方です。font」をクリックすると前回までに選んだアイコンの名前が表示されます。ダウンロードしたフォルダの「demo.html」でも確認できます。style="color:#4dccf5"></span>というように1つ1つ違うスタイルを変更する事もできます。ちなみにこのアイコンを私は下記の「ソーシャルボタン」と「スマートフォンのフッターメニュー」で使ってます。WordPress高速化シェアするTwitter0Facebook0はてブ2Pocket17LINEコピーサイトのアクセスアップや稼ぐためにおすすめの無料レポート個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。PMしげぞう様ご回答ありがとうございました。しげぞう様の回答を見ていて、色々調べていたところ私が使っていたSafariがダメだったみたいです。してかは分からないですが、、FirefoxでロリポップにログインしSafari同様にアップロードしてみたところアップロードが出来ました。ただの私の知識不足ですね。本当にありがとうございました。AMしおから様コメントありがとうございます。icomoon.eotファイルを開く必要はありません。「fontsフォルダ」を解凍するだけでOKです。解凍したらeot、svg、ttf、woffなどのファイルがありますので、これらを作成したFontsフォルダにアップロードします。本当はダウンロードしたFontsフォルダまるごとアップロードしたい所なんですが、フォルダごとのアップロードができないので、フォルダを作成し、中身をアップロードしてる感じです。再度になりますが、中身のファイルは開く必要はありませんので解凍だけしてアップロードです。解凍だけできれば他のアプリなどをインストールする必要もありません。分からない部分があればまた再度コメント下さい。いつも参考にさせてもらっています。こちらのサイトに出会ったおかげでアフェリエイトを始めるきっかけになりました。ありがとうございます。child(子テーマ)に進み、子テーマの中にフォルダを作成してfontsと名づける所まで進めれたのですが、作ったfontsにIcoMoonからダウンロードしてきたfontsフォルダを解凍してアップロードをしようとして、色々と試しましたが出来ませんでした。他の方のコメントを見る限り、皆さんスンナリ出来ているようなので、ただ私のアップロードのやり方が違うのでしょうか?上記の記事に書いている。今作った「fonts」というフォルダにダウンロードしてきた「fonts」フォルダの中身を1つ1つアップロードします。icomoon→fonts→icomoon.eotとファイルを開く時に、対応していません。Fileというアプリをインストールしました。こちらが関係しているのかもしれません。お時間がある時で構わないです。宜しければ教えていただけないでしょうか?ご回答お待ちしています。PMしげぞう様ご回答いただきありがとうございます。テキストエディタからビジュアルエディタに切り替えるとやはり消えるのですね。AddQuicktagを使ってもビジュアルエディタでは消えてしまいました。記事中には使用せず、ソーシャルボタンに適用したかっただけなので、このままでもいけるかもしれません。この状態で次の記事に進んでみたいと思います。ご回答ありがとうございました。AMgura様コメントありがとうございます。これはあります、テキストエディタからビジュアルエディタに切り替えすると消えますね。私の場合はほとんどがテキストエディタしか使わないので問題ないのですが、時々間違ってビジュアルエディタに切り替えたりするとアイコン消えたりします。プレビューで表示されるって事はCSSなども間違っていないと思われます。ビジュアルエディタを使ってないので対策があっているか分かりませんが、AddQuicktagでアイコンのコードそのままを登録しておいて、ビジュアルエディタで使用するというのはできないかな?と思いました。エディタを切り替えるのが問題であれば切り替えしないで済む方法を試してみるのが良いかなと思います。PMしげぞう様いつもお世話になっております。何度か質問しているguraといいます。このページの設定をしたのですが、WEBフォントが表示されず困っておりコメントしました。試しに投稿のテキスト(HTML)へ「」を書いて、そのままプレビュー押すとwebフォントは一時的に表示されます。テキストからビジュアル編集画面に戻ると上の記述が消えてしまいます。」になっており、うまく表示がされません。ちなみにダウンロードしたstyle.cssには以下のように書いてあったので、これに「./」だけ5ヶ所追加してコピペしています。しげぞう様のcssと比べるとだいぶ長いのですが、これが正しいのかも良く分かりません。一応違う部分だけ消して上記のことをやりましたが、同じ結果でした。お忙しい中、大変申し訳ございません。手が空いたときで良いので、回答して頂けると嬉しいです。PMしげぞう様ご指摘ありがとうございます。」を削除し、幅を49%、余白を1%・1%にしたところ無事反映されました。本当にありがとうございます。その上の広告が表示されていないような気もしますが、ここは自分でいじってみます。アドバイスありがとうございました。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。【図解】Amazonプライム会員の友達紹介のやり方と手順。友達紹介キャンペーンは無料の会員登録でも報酬発生!Googleアドセンスの始め方。【初心者向け】WordPress(ワードプレス)でのブログの始め方と使い方まとめ!【初心者向け】CocoonでWordPressを始めるなら最低限やっておきたい設定13項目WordPressテーマ「Cocoon」を使うなら最低限入れておきたいプラグイン12選+1【図解】Cocoonのダウンロードとインストールの手順。Wing(コノハウイング)へ移転する方法と注意点まとめ【保存版】エックスサーバーのWordPress簡単移行機能の使い方と注意点まとめ【保存版】ロリポップの簡単引っ越し機能の使い方と注意点まとめ。設定方法は思っていたより簡単ですね~楽天アフィリエイトの紹介料は楽天ポイント。報酬を現金振り込みでもらう方法は2通り。博2020.02.04現在、楽天カード会員ですがゴールドカード会員に切り替えたい。【図解】楽天カードから楽天ゴールドカードに切り替えをする流れと注意点。返信ありがとうございます。シンプリシティだったんですね。質問1.試す記事は実際に投稿済みのものが良いです。下書きのものだと試せないと思います。早々にご連絡を頂きまして、ありがとうございました。スラッグの変更を試してみたのですが、うまくいきませんでした。コメントありがとうございます。サイトもサボっておりまして、すっかり情報も古くなってきてます、すみません。検索トップタイトルとURLをコピーしました。