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

2022年3月27日

 

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

 

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

 

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

 

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

 

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

 

本記事の内容

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

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

 

 

   当ブログの管理者紹介

 

ショータ(@rutinelabo

ルーティンラボにて、ブログ運営中

(コツコツ収益化につながってます)

プログラミングなどで副業にも挑戦

(Web制作・デザイン、アプリ開発など)

ライフハックに関する情報も発信!

(完全に趣味で楽しみながらアウトプット中)

 

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

 

 

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

 

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

 

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

 

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

 

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

 

step
1
HTMLコードの貼り付け

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

 

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

 

 

 

step
2
CSSコードの追加

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コードにて、編集することで細かいところまでカスタマイズが行き届き、凝ったデザインも可能になります

 

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

 

CSSの参考となる書籍も紹介しておきますので、ぜひ!

 

created by Rinker
¥2,178 (2022/09/26 14:53:04時点 楽天市場調べ-詳細)

 

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER, CSS
-,