AFFINGER

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

2020年8月11日

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

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

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

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

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

 

チェックマーク見出しの出し方

<i class="fa fa-check fa-lg" style="color: deepskyblue;" aria-hidden="true"></i><span class="huto"> 本記事の内容</span>

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

本記事の内容

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

 

本記事の内容

・見出し風チェックマークの出し方がわかるようになる

・サイズや色の変更方法がわかるようになりすぐに利用できる

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

 

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

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

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

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

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

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

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

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

<i class="fas fa-check"></i>

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

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

 

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

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

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

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

fa-lg (1.3倍)
fa-2x (2倍)
fa-3x (3倍)
fa-4x (4倍)
fa-5x (5倍)

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

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

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

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

 

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

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

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

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

<i class="fa fa-check fa-lg" style="color: deepskyblue;" aria-hidden="true"></i>

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

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

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

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

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

 

 

 

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

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

チェックマーク見出しの出し方

<i class="fa fa-check fa-lg" style="color: deepskyblue;" aria-hidden="true"></i><span class="huto"> 本記事の内容</span>

本記事の内容

 

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

<i class="fa fa-pencil fa-lg" style="color: green;" aria-hidden="true"></i><span class="huto"> 鉛筆マークもでます</span>

鉛筆マークもでます

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

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

スポンサーリンク

-AFFINGER
-

© 2020 Suguru Blog