今回紹介する、便利アイコンサイト【font awesome】（フォントオーサム）では、無料で使えるベクタースタイルのイラストアイコンが提供されています。
ここではワードプレスの人気テーマ『アフィンガー４』を使って【font awesome】の使い方を紹介したいと思います。
アフィンガーを使っていない人も基本的な使い方は同じなので参考にして下さい♪
こんな方におすすめ
- Font Awesomeの使い方を知りたい人
- アフィンガーやその他ワードプレステーマでのFont Awesomeの使い方を知りたい人
Font Awesome 使い方はかなりシンプル！
まずはインターネットブラウザで、fontawesome.comを検索します。
font awesomeロゴの右にある『 Icons 』をクリックします。
トップのメニューバーにある【icons 】をクリックします。
するとアイコン画像が沢山出てきます。
好きなアイコンをクリック又は、検索バーに単語を入力します。
この中から好きなアイコンを直接選ぶ事もできますが、私はリンク用のアイコンを探していたので、上部にある検索バーに【LINK】と入力して、検索してみました。
ページを下にスクロールすると沢山アイコンが出てきます。
外部リンク用の画像が気に入ったので、そのアイコン画像をクリックします。
．．．すると、大きさの違う画像が沢山出てきます。
こんな感じで画面上にアイコンが並んでいます。
このページの一番下左、黒いウィンドウ部分を見ると
<i class="fas fa-external-link-alt"></i>と書いてあります。
コレがこのアイコンのIDになります。
ポイント
アフィンガーなど、ワードプレスで使う際には、
この文字列の【 ” 】と【 ” 】の間にある、『 fas 』の次、『 fa-external-link 』という部分のみを抜粋して使います。
アフィンガーでの『fontawesome』の使い方
アフィンガーの場合、いくつかの記事装飾などで Font Awesomeが使える様になっています。
ココでは例として、『マイボックス』で説明したいと思います。
まず投稿画面の『タグ』をクリックし、そのメニューから『マイボックス』を選びます。
『タグ』からマイボックスを選びます。
すると、下の様なタグが記事に挿入されます。
マイボックスのタグはこんな感じで記事に挿入されます。
この状態をプレビュー画面で見ると下の画像の様になっています。
タイトルに青いチェックマークが入っていますね。
（チェックマークの色はカスタマイズ画面で設定した色です。）
タイトルに青いチェックマークが入っています。
この青いチェックマークを、先ほど手に入れたfont awesomeの外部リンクアイコンに置き換えてみたいと思います。
画像の水色部分を『font awesome』のidに置き換えます。
上の画像の水色で示した部分に先ほど手に入れた『外部リンクアイコン』のidである『 fa-external-link-alt 』に差し替えます。
『font awesome』のid に置き換えてみました。
プレビュー画面で画像を見てみると、しっかり外部リンクアイコンが挿入されています。
先ほどのチェックアイコンに変わって『外部リンクアイコン』が無事挿入されました。
アイコン意外にも色々変更できる点が多いのがアフィンガーの特徴です。
このブログで使っているワードプレステンプレート『アフィンガー』のマイボックスはアイコンを変えるだけでなく、色や形、背景色なども変える事が出来ます。
アフィンガーには他にもFont Awesomeを使った記事装飾機能があります。
-
-
【アフィンガーの使い方】アフィンガーの文字装飾一覧はコチラ＞
目次このページでは人気ワードプレステンプレート、【アフィンガーAFFINGER4】の記事装飾の使い方や機能などを紹介します。見出しのデザインも自由自在！ こんな風にかんたんに変更可能です。『クリップメ ...
