【WordPress】カワイイ!簡単!絵文字感覚でアイコンフォントが使えるプラグイン「WordPress Visual Icon Fonts」

【WordPress】カワイイ!簡単!絵文字感覚でアイコンフォントが使えるプラグイン「WordPress Visual Icon Fonts」

Feedlyでいつも楽しみに購読させて頂いている「WordPressなら最高!」さんのこちらの記事を見てやってみました!!

アイコンフォントWordPressで使う(4パターン)/WordPressなら最高!

1番目に紹介されている「WordPress Visual Icon Fonts」というプラグインを使えば、編集画面でアイコンフォントを挿入できるのだそうです。

Sponsored Link

「WordPress Visual Icon Fonts」の特長

 2014-03-05 20.50.27

プラグインの特長

  • 編集画面から簡単にアイコンを検索、挿入できる
  • アイコンフォントの種類が豊富!!
  • 大きさや色も簡単に変えることができる

プラグインのインストールと設定方法

設定についてはこちらのページを参考にさせていただきました。

参考記事

369種類のアイコンを簡単・自由に設置。WPプラグイン「WordPressVisualIconFonts(テーマタンク)

「ダッシュボード」→「プラグイン」→「新規追加」→「検索」→「インストール」→「有効化」します。

スクリーンショット 2014 03 05 20 05 02 3

プラグインを使う準備が整いました。

スクリーンショット 2014 03 05 19 35 46

設定は「設定」プラグイン名をクリック

スクリーンショット 2014 03 05 19 36 13

選べるウェブフォントは2種類

オプション設定画面はいたってシンプルです。

2種類のウェブフォントから使いたい方を選びます。

とりあえず、左のFontAwesomeを選択し、変更を保存。Genericonsも丸みがあってかわいいウェブフォントがたくさんありました。

スクリーンショット 2014 03 05 19 36 56

余談ですが、FontAwesomeのページにとんだ時、Google翻訳で勝手に翻訳され、こんな画面が…(笑)

スクリーンショット 2014-03-05 19.37.33

恐ろしいフォントなら遠慮したいです…

ちなみに「Awesome」とは、「畏怖の念を起こさせる、とか、荘厳な、すばらしい」と言う意味だそうです。

WordPress Visual Icon Fontsの使い方

インストールすると投稿の編集画面に「icons」ボタンが表示されます。

スクリーンショット 2014 03 05 18 43 30 2

iconsボタンをクリックすると、様々なiconが下にドロップダウンして出てきます。

使いたいアイコンフォントを選びます。

スクリーンショット 2014 03 05 20 37 16 2

本のアイコンをクリックすると、本文に挿入され、ビジュアルエディタでアイコンを確認できます。

スクリーンショット 2014 03 05 18 44 56 2

この時、テキストエディタで見てみると、このようなコードが書かれていました。

0fb4e1fcd51b88d085804cf547d91a8d.png

(再びビジュアルエディタに戻り)色を変えたいときは、フォントカラーのボタンから

スクリーンショット 2014 03 05 19 40 20

アイコンの大きさは文字サイズで変更できます。

スクリーンショット 2014 03 05 19 59 07 2

実際のサイトで表示を見てみると…アイコンが挿入され、選んだ色と大きさで表示されています。

スクリーンショット 2014 03 05 19 59 28 2

まとめ〜まるで絵文字感覚でアイコンを使うことができる

アイコンが入るだけでなんだか楽しいし、ちょっとひと休みできますね。 icon-coffee 

私が使っているWordPressテーマ「el plano」でもアイコンフォントを簡単に使える仕様になっています。(外部スタイルシートを読み込んで表示)テキスト編集画面でHTMLコードを記載する、アイコン名を一つ一つ入力することが必要です。せっかくのテーマの機能ですが、まだ使えていないので、今度試してみようと思います。

このプラグインでは、絵文字感覚でアイコンフォントを使えてきて便利。

もう少し使い道を研究してみたいと思います。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でEDiT NEW LiFE.をフォローしよう!

Sponsored Link

LEAVE A REPLY

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)