マーベリック流ブログ運営ノウハウ

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

このエントリーをはてなブックマークに追加
level003
font awesome
bnr_松山式#1

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

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

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

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

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

icon finder

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

 ICONFINDERなどを利用すれば、無料のアイコンを簡単に探し出すことができます。

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

 『Font Awesome』 

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

font awesome

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

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

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

    

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

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

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-arrow-right)という名前のアイコンを使用すると以下のような形になります。

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

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

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

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

  マーベリックWEBメディア部 プレミア部員という感じになります。

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

このエントリーをはてなブックマークに追加

人生の向かう先が見えず悶々とした日々から抜け出したくて、転職を決意したぼく。主将宮本。勤務先はなんとマレーシアだった。。。ぼくは愛する妻と生まれたばかりの子供を日本に残し、単身マレーシアへいくことを決断した。

マレーシアに来て、WEBメディアに関わるようになり、日本よりも物価が低い国での暮らしも知り、アジア各国を回って経済を知り・・・投資を知り、騙されたりもして、辿り着いた先。

ぼくは『マーベリックWEBメディア部』を創り活動を始めた。ぼくが知り得るWEBメディア運営の情報を、メルマガという形で部員全員に共有させていただき、部員全員で「好きを仕事に」を目指していくWEB上の部活動だ!

どんなビジネスをするにしろ、これからはWEBメディアの運営が不可欠。期間限定で無料登録公開中。

マーベリックWEBメディア部 部員登録(メルマガ登録)

お名前(姓)*
お名前(名)
メールアドレス*
follow us in feedly

このカテゴリーの関連記事
マーベリック流ブログ運営ノウハウ
backwpup-pro

BackWPup Pro でGoogleドライブにWordPressを完全バックアップ設定してみた

後悔先に立たず・・・ 今まで32年間生きてきて、この言葉を思い出してしまった理由No1は、ぼくの中では完全に「バックアップして

マーベリック流ブログ運営ノウハウ
backwpup

BackWPupでWordPressのバックアップを取ろう!

ブログの記事は、ひとつひとつが資産!バックアップの重要性は言うまでもありません。今日は、Wordpress(ワードプレス)サイ

マーベリック流ブログ運営ノウハウ
wordpress canonical URL all in one seo pack

WordPressでAll in One SEO Packを使っているなら、canonical URLs をオフにせよ!

お疲れ様です。WordPress(ワードプレス)の有名なプラグイン『All in One SEO Pack』って使ってますか?

マーベリック流ブログ運営ノウハウ
pubsubhubbub.png

PubSubHubbubを今すぐ入れて!インデックスはとっくにリアルタイムの時代。

実は、ほぼリアルタイムにインデックスされる日はとっくにやってきていたようです。 インデックスされるというのは、要はgoogle



Leave a Reply

*