ウェブコーディング

プラグイン不要!2ステップで完了!「FontAwesome」をWordPressに導入してアイコンを使えるようにする方法

ブログのカスタマイズをするとき、必要なアイコンをいちいち画像化して、フォルダにアップロードするのは手間ですね。

そんなときは「Font Awesome」というアイコンを文字(フォント)として利用できるサービスを導入すると便利です。

例えば、箇条書き(リスト)の頭出しに「」を利用するということもできます。

2016-11-29_21h00_49_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

導入の手順:2ステップでサクッと導入

  • 「Font Awesome」からウェブフォントの埋め込みコードを取得
  • 埋め込みコードを子テーマの「functions.php」にコピペ

手順はこの2つだけです。

子テーマを利用していない方はこの機会に作っておくことをオススメします。

CSSなどのカスタマイズも簡単になりますし、テーマのバージョンアップをしてもカスタマイズした箇所は引き継がれるようになるので。

では順番にすすめていきます。

「Font Awesome」の埋め込みコードを取得する

まずはFontAwesomeのホームにアクセスしましょう。

⇒ http://fontawesome.io/

WordPressに導入するためのコードを取得するには「Get Started」に進みます。

2016-11-30_10h07_461_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

メールアドレスを登録すると、自分専用の埋め込みコードがメールで送信されます。

2016-11-26_09h32_17_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

受け取ったメールはこんな感じです。

2016-11-29_21h06_41_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

ここに書かれているコードをサイトのhead内で読み込むと、Font Awesomeのアイコンが使えるようになります。

このメール画面を開いたまま次のステップにいきます。

子テーマの「functions.php」にコードを読み込む設定を追加する

今回はheadタグ内にスクリプトを埋め込むので、WordPressで共通に使われている「wp_head()」という関数に関連付けて読み込むことにします。

なんだか難しく感じるかもしれませんが、やることは「functions.php」を開いて、このコード↓をコピーペーストするだけです。

メール記載のコードを入れると、こんな風になります。

「functions.php」を保存して、WordPressのサーバーにアップロードすると「FontAwesome」のアイコンが使えるようになります。

2016-12-03_11h23_34_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

これでいつでもアイコンを呼び出せるようになりました。

「Font Awesome」の使い方

2016-11-30_10h07_46_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

⇒ http://fontawesome.io/

冒頭で紹介したとおり、「Font Awesome」はアイコンをフォントとして利用できるようにしてくれる無料のサービスです。

海外のサイトなので英語表記ですが「Examples」や「Icons」を開くと、使用例とアイコンの一覧を確認できます。

2016-11-30_10h07_46_2_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

  • 使いたいアイコンがあるか?
  • どんな使い方ができるのか?

はこのページ↑で確認してみてください。

記事中にアイコンを表示させる一番簡単な方法

一番簡単に使う方法は「i」タグを利用した方法です。

まず「Font Awesome」で使用したいアイコンを検索します。

2016-12-03_12h36_51_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

アイコンの詳細ページにコピペできるタグが書かれているので、コピーします。

2016-12-03_12h48_50_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

そのタグをそのまま、エディタに貼り付けます。

2016-12-03_13h05_38_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

色を変更するにはタグの中に「styles」を設定すればOKです。

普通の文字と同じように色が変わります。

このままプレビューで確認すると、アイコンが表示されます。

2016-12-03_12h59_03_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

他にもアイコンをGIFアニメーションのように動かしたりもできるので、詳しくは「Examples」を参考にしてみてください。

リストのマークを「Font Awesome」のアイコンに変更するCSS

せっかく「Font Awesome」を使えるようにしたので、冒頭に紹介したチェックリストの作り方を紹介しておこうかと思います。

まずはこの手順↓で設定をしましょう。

アイコンを使いたいリストの部分にクラスを設定

2016-12-03_12h01_46_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

子テーマのCSSにクラスを設定

CSSの疑似要素の「before」を使っています。

「before」は元の要素の前に「content」の中身を表示するものです。

今回の場合は「li」要素に「::before」をつけているので、「li」要素の前に出力されます。

この部分がウェブフォントを利用している部分です。

「content」の中身は「Font Awesome」のアイコンページで確認できます。

詳細ページの中に「Unicode:f***」という部分があるので、「f***」の部分をCSSの「content」にコピペします。

2016-12-03_12h41_36_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

コピペしたら、頭にバックスラッシュ「\」をつけます。Windowsの場合は「¥」円マークですね。

バックスラッシュがないとうまく表示されないので注意です。

このままプレビューすると冒頭のチェックリストが出来上がっているはずです。

2016-11-29_21h00_49_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

色や大きさ、余白は普段使っているCSSと同じように設定できるので、そのあたりも上手に使うときれいに表示できると思います。

まとめ

  • 「Font Awesome」から埋め込みコードを取得する
  • 子テーマの「functions.php」でコードを読み込む設定をする
  • 記事中で使用したいときは「Font Awesome」の<i>タグをコピペする
  • リストで使いたいときはCSSの「before」要素などを使って設定する

プラグインでアイコンを表示する方法もありますが、ページの表示速度を考えると今回の方法の方が有利かと思います。

CSSで使えたりもするので、汎用性が高くておすすめの方法です。

CSSをプレビューしながら編集できる機能

今回のようにWordPressのCSSカスタマイズを子テーマで行う方法は一般的なのですが、いちいち子テーマのアップロードをするのが面倒ですよね。

そこでおすすめの方法としてTCDテーマの「MAG」についている「カスタムCSS」を使った方法があります。

2016-12-03_13h19_28_fontawesome%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92wordpress%e3%81%a7%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95

プレビュー用の記事を作って、「下書き保存」と「プレビュー」で確認するという手順です。

本来の使い方とは違いますが、これが結構便利なのです。

では今回はこの辺りで。

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

関連記事

  1. ウェブコーディング

    PHPなどのプログラムコードをUTF-8で保存するときの注意点

    サーバーで実行されるPHPやJavascriptなどをテキストエディタ…

  2. ウェブコーディング

    NetBeansでSQliteのドライバーを有効にするプラグイン

    PHPなどのwebアプリケーションを作成できるNetBeansですが、…

  3. ウェブコーディング

    AdSenseのモバイル向けページ単位の広告をWordPressに設置する方法

    AdSenseにモバイル用のページ単位の広告という機能が追加されてしば…

  4. ウェブコーディング

    子テーマを使ってWordPressを自由にカスタマイズしちゃいましょう

    WordPressをカスタマイズするときに使うと便利なのが「子テーマ」…

  5. ウェブコーディング

    CSSのfloatを使ってリキッドレイアウトを組んでみた

    先日ふと思い立って、一からWEBサイトをデザインし始めることにしたので…

  6. ウェブコーディング

    WordPressでも簡単に使えるってほんと?会話風吹き出しのCSSテンプレート

    会話風吹き出しのテンプレートとして使えるCSSを作ってみました。会…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

スポンサードリンク

スポンサードリンク

カテゴリー

ピックアップ記事

関連コンテンツ

WordPressテーマ「MAG(TCD036)」   ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche  
  1. 特集

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  2. ブログやサイトの作り方

    月額100円から使える「ロリポップレンタルサーバー」
  3. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
  4. ブログやサイトの作り方

    TCDテーマ比較「CUBEY」と「BlogPress」どっちがいい?
  5. 特集

    inkscapeの使い方を集めたスキルアップのための日本語チュートリアル集
PAGE TOP