1ランクUP!WordPressにFont Awesomeを入れて、アイコンを自由自在に使いこなす!!

font awesome

人間の行動って、本当にちょっとしたことで変わってきます。それはWEBの場合も同じ・・・。

例えばクリックしてもらいたいリンクが記事の本文中にあったとして、それが視覚的に目につくかどうか?というのは、クリック率に大きく影響を与えます。

記事自体の内容ももちろん重要ですが、視覚的に表現してあげるということも重要なんですよね。

そんな時に、効果的に使用したいのがアイコン!少し加えるだけで、グラフィカルになり彩りを与えることができます。

WEBフォントを使う『Font Awesomeがオススメ!』

icon finder

最も一般的なアイコンを挿入法としては、アイコンの画像を手に入れて、それをWEBサイトや記事内に貼りこむ形です。

[icon name=icon-external-link]ICONFINDERなどを利用すれば、無料のアイコンを簡単に探し出すことができます。

けどもっと簡単でスマートな方法があります。それが・・・

[icon name=icon-gift]『Font Awesome』[icon name=icon-gift]

『Font Awesome』を使えば、以下のようなアイコンが簡単に使えるようになります。

font awesome

・・・どうですか?ものすごくたくさんありますよね!!これが簡単に使えるようになるんです。

さらにもう一つのポイントとしては、『Font Awesome』はWEBフォントを活用するということ。[icon name=icon-fire]このアイコンたちは、画像ではなく、フォントなんですね。

フォントであることの利点といえば、つまりこういうことです。

[icon name=icon-camera] [icon name=icon-camera] 

画像ではないため、大きさによって荒くなったりしないんです。ブログ記事の中だけで使用するのであれば、それほど関係がないかもしれませんが、サイト製作などをやっているとなかなか便利なんですよね。

うんちくはこれぐらいにして、早速、使い方を見ていきましょう。

Font Awesome Icons プラグインをインストール

WordPressでFont Awesomeを使うには、プラグインを活用する方法が一番簡単です。『Font Awesome Icons』という名前でプラグインが無料で提供されていますので、早速インストールしましょう。

font awesome wordpress

WordPressの管理画面、プラグインの項目から『新規追加』をクリックします。

font awesome wordpress

『font awesome』を検索

font awesome wordpress

『いますぐインストール』をクリック!!

font awesome wordpress

『プラグインを有効化』をクリック。

Font Awesome Icons の使い方

Font Awesomeを使ってアイコンを挿入する方法は、大きくわけて2つあります。

  • CSSのクラスで指定する方法
  • ショートコードを利用する方法

CSSのクラスで指定する方法に関しては、例えばリストの表示の場合、

<ul>
 <li class=”アイコンの名前”>リスト01</li>
 <li class=”アイコンの名前”>リスト02</li>
 <li class=”アイコンの名前”>リスト03</li>
</ul>

*<>を全角で書いてますので、そのままコピペはしないで下さい。

[icon name=icon-arrow-right](名前: icon-arrow-right)という名前のアイコンを使用すると以下のような形になります。

  • リスト01
  • リスト02
  • リスト03

またショートコードを使用することも出来ます。ショートコードとは、[](半角のかぎかっこでアイコンの名前を囲む形になります。

例:[icon name=ここにアイコンの名前]

このショートコードを、アイコンを入れたい場所に記入するわけですね。例えば、URLの前に矢印を貼ってみたりすると・・・

[icon name=icon-external-link] マーベリックWEBメディア部 プレミア部員という感じになります。

アイコンを上手に活用するだけで、ワンランクもツーランクも上のWEBメディアにすることができますので、ぜひ活用してみてくださいね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA