agp1

AGP Font Awesome Collectionプラグインで記事中にアイコンフォントを簡単に

2015/10/04[公開] 2016/01/01[最終更新]

 WordPressのブログ記事本文中にアイコンフォントを使いたくて、簡単に利用できるプラグインはないかと使ってみたプラグイン「AGP Font Awesome Collection」の紹介です。ここのブログではないですが、Windows系の記事を書いていると、スタートボタンやWindows10予約アイコンなどの説明をする時に このアイコンフォントを使いたかったのです。よく漢字の田んぼを利用して「田」マークをクリックして〜とか説明することが多いアレです。WordPressならではプラグインで簡単に利用することができました。

プラグインAGP Font Awesome Collection

 現行のWP4.3.1と互換性があって、4000+の有効化数となかなかの人気があるプラグインのようです。アイコンフォントは、現行のFont Awesome 4.4.0を使うことができます。詳細はプラグイン公式ページをご覧ください。

AGP Font Awesome Collection

インストールと有効化

 管理画面のプラグイン新規追加で「AGP Font Awesome Collection」で検索してインスト−ル、有効化。いつもの手順です。

基本操作

 アイコンフォントを記事中に入れるのは簡単です。プラグインが有効になっていると、ビジュアルモードにFAボタンが増えているので、クリックしてSimple iconの中から好きなアイコンを選ぶだけです。フォントカラーやフォントサイズもオプションで選べます。

ビジュアルモードで「FA」ボタンをクリック
ビジュアルモードで「FA」ボタンをクリック
ElementからSimple Iconを選択
ElementsからSimple Iconを選択
iconのプルダウンメニューから好きなアイコンを選びます。
iconのプルダウンメニューから好きなアイコンを選びます。
オプションでカラーやサイズを選んで、Insertをクリックします。
オプションでカラーやサイズを選んで、Insertをクリックします。

ショートコードが挿入される

 記事中にこんなショートコードが挿入されました。

 実際にはこのアイコンが表示されます。

フォントサイズとカラーを変更してみました。

Font Awesomeのタグも使えます

 Font Awesomeのいろいろなタグも使えるようです。コチラを参考にアイコンを回転させてみました。

Font Awesome|Example

http://fortawesome.github.io/Font-Awesome/examples/

 ショートコードのココに追加で fa-spinをこのように追加します。

 そうすると、アイコンが回転します。インパクト大ですが、実際に利用することはあるでしょうか。

そもそも論

 Font Awesomeアイコンを有効にするためのプラグインと割り切って考えれば、テキストモードでFont Awesomeのタグをそのまま入力すればいいだけですね。上記Font Awesome公式ページの例をそのままテキストモードで入れてみました。

fa-lg fa-2x fa-3x fa-4x fa-5x





fa-ban on fa-camera

アイコン2つを重ねるのは、表示が崩れています。複雑なのは手を出すのはやめておきます。

テキスト付やボタンも

 simple icon以外にも、テキスト付きアイコンや、アイコン付きボタンも作成できます。

こんなテキスト付きアイコンや こんなアイコン付きボタンを作れます

よく使うショートコードを登録

 管理画面のダッシュボード左サイドに「 AGP Icons」が出ているので、ココからよく使うショートコードを登録しておくことが出来ます。だいたい好んで使うアイコンは絞られるので、事前に登録しておけば簡単に呼び出せます。

スライダーやウィジェットも

 ショートコードやスライダーを登録しておいて、ウィジェットに表示させたりもできるようです。いろいろ応用が効きそうな機能が豊富ですね。今回は私が実際に使ってみて理解できた、さわりの部分だけのご紹介でした。

こちらの記事もどうぞ

「AGP Font Awesome Collectionプラグインで記事中にアイコンフォントを簡単に」への1件のフィードバック

コメントを残す

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