スポンサーリンク

スポンサーリンク

ブログ 便利なプラグイン

【WordPress】Font Awesome(アイコンフォント)が使えるようになるプラグイン

2018年8月9日

 
前々回、前回とアイコンフォント『Font Awesome』についての記事を書きました。

 
これはプラグインを使わずにFont Awesomeを使うことができる方方法です。
私がこの方法を使う前は『プラグイン』を使っていました。

プラグインを使う方法も簡単にできますのでご紹介したいと思います。

 

 
 

プラグイン 『Better Font Awesome』

Better Font Awesome』は、 などのアイコンフォントが使うことができるようになるプラグインです。

 

Better Font Awesomeのインストール

WordPressの管理画面から[プラグイン]⇒[新規追加]⇒『Better Font Awesome』を検索

[今すぐインストール]して有効化してください。

 

設定

 
[設定]⇒[Better Font Awesome]で上のような設定画面が出ますが、特に設定は必要ありません。
なので説明は省きます。

 

使い方

記事投稿画面上部に[Insert Icon]というボタンが追加されているのでそこをクリック。
ビジュアルエディタ・テキストエディタどちらでもOK

するとこんなボックスが表示されるので、使いたいアイコンを選択(クリック)すれば記事内にショートコードが挿入されます。
CSSで大きさや色も変えられます。

きらり
簡単だね!なのになんでプラグインを使わない方法にわざわざしたの!?
結耶
記事に挿入するだけならこれでいいんだけどね。

 

スポンサーリンク

 
 

プラグインのメリット/デメリット

Better Font Awesomeは設定は特に必要ないのでプラグインをインストールするだけで使えます。また記事投稿画面からアイコンを探して挿入することができます。
ですが、プラグインなのでWordPressでしか使えません。

一方、前々回、前回で私が導入した方法は、Font Awesomeのサーバーから読み込んで表示させる方法です。
使うための準備としては、HEAD間に表示させるためのコードを挿入させる必要があります。
それにアイコンを記事に挿入するために、Font Awesomeのアイコン一覧から使いたいアイコンを探してアイコンコードをコピーしてこなくてはなりません。
ちょっと面倒くさいですが、この方法ならWordPress以外のブログでも使うことができます。
(私はWebフォントとして使う方法を選びましたが、他の方法もあるようです。)

きらり
だからなんでちょっと面倒くさいほうにしたの~?

 
それは…CSSでアイコンフォントが指定できるから!
私はリスト(ul、li)で黒ポチの代わりにアイコンフォントを使いたかったのです。
ul、liを使わなくてもリスト風にはできるので「そんなのする必要ない」という人もいるかもしれませんが、私はやりたかったのです!w
それにCSSで指定できれば他にも使い方の幅が広がりそうです♪

でもプラグインのショートコードではCSSに組み込むことはできません。

 
 

最後に

記事の書き方は人それぞれです。
プラグインも私が導入した読み込む方法もどちらもCSSを使ってのサイズや色の変更はできます。

どの方法を使うかはご自分にあった方法を使ってみてください。

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
Blog People ⇒ Blog People

お問い合わせはこちら Contact

 

 

おすすめ

おすすめ

-ブログ, 便利なプラグイン
-,

Scroll Up

Copyright© きらり☆彡 , 2018 All Rights Reserved Powered by STINGER.