簡単！確実！WPで、文章中にアイコンを挿入する方法

2020.11.20

簡単にアイコンを追加

記事を書くとき、テキストの横にアイコンを表示させたいことはありませんか。

 チェック
 地球
 ヘッドフォン
 Twitter
 FaceBook
 Apple

アイコンがあると見栄えも良いですし、なんたってわかりやすいですよね。

しかも、面倒くさいことをせず、簡単にパッと、できれば理想的です。

今回は、その方法を紹介します。

やり方

「Font Awesome」を使った方法を説明します。

直接テキストに入力できる方法です。

インストール方法

まず、「WordPress Visual Icon Fonts」プラグインをインストールします。

  1. 次にWordPressの管理画面を開きます。
  2. プラグインページを開いて、プラグインの[新規追加]ボタンをクリックします。
  3. 検索ボックスに「WordPress Visual Icon Fonts」を入力して、検索します。
  4. 検索結果に「WordPress Visual Icon Fonts」プラグインが表示されるので、[今すぐインストール]ボタンを押します。インストールが完了した後は、[有効化]ボタンを押します。

お疲れ様でした。

これでプラグインのインストールは、完了しました。

プラグインの設定ページはどこにあるか

サイドバーメニュー＞設定＞Icon font　を選んで表示させてください。

ただし、設定する内容はありません。

公式サイトへのURLが表示されているだけです。

プラグインの使い方は、どうするの？

WPで、記事を書く際に表示される「編集ツールバー」に[Icons]ボタンが表示されます。

それでは、編集画面へ移り、試しにホームアイコンを表示してみましょう。

[Icon]ボタンを押して表示される検索入力ボックスに「home」と入力して検索してみます。

検索リストにお家のアイコンが表示されるので、それを選択決定します。


↑
どうですか。このようにホームアイコンが表示されましたか。

表示されたら成功です。おめでとうございます。

表示されない場合は、もう一度、手順を確かめてください。

内部構造は、どうなっているの？

ちなみにHTMLは、以下の記述になっています。

<i class=”fa fa-home”><span style=”color: transparent; display: none;”>icon-home</span></i>

この中で、一番重要なのは、この部分です。

<i class=”fa fa-home“>

アイコンの識別子は、「fa-home」です。

アイコン一覧できるチートシートから識別子を選ぶこともできます。

チートシート

アイコンを一つ一つ検索リストで選んでもよいのですが、

ざっくりとアイコンを選びたいときは、アイコン一覧を眺めながら決めてみたくなりますよね。ート

下記のチートシートを使えば、可能です。

Find the Perfect Icon for Your Project | Font Awesome
Search all the icons and match your project with a look and feel that's just right, including the all-new Sharp Solid Icons, now available in Font Awesome 6.
fontawesome.com
https://search-fa.com/
search-fa.com

２つあるのですが、オススメは、「Search for Font Awesome」サイトのほうです。見やすかったです。日本語表示されるし、HTMLもコピペしやすいようになっています。

HTMLは、アイコン横に画面に表示されるスクリプトをコピペしてください。

こういうヤツ↓

<i class=”fa fa-home” aria-hidden=”true”></i>

カスタマイズ

サイズを変更してみよう

アイコンが表示できたものの、サイズが小さい・・・。

もうちょっと見栄えがよくなるようにサイズを変えたくなるよは世の常。

ということで、サイズを変更する方法を説明しますね。

　0.x倍
　2倍
　3倍
　4倍
　5倍

↑サイズを変更するとこんな感じになります。

サイズ変更するには、ちょっとHTMLをいじらないといけないっぽいです。

HTMLを編集するには、WPの編集画面の上部にある「テキスト」タブをクリックして、画面を切り替えておきます。

先ほどサイズ変更したアイコンのHTMLの記述をみると下記のような感じになっています。

黄色くマーキングしたところがサイズを調整する記述です。

<i class=”fa fa-check-circle-o fa-lg“></i>         //0.x倍
<i class=”fa fa-check-circle-o fa-2x“></i>         //2倍
<i class=”fa fa-check-circle-o fa-3x“></i>         //3倍
<i class=”fa fa-check-circle-o fa-4x“></i>         //4倍
<i class=”fa fa-check-circle-o fa-5x“></i>          //5倍

あと、数字のところを変更するとサイズを調整できますので、

いろいろ、いじって試してみてください。

カラーを変更してみよう

アイコンが表示できるようになったけど、なんか黒だけだと味気ない・・・。

色が付けたくなりますよね。

では、その説明をします。

カラー変更は、CSSも合わせ技で使いますよ。
HTMLとCSSの両方がいるということで、ちょっと面倒ですが、やり方は簡単です。

　灰
　青色
　緑色
　赤色
　黒

CSSに色の設定を記述して、それをHTMLで参照する形です。
なので、あらかじめCSSに使いたい色設定を記述しておきます。
ちなみにCSSは、WPの管理画面サイドバーメニューの外観＞テーマの編集　の編集画面を開いて書き込んでおきます。
わかりやすいように下記内容を参考にして例えてみます。
アイコンを赤色にするためのCSS「.facol-red {color:red}」は、HTML「<i class=”fa fa-check-circle-o facol-red”></i>」で参照されるます。
あと、WEBカラーも記述できるので、好きな色を選べますね。（WEBカラー例：#000000）
■CSS
/* Search for Font Awesomeカラー設定*/
.facol-gray {color:gray}
.facol-blue {color:blue}
.facol-green {color:green}
.facol-red {color:red}
.facol-brack {color:#000000}

■HTML

<i class=”fa fa-check-circle-o facol-gray”></i>
<i class=”fa fa-check-circle-o facol-blue”></i>
<i class=”fa fa-check-circle-o facol-green”></i>
<i class=”fa fa-check-circle-o facol-red”></i>
<i class=”fa fa-check-circle-o facol-black”></i>

他にもいろいろな表現ができる模様

  • アイコンを回転アニメーションをさせたり、
  • アイコンを表示角度を９０度毎に回転させたり、
  • アイコンを中央揃えにしたり、
  • アイコンを反転させたり、
  • アイコンに枠をつけたり、
  • アイコン同士を重ねたり、

・・・というようなことが、できるようです。

ではまた。