ワドプラ

WordPressのDigiPressテーマ『MAGJAM』や無料・有料WordPressテーマ、WordPressプラグインを書いています。

Webアイコンフォント「Font Awesome」で記事を華やかにする方法

Webアイコンフォント「Font Awesome」で記事を華やかにする方法

以前の記事これイイ!DigiPressテーマ専用『Webフォント』で記事を多彩に装飾しよう!でDigiPressシリーズ専用のWebアイコンフォントを紹介しました。

今回は、DigiPressテーマ以外でも利用できるWebアイコンフォント「Font Awesome」を紹介します。

DigiPressテーマ専用Webフォントも良いのですが、「Font Awesome」の方が使えるアイコンの数が倍近くあり、種類も豊富です。そのため、DigiPressテーマ利用者でもオススメできます。

「Font Awesome」は設置も非常に簡単です!早速利用してみましょう。

その前にWebフォントのメリット

WebフォントはCSS3機能を使って表示されるので、画像ではなく「テキスト(文字)」だという点が大きなメリットです。そのため下記のように拡大、縮小が綺麗にできること、色も文字色と同じように簡単に付けることができます。

利用例

Apple

Instagram

「Font Awesome」導入方法

Font Awesome導入には2つの方法があります。1つは、自分のサイト上に設置する方法、もう一つはCDNサーバ上のFont Awesomeファイルを読み込む方法があります。

ここでは、CDNサーバ上のFont Awesomeファイルを読み込む方法を紹介します。なぜならこちらの方が非常に簡単に導入できるからです。

Font Awesomeリンク先

上記へアクセスしましょう。

150410 0001

上記のようなコードが記載されているので、コードをコピーしましょう。

このコピーしたコードをheader内ペーストしましょう。

DigiPressテーマの場合

150410 0002

「管理画面」⇢「DigiPress」⇢「詳細設定」⇢「HTMLヘッダー設定」⇢「<head>~</head>内のユーザー定義」内にコードをペーストして設定を保存しましょう。

たったこれだけで導入終了です。

利用方法

「Font Awesome」にアクセスして使いたいアイコンを選択しましょう。

150410 0003

画面に入りきれないほどのWebアイコンフォントがあります。ここでは「pinterest」のWebアイコンフォントを選択しました。

150410 0004

【記述例】

Webフォントの表示例の画面になります。その下のコードをコピーして、記事本文へペーストしましょう。ペーストすると下記のように簡単にWebフォントを表示することができます。

pinterest

下記のように色や大きさも変更可能です。

チェックアイコン

WordPressアイコン

【記述例】

応用編

応用として、下記のように回転、左右反転、上下反転もできます。

通常

90度回転

180度回転

左右反転

上下反転

【記述例】

この他にもアイコンフォント同士を重ねて表示もできます。

さいごに

アイコンフォントを利用することによって、記事を華やかにすることができます。

記事本文以外にも見出しや、グローバルメニューにWebアイコンフォントを利用するのも良いと思います。グローバルメニューにWebアイコンフォントを利用する場合は下記を参照下さい。

WordPressのグローバルメニューにアイコンフォントを表示する方法!

種類も豊富で使いやすいのでぜひ利用してみて下さい!

それではまた〜

この記事が気に入ったら
いいね!しよう

Twitter で

コメントはこちら

*
*
* (公開されません)

Return Top