Awesomeの使い方についての記事を書きました。『CSS(スタイルシート)で指定する』を少し書き換えました。...https://kirari-yums.net/2018/09/14/post-3228/FontAwesomeはアイコンの種類が豊富で使い方も簡単!フォントアイコンは画像ではなく文字として使えるのでとても使い勝手がよく重宝しています。FontAwesomeにはFacebookやTwitterなどのSNSなどのアイコンもあるのですが、はてなブックマーク、LINEなどがありません。私はFontAwesomeにはない『はてなブックマーク』『LINE』『Feedly』の3つが使いたくなり、『IcoMoon』のアイコンフォントを導入してみましたので今回の記事は「IcoMoonの導入方法」について書きたいと思います。最後にスポンサーリンクIcoMoon前回書いたFontAwesomeの導入方法はFontAwesomeのサーバーからアイコンフォントを呼び出して自分のサイトに表示させる方法です。今回導入したIcoMoonは、アイコンのデータを自分のサイトのサーバーに入れて、自分のサーバーから呼び出して表示させるダウンロード型のフォントアイコンです。ダウンロード型ってなんだか難しそうだね。私もそう思ってたけど意外と簡単だったよ!しかも『自分でアイコン』が作れちゃうんだよ!フォントアイコンが作れる!?私は今回しませんでしたが、SVG形式の画像を使うと自分の好きなフォントアイコンが作れます。SVG形式の画像の作り方やPNG、JPEGをSVG形式に変換する方法などを解説しているサイトはたくさんありますのでそちらを参考にしてください。...https://icomoon.io/2018/11/03/post-4400/アイコンフォントのダウンロードまずはWebアイコンフォントのデータのダウンロードをおこないます。App]をクリックします。使いたいアイコンを下の一覧から選択もしくは右上の検索フォームで検索してください。(使いたいアイコンが複数ある場合は複数選択してください。Image]をクリックして画像をアップロードしてください。(複数ある場合はひとつずつアップロードしてください。Font]をクリックしてください。選択したアイコンが一覧で表示されますので確認して、右下の[Download]をクリックしてファイル(ZIP形式)をダウンロードしてください。自分のサイトで使えるようにするダウンロードしたフォントをサイトで使えるようにします。ファイルを解凍するダウンロードしたZIPファイルを解凍してください。※解凍は解凍ツールを使用してください。解凍すると上記のフォルダとファイルが入っています。使うのは『Fonts』フォルダと『style.css』のふたつです。サーバーにアップロード『Fonts』フォルダをサーバーにアップロードします。Fontsフォルダには以下のファイルが入っています。Fontsフォルダの中身icomoon.eoticomoon.svgicomoon.ttficomoon.woffこの4つのファイルがないと使えませんのでFontsフォルダごとアップロードしてください。FTPツールを使ってファイルを以下の場所にアップロードしてください。Fontsフォルダを置く場所(WordPressの場合)[wp-content][themes]お使いのテーマフォルダFontsフォルダをお使いのテーマフォルダの中(style.cssと同じ場所)に入れてください。子テーマをお使いの方は子テーマフォルダの中に入れてください。CSSを追加する次にCSSの追加をします。注意WordPressのstyle.cssに追加しますので、ファイルのバックアップを撮ることをオススメします万が一のためファイル編集前にファイルのバックアップをとってください。【WordPress】バックアップをとるにはどうすればいい!?解凍したファイルの中のstyle.cssを開き、中に書かれているCSSをすべてコピーしてください。WordPressの管理画面にいき、[外観][テーマの編集]style.cssを開いて、コピーしたCSSを貼り付けてください。(子テーマをお使いの方は子テーマのstyle.cssに貼り付けてください)style.cssを編集するのが不安な方は[外観][カスタマイズ][追加CSS]に追加してもOKです。貼り付けたら[保存]してください。あとはちゃんと表示されるか試してみないとね。スポンサーリンクIcoMoonのアイコンフォントを使ってみよう!実際に表示されるかを確認する為にも実際使ってみましょう。IcoMoonのフォントはクラス名で呼び出します。*/』下にアイコンのクラス名が書かれていますが、分かりづらいので、アイコンのコードはIcoMoonで確認(コピー)した方がいいと思います。App]へ移動します。Font]をクリック。Code』と表示されるのでクリックしてください。上記の部分をコピーして記事に貼り付けてください。プレビューで表示されていればOKです。色や大きさの変更もできるIcoMoonのアイコンフォントもCSSを使えば色や大きさを帰ることができます。注意はてなブックマーク、LINE、FeedlyなどのブランドロゴはCSSですでにブランドカラーが設定されています。色を変更するにはCSSを変更(削除)する必要があります。自分で色を指定する場合は、ここを変更するか削除してください。ブランドカラーがすでに設定されているんだね!結耶そうそう。各色にRGB値を追加、YouTube、Dropboxを追加しました。...https://kirari-yums.net/2018/11/01/【備忘録】よく使うsnsなど...表示されないとき表示されない場合は、ブラウザのキャッシュを削除してみてください。キャッシュが残っていると設定ができていても表示されないことがあります。最後にIcoMoonは使いたいアイコンだけをダウンロードできるので大変便利です。SVG形式のアイコンフォントは拡大しても綺麗に表示されます。導入も意外と簡単なのでぜひ導入してみてください。スポンサーリンク応援よろしくお願いします。結耶(ゆうや)2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!多発性硬化症(MS)という難病と闘っています。Consoleに登録しよう!前回の記事ではプラグインでXMLサイトマップを作る方法をご紹介しました。『ページ単位での設定』を書き忘れていたので追記しました。...GoogleフォントなどのWebフォントを使ってみよう!通常使用するフォントはパソコンやスマホにインストールされたものが使われます。...いまさらだけどRSSってなに!?ブログをはじめて1年あまり。コメントをキャンセルメールアドレスが公開されることはありません。メールアドレスは任意です。メールアドレスを入力すると返信があったことをお知らせする通知がメールで届きます。コメント名前メールアドレスウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。プロフィールこんにちは。2017年9月からブログとアフィリエイトをはじめました。多発性硬化症という難病と闘いながら、ブログやアフィリエイトの勉強をしています。初心者ですが、ブログ(WordPress)やアフィリエイトについて書いています。★応援お願いします★こちらもよろしくお願いします。...【WordPress】カテゴリーウィジェットのデザインをカスタマイズしてみた!WordPressのカテゴリーウィジェットってシンプルですよね。8メールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。yuu_ms715★フォローお願いします。ブログとTwitterを連携して更新情報をツイートしています。よかったらフォローお願いします。