Font Awesomeのアイコンフォントは、ブログデザインなどにワンポイントとして使用するととても便利です。
このブログで使用しているテーマでも、所々使用しています。こんな感じで。
Font Awesomeは、テーマなどで使用されているのはよく見ますが、記事の本文中に利用しても、なかなか便利に使えるのではないかと思います。
そう思って以前、Wordpressの投稿にFont Awesomeを簡単に使えるようにするFont Awesome Icons+TinyMCEプラグインの組み合わせを紹介しました。けれど、TinyMCEの仕様変更か何かで、Wordpressのビジュアルエディターから使用できなくなってしまいました。(詳しくはFont Awesome Iconsのフォーラムに書かれています)
そこで、代替手段を探したら先述の組み合わせよりさらに楽に使用できる「WP Visual Icon Fonts」というプラグインを見つけたので紹介します。
目次
WP Visual Icon Fontsプラグイン
WP Visual Icon Fontsは、Font AwesomeとGenericonsのウェブアイコンフォントを、Wordpressのビジュアルエディター上から手軽に使えるようにするプラグインです。
インストール
WP Visual Icon Fontsは、インストールするだけで特に設定も必要ありません。
プラグインを検索して
インストールして有効化するだけ。
エディター画面
アイコンフォントを使用するときも、打ち込みが面倒くさい、タグやショートコードを使う必要もなく、エディターのドロップダウンメニューから選択するだけで簡単にいろいろなアイコンを使用することができます。
使用方法
インストール後、Wordpressの新規投稿画面などを表示させると「icons」のようなボタンが表示されます。これをクリックします。
するとこんな感じでドロップダウンメニューが表示されるので▼部分をクリックしてドロップダウンして
アイコンを選択します。
すると、こんな感じでアイコンフォントが表示されます。
HTMLタグはこんな感じで自動的に挿入されます。
<i class="fa fa-music"><span style="color: transparent; display: none;">icon-music</span></i>
ドロップダウンの検索ボックスを使用すれば、絞り込みも簡単です。
どんなアイコンがあるかは、Font Awesome IconsやGenericonsを見ながら探すと楽だと思います。
まとめ
WP Visual Icon Fontsを使うと、本文中にちょっとしたワンポイント入れたいときに、なかなか便利なのではないかと思います
デフォルトの状態で、アイコンフォントの左右に半角スペースが入るようになっているので、文字とアイコンがくっついたりすることもないですよ
わいひらさん
記事にまとめていただきありがとうございました^^
し・か・し
ここでまた新たな問題が発生(泣
下書き保存していた記事を編集していてなんか変!だと思いました
エディターをビジュアルに切り替えたり、編集を加えて下書き保存等の変化を与えたら勝手にPタグで括られてしまいました
しかも、文中に適度な改行を加えて書いていたものが無効となり
だらだらと長い1文としてまとまってしまっています
なぜでしょうか。。。
このPタグ問題に悩むケースはググったらいろいろ出てきましたが
わたしが参考にさせていただいている教科書付録のテーマ(現在使用中)には
もともとこの問題を回避するコードが対策として書いてあるようです
だから、現在までストレスなく普通に使えていたわけですが・・・
それで、とりあえずWP Visual Icon Fontsを無効化してみたのですが
この現象が改善しません(泣
おかしい現象をまとめると、
①テキストエディタ上で改行するとその1行に対して勝手にPタグで括られてしまう
②テキストエディタ上で改行すると自動でbrタグが入っていたのに無効になってしまっている
以上です
なにか解決策はあるでしょうか(滝汗