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

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

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

Font Awesomeを使うと、、、

こんなチェックマークとか

こんなチェックマークとか

Font Awesomeを使うと、、、

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

FontAwesomeとは?

FontAwesomeは、無料で650以上アイコンが利用できる、オープンソースのウェブフォントです。フォントスクリプトを使用するウェブサイトの中では約4割のユーザーが使用しています。

今回はこの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」でしたが、他にも大きさがあります。

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

何もいじらない(1倍)

fa-lg (1.3倍)

fa-2x (2倍)

fa-3x (3倍)

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

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

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

「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」 をお好きな色に変更してください!

原色大辞典」で探すと、

カラーコードは【#006400】

カラーコードは【#ffd700】

カラーコードは【#dc143c】

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

まとめ

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

まとめると、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のお悩み解決します ちょっとした相談でも全然OK!

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

値段は500円です。

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

-affinger