AFFINGER5でチェックマークのみ見出しで出す方法【簡単】

悩んでいる人

アフィンガーで”チェックマークのみ”の見出しを出したいんですが方法がわかりません。 どのように設定すれば良いですか？

こんな質問にお答えしていきます。

見出しにチェックマークがあると、目を引く効果もあるため、非常き記事の見栄えがよくなりますよね

すぐる

←このチェックマークです！

やり方としては、下記をコピペして「ビジュアル」ではなく「テキスト」モードにして貼り付けると出るようになります。

このような感じで表示できます。

本記事の内容

これに内容を書いたものと組み合わせると

本記事の内容

というイメージになります。

チェックマークを表示する仕組み

チェックマークのアイコンは画像ではなく「WEBアイコンフォント」の「Font Awesome」というものを使います。

Font Awesomeとは、Web上でよく利用されるアイコンをアイコンフォントという文字として使うことができるツールのことです。画像ではなく文字なので、大きさ・色変更・動きをつけるなどの変更も容易です。

下記のサイトで一覧が見れます。
WEBアイコンフォントのサイト（Font Awesome）

アフィンガーでは標準でWEBアイコンフォントが使えるようになっていますので別途プラグインを入れる必要はありませんので安心してください。

すぐる

Font Awesomeでチェックマークを探します。

チェックマークは検索窓に「check」と入れると出てきます。

詳細を開くと下記のコードが出るのでそれをコピーします。これが基準となるコードなります。

このコードに少しコード加えると、チェックマークを大きくしたり色を変更したりすることが可能です。
cssの知識もいりませんので安心してくださいね。

それでは、チェックマーク大きくする方法と色を変える方法について説明していきます。

チェックマークを大きくする方法

先程のコードに大きさを指定するコードを追加します。

追加するコードは「 fa-○○」
○○は大きさ指定部分。

というような感じで数字が上がるとチェックマークも大きくなります。

今回は少しだけ大きくしたいので、fa-lgを使います。

入力するときはワードプレス記事作成画面でテキストモードにして下記コードを入れてください。

※ビジュアルモードだと文字列として認識されてしまいチェックマークがでません。

チェックマークのカラーを指定する方法

続いてはカラー変更について説明していきます。

こちらもcssなどは使用しません。少し追加コードを加えるだけです。

大きさ指定も追加したコードに下記のカラー指定も追加していきます。

追加するコードは「 style="color: deepskyblue;" 」

これを先ほどのコードに追加するとチェックマークの色が変わります。

カラーを入れる時は「f000000」のような英数字ではなく、色名で指定する必要があります。

今回は「deepskyblue」にしていますがこちらを「blue」や「pink」に変えるとチェックマークのカラーも変わります。

「red」や「green」などメジャーなカラーは大丈夫ですが、中間色など一部カラーはうまく出ない場合があります。

まとめ：チェックマークは簡単に設定できる

チェックマークのみの見出しを出したい時は、下記コードをコピーして、テキストモードにして貼り付けください。

本記事の内容

鉛筆マークなど他のマークも豊富にあって同じように表示出来るのでFont Awesomeで好きなアイコンを探してみてください。
鉛筆マークを出したい時はこんなコードになります。

鉛筆マークもでます

チェックマークの見出しを出したい方の参考になれば嬉しいです。

最後まで読んでいただきありがとうございました。