【初心者でもできる】Webアイコンフォント楽々設置!「WP Visual Icon Fonts」プラグインの使い方とDashicons

Webアイコンフォント楽々設置! 「WP Visual Icon Fonts」プラグインの使い方

アイコンを画像で作るのめんどくさいと思ったことはありませんか?

画像のようなアイコンをWebフォントでアイコン表示するのが、Webアイコンフォントです。

画像でアイコンを作ると、サイズを調整するのもひと手間です。

しかし、Webアイコンフォントならサイズや色の変更もラクラク!とても便利です。

ちなみにこんな感じのやつです icon-arrow-circle-down ←これもWebアイコンフォント

Webアイコンフォント

今回は、ワードプレスでWebアイコンフォントを簡単設置できるプラグイン「WP Visual Icon Fonts」を紹介します。

このプラグインで、   icon-comment  icon-building などなどの369種類のアイコンが楽々設置できちゃいます!

 

1:「WP Visual Icon Fonts」をインストール・有効化

①プラグイン⇒新規追加をクリック。

「WP Visual Icon Fonts」のインストール

②キーワードに「WP Visual Icon Fonts」を入力

③今すぐインストールをクリック

「WP Visual Icon Fonts」を有効化

④有効化をクリック

これで準備は整いました!

 

2:投稿ページでWebアイコンフォントを使用

投稿ページを開くと、Iconsのボタンが表示されます。

Icons

Iconsを2回クリックすると、アイコンが選べます。

「WP Visual Icon Fonts」

お好きなアイコンを選んでください。

これで繁栄されます。とても簡単!

テキストの大きさ、色を変更する感覚で、アイコンの大きさや色を変更できます。

初心者の方はビジュアルモードで使用してください。

 icon-comments 大きくなります。

  色も変更できます。

 

3:一覧からWebアイコンフォントを使う

一覧ページがあるのでみてみましょう!
http://fontawesome.io/icons/

Webアイコン一覧

一覧ページから使いたいWebアイコンフォントをクリックします。

 

Webアイコンフォントソースコード

ソースコードをコピーして、テキストモードで貼り付けてあげたら完了です。

←こんな感じで表示されます。

ソースコードで表示した場合、ビジュアルモードでサイズは変更できません。
変更したい場合は下記を参照してください
←こんな感じに変更!

style=”color:#ff0000;font-size:50px;”を所定の場所に追加して、色とサイズを変更してあげましょう。

 

4:【番外編】ワードプレスのDashiconsを使う方法

ワードプレスの管理画面で色々なWebアイコンが使われています。

ワードプレスをインストールした際に、既に入っているWebアイコンフォントをDashiconsと呼びます。

番外編として、Dashiconsの使い方を紹介します。

function.phpを編集するので、特に初心者の方はバックアップをとってからにしてくださいね!

 

4:1 function.phpの編集

以下コードをfuncition.phpに追記します。

Dashiconsが使用できる準備が整いました。

ハイそれだけです!

 

4:2 使いたいアイコンを見つけてコピー&ペースト

下記URLで使いたいアイコンを探しましょう!
https://developer.wordpress.org/resource/dashicons/#wordpress

Dashicons

使いたいアイコンをクリック⇒Copy HTMLをクリックします。

Dashiconソース

ソースをコピーして、テキストモードにして貼り付ければOKです。

これがワードプレスのDashiconsだぜ!!

 

まとめ

いかがだったでしょうか。

Webアイコンフォントは画像と違い、サイズを大きくしても画質は荒くなることはありません。

また、アイコンを使うことでより理解してくれることも増えます。

  • 電話のアイコンであれば、電話をここからすんだね。
  • メールのアイコンであれば、ここからお問合わせフォームにいけるのか。
  • ビルのアイコンであれば、会社情報か。

など、少しアイコンがあるだけで印象や理解が高まることがあります。

是非興味のある方は参考にしてくださいね icon-smile-o

Webアイコンフォント楽々設置! 「WP Visual Icon Fonts」プラグインの使い方

WEB制作会社が知らなかった、ホームページ集客の成功技術をプレゼント!!

約10年間ホームページ制作会社で働き、失敗と成功を経験し 3年以上のホームページでの集客をコンサルティングして結果を出してきた 5年後も安定した収入を作り出せる「ホームページ集客の仕組みづくり」 是非この機会にダウンロードして、あなたのホームページの集客に役立ててください。 もしあなたが
  • ●ホームページ集客を夢で終わらせない戦略
  • ●星の数ほどある中から選んでもらう方法
  • ●ホームページが集客効果を上げるコツ
  • ●ホームページ集客で失敗するポイント
  • ●ホームページ集客を成功へ導くポイント
など、77ページにわたって解説しています。 また内容はホームページ制作会社が知らなかったことや教えてくれないことでもあります。

売上UPの為のホームページに興味ある方、他にいませんか?

ホームページを作るということは、インターネット上にあなたの会社の営業マンを置くということです。もし、その目的でなければ、弊社は役不足かも知れません。

SONIDOはあなたの会社の優秀な営業マンを作ることで、あなた会社の売り上げ向上と集客安定化を使命としてやっています。
Googleの理念に基づき、競合他社と差別化するご提案をしております。

もしあなたが

  • ●ホームページから反応がないので、大変困っている
  • ●リニューアルしたいけど、今の制作会社に頼んでも良いのかどうか迷っている
  • ●ライバル店がホームページで売り上げがアップしたと聞いて内心焦っている
  • ●競合の会社よりも集客したいがどうすればいいのか分からない
  • ●ホームページを作りたいけれど、いくらかかるのか調べている
  • ●もっと安定した売り上げを出す仕組みがほしい

などでお悩みならSONIDOのサービスを一度見てみることをオススメします。

最初に結論をお話ししますと、これらの悩みを解決するのは、ご想像のとおり「集客」です。

SONIDOでは、あなたのホームページを制作し公開してから運用まで、バランス良く動かせていくノウハウを、出し惜しみすることなく提供していきます。

コメントを残す

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