売上を上げる集客ホームページ制作なら神奈川県藤沢市のソニド-SONIDO-

【今だけ限定】お金をかけずに理想のお客を引き寄せるホームページの作り方

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

 
SONIDO 須山
WRITER
 
Webアイコンフォント楽々設置! 「WP Visual Icon Fonts」プラグインの使い方
この記事を書いている人 - WRITER -
SONIDO 須山
コンテンツマーケティング・集客ネタ・マーケティングネタなど不定期ですが更新しています! 楽しんで仕事ができる!全てはテストというマインド!をモットーに日々精進しております!!
詳しいプロフィールはこちら

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

画像のようなアイコンを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

 

「ホームぺージを作ったのに集客につながらない」
と嘆いているあなたへ

このレポートでは、ホームぺージから成果を出すための原動力となった「ホームページ集客成功の最大の秘訣」について公開しています。例えば、、、

●なぜ、62.1%のホームページは集客できないのか?(これを知ると、ホームページはもちろん、ビジネスモデルの根本的な部分から考え直したくなるでしょう)
●ストップ!これを知る前に業者にホームページの制作を依頼してはいけません(制作業者が集客できるホームページが作れない最大の理由)
●独立しても仕事がなかった私が人生のどん底で見つけた、インターネットを使って集客を成功させるための”最大の秘訣”(これを知っただけでも、あなたのホームページ対する考え方は180度変わってしまうでしょう)
●「買ってください」とお願いするのはもうたくさん?だったら、この方法を使ってください。売り手と買い手の立場を逆転させる”ちょっとずる賢い方法”
●売れるホームページとトップセールスマンの”意外な共通点”。プラス、あなたのホームページを嫌われるセールスマンから売れるセールスマンにするために必ず知っておくべきこと…

などなど、36ページにわたって解説しています。

今なら、このレポートを読んでくれた人限定で「シークレット・プレゼント」をご用意しています。プレゼントの内容は読んでからのお楽しみですが、商品の割引とかクーポンとか、そういったオファーではありません。完全無料のプレゼントです。

きっと喜んでいただけると思いますが、実はかなり労力がかかる代物なので(笑)、正直に言って、いつまで続けられるかわかりません、、、

この記事を書いている人 - WRITER -
SONIDO 須山
コンテンツマーケティング・集客ネタ・マーケティングネタなど不定期ですが更新しています! 楽しんで仕事ができる!全てはテストというマインド!をモットーに日々精進しております!!
詳しいプロフィールはこちら

- Comments -

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

「お金をかけずに理想のお客を引き寄せる」ホームページの作り方のレポートを無料でプレゼント

ホームぺージ集客
成功の7ステップ

「ホームページ集客成功の最大の秘訣」について公開
無料レポートを
今すぐダウンロード
close-link