【affinger6】ブロックエディタでオシャレなチェックマークを表示する方法

FontAwesomeでオシャレなチェックマークアイコンを使いたいんですが、やり方が知りたいです。

今回はこういった疑問にお応えします。

Font Awesomeを使うと、、、

こーゆーいい感じのチェックマークを作ることができます。

FontAwesomeとは？

今回はこのFont Awesome を、affingerのブロックエディターで使用する方法を解説していきます。

結論、使う手順は下記のコードをコピぺするだけです。

こんなチェックマークを使うには、、、

以下のHTMLをコピーして、カスタムHTMLに貼り付けて、、、

<p>
 <i class="fa fa-check" aria-hidden="true" style="color:#4682b4
;" ></i>
 <span class="my-check">このHTMLをコピーして、、、</span> 
</p>

そしたら以下のCSSをコピー して、追加CSSに貼り付けるだけ。

.my-check {
font-weight: bold;
font-size: 16px;
}

＊HTMLはブロックエディタの「カスタムHTML」に、CSSは
「外観」▶︎「カスタマイズ」▶︎「追加CSS」に貼り付けてください

ただ、このチェックマークはいろんな人が使っていて、あまり被りたくないので自分はCSSをカスタマイズしています。

その方法は最後に紹介しますね。

というわけで、この記事ではaffingerでのチェックマークの使い方を詳しく紹介していきます。

【Affinger6】チェックマークの表示方法

本記事では、「ver.4.7.0」のFont awesomeを使用して解説していきます。

＊「ver4.7.0」は、affinger公式が推奨しているので

手順はこちら。

③：コードをコピー

まずは、以下のHTMLコードをコピーしてください。

<p>
 <i class="fa fa-check" aria-hidden="true" style="color:#4682b4
;" ></i>
 <span class="check-txt">このHTMLをコピーして、、、</span> 
</p>

④：ブロックエディタに貼り付ける

①：左上の「＋」から

②：「カスタム HTML」を選択。

③：コピーしたコードを貼り付ける

、、、<span・・・check-txt">ここに文字を入れると、、、</span>

⑤：Font Awesomeが反映される

とりあえずこれでチェックマークの表示が完了です。

⑤：追加CSSにコードを加える

あとは、以下のコードをコピペしてください。

.check-txt {
font-weight: bold;
font-size: 16px;
}

これを「外観」▶︎「カスタマイズ」▶︎「追加CSS」に貼り付けたら完了です！

こんな感じのチェックマークになればOK！！

＊「font-size」は文字の大きさなので、自分の好きな大きさを選んでください

【Font Aewsome】CSSでデザインを整える

先ほどのチェックのデザインですが、このままだと全くオシャじゃないです。

そこで、ちょっとデザインを整えていきましょう。

チェックの大きさを変える

デフォルトだとちょっと小さいので、「fa-lg」を加えてサイズを大きくします。

「fa-lg」を追加すると、、、

大きくなりましたね。

先ほどは「fa-lg」でしたが、他にも大きさがあります。

チェックマークの大きさの種類

自分でサイズを入力することで、好きな大きさに変えられますよ。

チェックマークの色を変える

チェックマークの色は自分で好きな色を選びましょう。

「style=""」の部分を変更することで色を選択できます。

<p>
 <i class="fa fa-check" aria-hidden="true" style="color:#4682b4
;" ></i>
 <span class="check-txt">このHTMLをコピーして、、、</span> 
</p>

↑「style="ここにカラーコードを入れる"」

色は「原色大辞典」で探すとほぼほぼ見つかるはずです。

＃も含めてコピペしましょう。

テキストの色を変える

自分はデフォルトのままですが、一応テキストの色を変更することもできます。

こんな風に色を変えれます！

やり方は先ほどのCSSコードに、

.check-txt {
font-weight: bold;
font-size: 16px;
color: red;
}

「color: red;」を追加すると、、、

テキストが赤くなりますね

こちらも「原色大辞典」で探せばいい感じの色が見つかります。

KedyBlog風のチェックマークにするには？

自分は他のサイトと差別化するために、少々デザインをカスタマイズしています。

こんな感じのチェック

一応、Font Awesomeにも同じデザインがあるようですが、なぜか背景が白くなってしまうのでCSSをいじってるわけです！

ではやり方を説明します！

①：まずは以下のhtmlをコピーして、カスタムHTMLに貼り付けます。

<p class="check-mark"><i class="fas fa-check my-check-o"></i><span class="huto">こんな感じのチェック</span></p>

②：続いて以下のCSSをコピー

.my-check-o{
	background-color: #444444;
	margin-right: 10px;
	font-size: 11px;
	border-radius: 50%;
	color: white;
	padding: 4.5px;
}

これを「外観」▶︎「カスタマイズ」▶︎「追加CSS」に貼り付けます。

これで完了です。

簡単ですよね。

色は、「background-color」 をお好きな色に変更してください！

「原色大辞典」で探すと、

こんな感じの色が作れます！！

まとめ

ここまでご覧いただきありがとうございます。

まとめると、affingerのブロックエディタでチェックマークを使うには、

以下のHTMLをコピーして、カスタムHTMLに貼り付けて、、、

<p>
 <i class="fa fa-check" aria-hidden="true" style="color:#4682b4
;" ></i>
 <span class="my-check">このHTMLをコピーして、、、</span> 
</p>

そしたら以下のCSSをコピー して、追加CSSに貼り付けるだけ。

.my-check {
font-weight: bold;
font-size: 16px;
}

でしたね！

Font Awesomeを使えばサイトをオシャレにできるので、ぜひぜひチェレンジしてみてください！

それでは今回は以上です。

ちょっと宣伝です

ココナラでaffingerのお悩み解決を出品しました！

値段は500円です。

招待コード【7jvxkv】を入れて登録すれば300ポイントもらえるので、ぜひ活用してください！