AFFINGER6のWebアイコンの使い方・色・サイズの変更方法

悩みを抱えている人

・AFFINGER6を導入したけど使い方がよくわからない

・Webアイコンの使い方は？

・色の変更はどうやるの？

・サイズも変えたい！

上記疑問について解決します。

  本記事の内容

こんにちは、ねとまるです。

他の方の記事でよく見かける「Webアイコン」の使い方がわからない！みんなどうやって使っているの？と悩んでいませんか？

実は、この記事で紹介する手順通りに操作を進めていくだけで誰でも簡単にAFFINGERの「WEBアイコン」を扱えるようになります。

なぜなら、当ブログは有料のWordPressテーマ 「ACTION（AFFINGER6）」を導入し実際に使用しているからです。

この記事では、AFFINGERの機能である「WEBアイコン」の使い方から色やサイズの変更方法をご紹介します。

記事を読み終えると、今後AFFINGERの「WEBアイコン」を使いこなせるようになるので悩まなくなりますよ。

それではさっそく見ていきましょう～！

有料のWordPressテーマAFFINGER6のWebアイコンの使い方

Webアイコンとは下記のようなアイコンです↓

よく見かけませんか？僕も同じように真似したくて調べたところFont Awesomeというサイトから好きなアイコンを選べます。

そしてプラグインの「AddQuicktag」を使って登録しておくことでいつでもすぐに使用できます。

それでは、順番に見ていきましょう。

Font Awesomeでアイコンを使用する方法

まずは、Font Awesomeから使いたいアイコンを検索します。

上記画像のように「アイコン」を選択するとたくさんアイコンがでてくるのですが、検索窓で使いたいアイコンを検索します。

例えばチェックマークを使いたい場合「check」で検索します。

一覧にアイコンが表示されるので使用したいアイコンを選びます。

このようにコードが表示されるのでコピーして記事に貼り付けます。

<i class="fa fa-check" aria-hidden="true"></i>

記事に張り付けるときは、ビジュアルで張り付けると正常に表示されません。

テキストの方を選択して張り付けると正常に表示されます。

どちらも表示されない場合は FontAwesomeIcons4.7.0の読み込みにチェックが入っていない可能性があります。

 FontAwesomeIcons4.7.0の読み込みにチェックを入れる手順

僕の場合はここにチェックが入っていなかったので、正常に表示されませんでした。

　これで無事に表示できました

Font Awesomeでアイコンの色を変える方法

次は このように色を変える方法をご紹介します。

先程お伝えしたこのチェックマークのコードが基本形となります。

そして、色を変えるコードを加えます。

赤色の部分が色を変えるコードです↓

今回は青系の色にしましたが、「deepskyblue」の部分を「pink]にするとピンク色に変えることができます。

この時に気をつけたいのが、色を変えるときの表記は英語表記になります。

こちらのサイトから、お好きな色をお選びください。

Colorsample.com

Font Awesomeでアイコンのサイズを変える方法

次にWebアイコンのサイズ変更をする方法をご紹介します。

先程と同じようにこちらのコードが基本形となります。

そして、サイズ変更のコードを加えます。

こちらがサイズ変更するコードです↓

この部分を変えることで大きさが変わります。

他にもサイズを変えるコードはこちら↓

「lg・1x・2x・3x・4x・5x」と変えていくことでお好きなサイズに変更することができます。

AddQuicktagでアイコンを登録しておく方法

アイコン使うのに毎回コードをコピペするのはめんどくさいですよね。

なので、すぐに使えるようにアイコンを登録しておくことができる「プラグイン」をご紹介します。

プラグイン名

こちらをまずは追加していきます。

AddQuicktag追加する手順

インストールが完了したら、有効化して設定をしていきます。

「設定を選択」すると下記画像の画面に切り替わります。

上の画像のように入力していきます。

終了タグに「</span>」こちらを入力すると記事では「」このように表示されるので、入力したい文字に書き換えます。

例えば「本記事の内容」と登録しておく場合は、「」こちらを外して

このように終了タグに入れておくと1発で表示されます。

「」こちらも外して文字も入れず上記コードのみの場合、エラーになるので、必ずなにかしら文字は入れましょう。

最後に「変更を保存」を押します。

すると、登録したはずのラベル名が消えてしまう場合がありますが、再度先程と同じように入力しなおすと表示されるようになります。

最新の状態で記事を開き画面を見て頂くとこのように表示されます。

これで簡単にいつでも使用することができるようになりましたね。

先生

まとめ：Webアイコンを活用しよう

今回は、有料のWordPressテーマ 「ACTION（AFFINGER6）」でWebアイコンの使い方についてご紹介させて頂きました。

 本記事の振り返り

設定までは少し面倒ですが、一度しておくと今後は簡単に使用できるので、少しでも執筆の時間を減らしたい方にはおすすめです。

また、この記事をみて「AFFINGER」のテーマを導入してみたいと思った方はこちらからどうぞ↓

＼ 「ACTION（AFFINGER6）」をテーマにする ／

AFFINGER6の目次・会話吹き出し・光るボタンの使い方はこちら

AFFINGER6のブログカード（内部リンク）を記事内に貼る方法はこちら

今回は以上です。