【AFFINGER6】有名ブロガー風にチェックマークを表示する方法

あの有名なブロガーさんたちが記事の文中に使っているチェックマークはどうやったら使えるの？？

今回の記事はこんな疑問を解決していきます。

有名ブロガーである、ManablogやTsuzukiblogなどでは、投稿記事の注目箇所にチェックマークが使われており、読者のユーザーにとても読みやすいコンテンツになっています。

今回は、有名ブロガーさんにマネて、チェックマークの使用方法と色や大きさのカスタマイズを紹介します。

基本的にはCSSコードのコピペでOKですよ！

本記事の内容

有名ブロガー風のチェックマークの作成方法

チェックマークをCSSコードでカスタマイズ

AFFINGERで有名ブロガー風なチェックマークを出す方法

今回は以下のようなチェックマークの作成方法を紹介します。

←こんな感じのチェックマーク

作成方法は基本的にHTMLテキストにコードの貼り付けとCSSにてカスタマイズで完了できます。

基本的には、コードをコピペした後に、自分の好みに合わせて大きさや配色のカスタマイズを行なってみてください。

以下の手順で作業完了です！

step
1HTMLコードの貼り付け

投稿画面より、以下のコードを「HTMLテキスト」の項目に貼り付けます。

<p>
<i class="fa fa-check fa-1g" style="color: #4965b2;" aria-hidden="true"></i>
<span class="check">←チェックマークの貼り付け</span>
</p>

step
2CSSコードの追加

CSSコードをカスタマイズを行います。「外観」→「カスタマイズ」より、「追加CSS」に移動して、以下のCSSコードを追加しましょう。

/*チェックマークのカスタマイズ*/
.check1 {
   font-size: 20px;
   font-weight:  bold;
   color: #333333;
}

以上のステップで、チェクマークの追加が可能です。

簡単に作業が完了したと思います

AFFINGER以外でも使用できるので、他のテーマを使用するときでも使って下さい！

続いて、チェックマークをカスタマイズする方法について解説していきます。

今回紹介するのはチェックマークの大きさと配色のカスタマイズ方法です。

チェックマークの大きさの変更

チェックマークごとに大きさを変更する場合には、

 ショートコード
<p>
<i class="fa fa-check fa-1g" style="color: #4965b2;" aria-hidden="true"></i>
<span class="check">←チェックマークの貼り付け</span>
</p>

の赤色の項目を「fa-1g」から「fa-5g」までの変更可能で、チェックマークの大きさの倍率が変更されます。

また、CSSにて大きさの変更を行う場合には、

 ショートコード
.check1 {
font-size: 20px;
font-weight: bold;
color: #333333; }

「font-size」の値を大きくすることで、対象のチェックマークの大きさが変更されます。

チェックマークの配色の変更

 ショートコード
.check1 {
font-size: 20px;
font-weight: bold;
color: #333333;
}

チェックマークの配色を変更する際にはCSSコードの「color」を変更することで好きに色を変えることができます。

カラーコードなどで検索をすることで、参考となる配色が見つけられると思うので、ぜひ試してみてください。

ゴール

今回はAFFINGERにて使用可能な「有名ブロガー風チェックマークの紹介」でした。

CSSコードにて、編集することで細かいところまでカスタマイズが行き届き、凝ったデザインも可能になります。

また、デザインを意識することで、読者のユーザーの方にもわかりやすくコンテンツにもなるので、ぜひ試してみましょう。

参考トップページのカスタマイズに関する記事かこちら

参考アップデートやインストール・プラグインに関する記事はこちら

参考投稿記事のカスタマイズも関する記事はこちら

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら