THOR」へ変更しました。ワードプレスカスタマイズオウンドメディアここあです。ブログのデザインを良くする手段の1つとして誰でも簡単にできるのが「Webアイコンフォント」を使用する方法です。「Webアイコンフォント」はブログの記事内にワンポイントとしてアイコンを加えるだけでかなりサイトの印象を変えることができます。Awesome(フォントオーサム)」という非常に便利なサービスがありますので導入の仕方から使い方までやさしく解説していきます。アイコンフォントはアイコン表示だけでなくアニメーションを付けることもできるので訪問者へのアイキャッチとしても効果的です。Awesomeとは...あなたのWebサイトやブログなどでWebアイコンフォントを表示させられるサービスです。このサービスは誰でも簡単に無料で利用することができます。5」公式サイト「旧バージョン4.7.0」公式サイトWebアイコンフォントとは?Webサイト上で文字と同じように表示できるアイコンです。画像の場合だと、拡大したらぼやけたり画像を貼り込むことでデータが重たくなったりしますがWebアイコンフォントを使えば...拡大してもぼやけないデータが軽い色もサイズも簡単に変えられるなどのメリットがあります。AwesomeのWebアイコンフォントを使用して表示させています。5がリリースされています。5には...種類が豊富な“PROプラン”も登場。$60かかりますが、月額使用制ではないので長く使いたい場合は投資するだけの価値はあります。個人で使う場合は無料プランで十分。旧バージョンの4.7.0もこれまで通り使えますのでお好みに合わせて使い分けることが可能です。Awesomeを使うためには下準備が必要です。自分のサーバーにデータをダウンロードして使う方法の2通りがあります。今回は、私がおすすめするCDNを使って表示させる方法だけに絞り設定の仕方を説明していきます。予備知識:そもそも「CDNってなんぞや?」って思う人もいるかもしれません。CDNとは「コンテンツ・デリバリー・ネットワーク」の略で単純にいうと「ダウンロード配信技術」。Awesomeのサーバーにあるデータを読み込んであなたのWebサイトに表示させる手段ということになります。CDN=データを専用サーバーから読み込んで表示させる方法ということだけ覚えておいてもらえればOKです。Awesomeの新しいアイコンが追加された時に自分のサーバーにダウンロードし直す手間が要らない。Awesomeの専用サーバーから読み込むため自分のサーバーへの負荷も減らせる。コードを調べて書くだけなので楽。予備知識:CDNのデメリットとしては、専用サーバーからデータを読み込むのでロード時間がかかり、若干表示速度が落ちます。極端に表示速度が落ちる訳ではないので、気にするほどではありませんがCDNを使う場合のデメリットとして一応覚えておいてくださいね。CDNで読み込むための以下のコードをコピーします。rel="stylesheet">旧バージョンを使う場合は、こちらのコードをコピーしてください。Awesomeの使用手順(2)コードをテーマヘッダーに貼り付ける上記、コピーしたコードを子テーマのテーマヘッダー(header.php)にコピーします。テーマの編集をクリックしテーマファイルの中のテーマヘッダーを選択します。テーマヘッダーを開いたら〈head〉〜〈/head〉の間にコードをコピーして設定を保存します。Awesomeを使うための下準備は完了です。コードのコピーは必ず「子テーマ」で編集してください。「親テーマ」にコードを入れてしまうとテーマのアップデート時に、設定が上書きされ全て消えてしまうリスクがあります。テーマの編集は必ず「子テーマ」で行うようにしてください。※</head>の直前に貼ると、SNSシェアアイコンの表示が消える可能性がありますのでSNSシェアアイコンの表示が消えない適度な上部に貼り付けてください。子テーマのテーマヘッダーが見つからないという場合は...テーマヘッダーを表示させる方法をこちらの記事に記載していますので参考にしてください。Awesomeの基本的な使い方コードがコピーできて、下準備が完了すればWebアイコンフォントを表示させるのは非常に簡単。順番に基本的な使い方を解説していきますね。Awesomeの公式サイトにアクセスしてあなたが使いたいWebアイコンフォントを探します。5の方で説明致します。公式サイトに移動したら...トップページにIconsという表示があるのでクリックします。Iconsをクリックするとアイコン一覧が表示されます。表示されているアイコンはPROプランのアイコンも全て含まれています。左にあるFreeの文字をクリックして無料で使えるアイコンのみを表示させます。Freeで使えるアイコン一覧が表示できたら一覧表示の中から使いたいアイコンを選びます。今回はサンプルとして以下のアイコンを選びました。STEP2:Webアイコンフォントのコードをコピーする使いたいアイコンを選んだら使いたいアイコンをクリックしてアイコンコードの画面を表示させます。fa-angellist”></i>の部分をコピーします。fa-angellist”></i>のWebアイコンフォントをあなたが挿入したい場所にペーストして貼り付けます。※アイコンコードのコピーは必ず「テキスト」編集モードで貼り付けてください。※アイコンコードは<p>〜</p>の間に入れてください。fa-angellist”>&nbsp;</i></p>このように間に&nbsp;を入れてください。アイコンが消える可能性があります。◎原因がよく分かりませんが、上手くいかない時は試してみてください。AwesomeのWebアイコンは大きさを変えるのも簡単です。CSSで“class”指定すると自由自在にアイコンサイズの変更ができるようになります。あなたの好きな名前(今回はbigx2)をclass名に追加してCSSでサイズ指定をします。2em}ブラウザ表示アイコンフォントを2倍にする※emとは1文字分という単位のことなので2emなら2倍、3emなら3倍とサイズ指定も分かりやすいです。STEP5:アイコンの色を変えたい時は...色を変える時も、先ほどのサイズ指定同様CSSで指定すると簡単にできます。あなたの好きな名前(今回はmy-orange)をclass名に追加してCSSでサイズ指定をします。#ffb36b;}ブラウザ表示アイコンフォントをオレンジ色にしてみるアイコンがオレンジ色に変わりました^^STEP6:アイコンと文字の間を空けたい時は...Webフォントアイコンと文字の間を空けたい時は単純にコードを入力する際にスペースを入れれば空けることができます。アイコンフォントかわいい</p>ブラウザ表示アイコンフォントかわいいさらにもっとこだわりたい場合はCSSで指定をします。あなたの好きな名前(今回はmy-space)をclass名に追加してCSSでスペースの距離を調整します。0.5em;}ブラウザ表示アイコンフォントかわいい※半角スペースを空けたい時は0.5em、全角スペース(1文字分)空けたい時は1emなど、お好みで調整してみてください。Awesomeの使い方が分かるといろいろと応用させることができます。AwesomeのWebアイコンフォントをCSSの疑似要素と組み合わせると、こんなこともできます。これはapple社の製品です。やり方はそれほど難しくはありません。以下の方法で表示させることができます。class="apple">apple</span>社の製品です。}ブラウザ表示これはapple社の製品です。Awesomeのアイコンを表示させてねというやり方。'\f179';でアイコンの種類を指定します。今回はappleのマーク赤枠のコード\f179をコピーして使用しています。※\(バックスラッシュ)を忘れないよう記述してください。Awesomeの種類は大きく分けて4つに分類されます。Brands";としてください。なっているWebフォントアイコンです。fa-apple”></i>とコードの接頭辞にfabが付いています。ここで、このWebアイコンフォントはブランド系と判別することができます。Awesomeを使う見出しにWebアイコンフォントを使う時は以下の書き方を応用してください。HTML<h3>これは記事の見出しです。#f89174;}※見出しにWebアイコンフォントを使用する場合は、hタグの前に必ずentry-contentを付けてください。entry-contentを付けないと...記事以外の全てのhタグに反映されてしまいます。その他、見出しのデザイン例はこちらの記事にまとめています。【コピペだけ!】STORK(ストーク)の見出しをオシャレにカスタマイズ!リスト表示にWebアイコンフォントを使うWebアイコンフォントはリスト表示にも使えます。実際に私も使用しています。リスト表示サンプルAリスト表示サンプルBリスト表示サンプルC詳しいやり方は、以下の記事で紹介しています。AwesomeのWebアイコンフォントは様々なアニメーションを付けることもできます。私が使っているこのアイコンもアニメーション機能を使って表示させています。Awesome同様、CDNとして読み込むための以下のコードをテーマヘッダー(header.php)にコピーします。/>アニメーションの動きの付け方アニメーションを付ける場合は以下のようにコードを書いてください。fa-appleというのでapple社のアイコンのマークを表示させます。animatedというのを足してみます。飛び跳ねるリンゴの出来上がり!かわいい動きが付きましたね。これなら訪問者の目を引いてくれそうです^^先に紹介したやり方を組み合わせると、色や大きさも変えられるしアニメーションの動きを変えることもできます。Animation公式サイトからコピーしていろいろと試してみてくださいね。Animation公式サイトの主に一番左側の列で、動きのあるアニメーションを表示させることができます。Animationは常時動かすだけでなくアイコンの上にマウスを合わせた時にアイコンが動くようにも設定できます。やり方はとても簡単!先ほど書いたコードのanimatedをanimated-hoverに変えるだけ。animated"></i>←リンゴにカーソルを乗せて!</p>例えば、上記例の...animatedの部分をanimated-hoverに変更してみます。←リンゴにカーソルを乗せて!リンゴアイコンの上にマウスを持ってきた時だけ動くようになりました^^アイコンhover時のアニメーションはどの動きでも可能です。全てのコードにおいて違いはanimatedか、animated-hoverかだけです。右にある親要素へのHover時のみアイコンを動かす方向もありますが、ここでは説明は省かせていただきます。5を使用する際CSSで指定しても「あれ?表示されない」という時があるかもしれません。5を読み込む場合CSSの指定の仕方が旧バージョンと若干変わっています。