WordPressでアイコンフォント&SVGを利用する際に役立つプラグインを紹介します。

SVGも利用できる「WP SVG Icons」がイチオシですが、他にも色々プラグインがあるので合わせて紹介します。

アイコンフォントといえば「Font Awesome」が有名ですが、アイコンを利用するには、フォントファイルをサーバー上にアップロードしたり、WordPressのテンプレートを編集したりする必要があるので少し手間がかかります。この記事で紹介するWordPressプラグインを利用すれば、プラグインをインストールするだけで利用でき、楽して簡単にアイコンフォントを利用できます。

WordPressでアイコンフォントを利用し、あなたのWebサイトの見栄えを良くしましょう。

はじめに

アイコンフォントとは?

アイコンフォントとは、フォントの一文字にテキストではなく、アイコンが割り当てられているフォントのことです。アイコンフォントを利用すると、下記のメリットがあります。

フォントなので

  1. テキストと合わせてフォントサイズを変更しやい。
  2. CSSでアイコンのカラーを変更しやすい。
  3. テキストとベースラインを合わせやすい。
  4. 拡大表示してもアイコンが滑らかに表示される。
  5. マウスオーバー時にCSS3アニメーションを付けることができる。

テキストエディタで利用できるアイコン

WP SVG Icons

WP SVG Icons

WP SVG Iconsは、WordPressでフォントアイコンを簡単に利用できるプラグインです。490種類以上のアイコンを利用できます。それに加え、カスタムアイコンをインポートして利用することもできます。

プラグインの管理画面と記事編集画面にアイコンの一覧が表示されます。そのアイコンを選択すると、アイコンのプレビューとショートコードが表示されます。そのショートコードを記事に貼り付けて利用します。

記事の内容が文字ばかりだと、どうしても地味な印象になってしまいます。記事の中にアイコンがあるだけで、見た目も良くなり、アイコンで記事の内容を視覚的に表現できます。見た目が良いと、自分で書いた記事に反響が出やすくなります。非常に便利なプラグインなので活用しましょう。

このプラグインが優れている点

  1. WordPressで490種類以上のフォントアイコンを利用できる。
  2. プラグインの管理画面でアイコンの一覧を確認できる。そのアイコンを選択すると記事に貼り付けるショートコードが表示される。
  3. 投稿と固定ページの記事編集画面の上部にアイコン挿入ボタンが追加される。そのボタンを利用するとスムーズに記事にアイコンを挿入できる。
  4. プラグインの管理画面でアイコンの種類を選択すると、ショートコードが表示され、そのショートコードを記事に貼り付けて利用できる。
  5. IcoMoonからSVG形式のアイコンをインポートして利用できる。(無料版で利用できるカスタムアイコンは10個に制限されている)
  6. 自分で作ったカスタムアイコンをインポートして利用できる。(無料版で利用できるカスタムアイコンは10個に制限されている)
  7. アイコンフォントは、フォントなので、テキストと一緒にCSSでアイコンのサイズやカラーを調整しやすい。
  8. 更に機能を拡張した「有料版」のプラグインも提供されています。

利用イメージ(英語)

プラグインの使い方

インストール方法

  1. WordPress管理画面 > プラグイン > 新規追加 >「WP SVG Icons」で検索
  2. WordPress.org からダウンロード

プラグインの解説

WP SVG Icons – WordPressでアイコンフォントを簡単に利用できるプラグイン

Font Awesome Icons

Font Awesome Icons

Font Awesome Icons は、WordPressで Font Awesome のアイコンを利用できるプラグインです。361種類のアイコンを利用できます。

アイコンを表示したい場所にHTMLまたはショートコードを記述して利用します。CSSクラス名でアイコンの種類を指定します。

利用できるアイコンは Font Awesome のみです。プラグインをインストールするだけで利用できるので便利です。

このプラグインが優れている点

  1. WordPressで Font Awesome の361種類のアイコンを利用できる。
  2. プラグインをインストールするだけで利用できる。
  3. アイコンを表示したい場所にHTMLまたはショートコードを記述して利用する。

インストール方法

  1. WordPress管理画面 > プラグイン > 新規追加 >「Font Awesome Icons」で検索
  2. WordPress.org からダウンロード

使い方

アイコンを利用するには、wordpress.org のプラグイン説明にあるPDFに記載されているCSSクラス名をHTMLに記述して利用します。

<i class="icon-pencil"></i>

上記HTMLコードのclassの中にアイコンの種類を指定します。

ビジュアルエディタ専用のアイコン

WP Visual Icon Fonts

WP Visual Icon Fonts

WP Visual Icon Fonts は、WordPressのビジュアルエディタでアイコンを利用できるプラグインです。Font Awesome(369種類)、Genericons(62種類)のアイコンを利用できます。

このプラグインをインストールすると、ビジュアルエディタにアイコンを挿入できるプルダウンメニューが追加されます。それを選択するだけでアイコンが記事に挿入されます。HTMLコードを編集する必要がないので初心者でも利用できます。挿入したアイコンはテキストと同じように表示されます。サイズやカラーもテキストと同じように変更できます。

このプラグインの活用方法としては、記事内の見出しやボタンなどをアイコンで装飾できます。アイコンで記事の見出しやボタンを視覚的に分かりやすくすることで、記事の反響が良くなるかもしれません。

このプラグインが優れている点

  1. WordPressのビジュアルエディタでアイコンを利用できる。
  2. Font Awesome(369種類)、Genericons(62種類)のアイコンを利用できる。
  3. ビジュアルエディタにアイコンを挿入できるプルダウンメニューが追加される。
  4. アイコンで記事の見出しやボタンを視覚的に分かりやすくできる。

インストール方法

  1. WordPress管理画面 > プラグイン > 新規追加 >「WP Visual Icon Fonts」で検索
  2. WordPress.org からダウンロード

ウィジェット専用のアイコン

Widget Icon

Widget Icon

Widget Iconは、ウィジェットのタイトルの横にアイコンを追加できるプラグインです。640種類以上のアイコンを利用できます。

このプラグインを利用すると、Font Awesome と Elusive のアイコンフォントを自分のWebサイト上で簡単に利用できます。それに加え、手動でHTMLを記述すれば好きな位置にアイコンを表示することもできます。

このプラグインが優れている点

  1. ウィジェットのタイトルの横にアイコンを追加できる。(左側または右側)
  2. 手動でHTMLを記述すれば好きな位置にアイコンを表示できる。
  3. Font Awesome と Elusive のアイコンフォントを自分のWebサイト上で利用できる。アイコンの種類は640種類以上利用できる。
  4. アイコンの種類・サイズ・カラー・表示位置・余白などを自由に指定できる。

インストール方法

  1. WordPress管理画面 > プラグイン > 新規追加 >「Widget Icon」で検索
  2. WordPress.org からダウンロード

プラグインの解説

Widget Icon – ウィジェットのタイトルにアイコンを追加できるWordPressプラグイン

メニューのアイコン

Font Awesome 4 Menus

Font Awesome 4 Menus

Font Awesome 4 Menusは、WordPressのグローバルメニューにアイコンフォントを表示できるプラグインです。アイコンフォントは「Font Awesome」を利用しています。

使い方は簡単です。WordPress標準機能のメニューの設定項目の中にある「CSS class (オプション)」の部分に「Font Awesome」のclassを指定します。アイコンのフォントサイズ指定にも対応しています。

尚、WordPressのデフォルトテーマは、殆ど対応していますが、テーマによってはCSSの影響でアイコンが正常に表示されない場合があります。確認してみたところ、市販のテーマは殆ど非対応でした。

このプラグインが優れている点

  1. WordPressのグローバルメニューにアイコンフォントを表示できる。
  2. WordPressのデフォルトテーマの殆どに対応している。
  3. アイコンフォントは「Font Awesome」を利用しています。

インストール方法

  1. WordPress管理画面 > プラグイン > 新規追加 >「Font Awesome 4 Menus」で検索
  2. WordPress.org からダウンロード

対応テーマ

※ アイコンが多少ずれる場合あり。

  1. Twenty Fourteen
  2. Twenty Thirteen
  3. Twenty Twelve
  4. Twenty Eleven
  5. Twenty Ten

使い方

Font Awesome 4 Menus

WordPress標準機能のメニューの設定項目の中にある「CSS class」の部分に「Font Awesome」のclassを指定します。アイコンサイズの拡大や固定幅の指定もできます。

尚、メニューの「CSS class」の設定項目は、初期状態では非表示になっています。画面上部にある「表示オプション」の設定で表示するようにしてください。

まとめ

Webサイトでアイコンフォントを活用すると、Webサイトの内容が視覚的にも分かりやすくなります。見た目が少し変わるだけで記事の反響が良くなることもあります。

アイコンの使いすぎは逆効果になる場合もありますが、強調したい部分に絞って使うと、見た目も良くなり、効果がでるかもしれません。

スポンサーリンク