[st-kaiwa1]
アフィンガーで”チェックマークのみ”の見出しを出したい！
ちょっと目立つ”チェックマークのみ”の見出しどうやって出すかが分からず２日くらい調べてたどり着きました…！
[/st-kaiwa1]
←このチェックマークです！
やり方としては、下記をコピペして「ビジュアル」ではなく「テキスト」モードにして張り付けると出ます。
チェックマーク見出しの出し方
[st-cmemo fontawesome=”fa-code” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=”150″]
<i class=”fa fa-check fa-lg” style=”color: deepskyblue;” aria-hidden=”true”></i><span class=”huto”> 本記事の内容</span>
[/st-cmemo]
こんな感じで表示できます。
本記事の内容
これに内容を書いたものを組み合わせると
本記事の内容
・見出し風チェックマークの出し方がわかる
・サイズや色の変更方法がわかり即利用できる
という感じになります。
やりたかった事が出来ました…！感動…！！週末の自由時間をフルに使ってたどり着いたので感無量です。
どういう仕組み？
チェックマークのアイコンは画像ではなく「WEBアイコンフォント」の「Font Awesome」というものを使います。
[st-cmemo fontawesome=”fa-file-text-o” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=””]Font Awesomeとは、Web上でよく利用されるアイコンをアイコンフォントという文字として使うことができるツールのことです。画像ではなく文字なので、大きさ・色変更・動きをつけるなどの変更も容易です。[/st-cmemo]
下記のサイトで一覧が見れます。
WEBアイコンフォントのサイト（Font Awesome）
アフィンガーでは標準でWEBアイコンフォントが使えるようになっていますので別途プラグインを入れる必要はありません。
Font Awesomeでチェックマークを探します。
チェックマークは検索窓に「check」と入れると出てきます。
詳細を開くと下記のコードが出るのでそれをコピーします。これが基準となるコードです。
[st-cmemo fontawesome=”fa-code” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=”150″]
<i class=”fas fa-check”></i>
[/st-cmemo]
このコードに少し加工を加えると、チェックマークを大きくしたり色を変更したりできます。cssの知識もいりません。
大きくする方法と色を変える方法について説明していきます。
チェックマークを大きくするには？
先程のコードに大きさを指定するコードを追加します。
[st-cmemo fontawesome=”fa-code” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=”150″]
<i class=”fa fa-check fa-lg” aria-hidden=”true”></i>
[/st-cmemo]
追加するコードは「 fa-**」
**は大きさ指定部分。
fa-lg (1.3倍)
fa-2x (2倍)
fa-3x (3倍)
fa-4x (4倍)
fa-5x (5倍)
というような感じで数字が上がるとチェックマークも大きくなります。
今回は少しだけ大きくしたいので、fa-lgを使います。
繰り返しますが、入力するときはワードプレス記事作成画面でテキストモードにして下記コードを入れてください。
※ビジュアルモードだと文字列として認識されてしまいチェックマークがでません。
チェックマークのカラーを指定するには？
続いてはカラー変更についてです。
cssなどは使わずにコードに少し追加を加えるだけです。
大きさ指定も追加したコードに下記のカラー指定も追加していきます。
[st-cmemo fontawesome=”fa-code” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=”150″]
<i class=”fa fa-check fa-lg” style=”color: deepskyblue;” aria-hidden=”true”></i>
[/st-cmemo]
追加するコードは「 style=”color: deepskyblue;” 」
これを先ほどのコードに追加するとチェックマークの色が変わります。
カラーを入れる時は「f000000」のような英数字ではなく、色名で指定する必要があります。
今回は「deepskyblue」にしていますがこちらを「blue」や「green」に変えるとチェックマークのカラーも変わります。
「red」や「pink」などメジャーなカラーは大丈夫ですが、中間色など一部カラーはうまく出ない場合があるので色々試してみてくだださい。
参考サイト
色名で指定できるカラー一覧が確認できるサイト
まとめ
冒頭にも書きましたが復習です。
チェックマークのみの見出しを出したい時は、下記コードをコピーして、テキストモードにして貼り付けです。
チェックマーク見出しの出し方
[st-cmemo fontawesome=”fa-code” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=”150″]
<i class=”fa fa-check fa-lg” style=”color: deepskyblue;” aria-hidden=”true”></i><span class=”huto”> 本記事の内容</span>
[/st-cmemo]
ハートマークなど他のマークも豊富にあって同じように表示出来るのでFont Awesomeで好きなアイコンを探してみてください。
ハートマークを出したい時はこんなコードになります。
[st-cmemo fontawesome=”fa-code” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ bordercolor=”” borderwidth=”” iconsize=”150″]
<i class=”fa fa-heart fa-lg” style=”color: pink;” aria-hidden=”true”></i><span class=”huto”> ハートマークもでます</span>
[/st-cmemo]
ハートマークもでます
他にも方法はあるかもしれませんが、私が調べた限りcssをいじらないで簡単に出来るのはこのパターンかなと思います。
[st-kaiwa1 r]同じような悩みを持っている方の参考になれば幸いです[/st-kaiwa1]