AFFINGER6でチェックマークを表示する方法【コピペOK】

色んなブログを見ていると、下記のようなチェックマークをよく見かけます。

　←このチェックマーク

いったいどうやって出すのだろう…。

そう感じている方も、いらっしゃるのではないでしょうか？

この記事では、チェックマークの表示方法について解説していきます。

流れに添って設定すればサクッと使えるようになるので、ぜひ使ってみてくださいね。

チェックマークを表示する方法

チェックマークはWEBアイコンである「Font Awesome」のプラグインを使って表示します。

３つの手順で表示させることができます。

• Font Awesomeのプラグインをインストール
• CSSを追加する
• HTMLを入力

順に解説しますね。

Font Awesomeのプラグインをインストール

まず初めに、「Font Awesome」のプラグインをインストールします。

手順「プラグイン」→「Font Awesome」でキーワード検索

CSSを追加する

「外観」→「カスタマイズ」→「追加CSS」で以下のコードを入力します。

HTMLを入力

チェックマークを表示させるHTMLコードがこちら。

最後に、このコードを記事内に入力していきます。

「カスタムHTML」を選び、先ほどのコードをコピペします。

色やサイズは好きなものに変更することができますよ。

次にチェックマークのサイズと、色変更についてご紹介していきますね。

チェックマークのサイズ変更方法

サイズ変更もとてもカンタンに行えます。

　

コードの「fa-lg」の部分を、下記コードに変更します。

実際に表示すると、このようなサイズ感です。

標準サイズ 2倍サイズ 3倍サイズ 4倍サイズ 5倍サイズ

チェックマークの色変更

お次に、色の変更をしていきましょう。

コードの「"color: cornflowerblue;"」の色名を変更していきます。

好きな色はについては「原色大辞典」で探してみてくださいね。

》原色大辞典のサイトはこちら

色変更をすると、このように表示されます。

コーラル オレンジ ライトグリーン ライトスカイブルー シルバー

【補足】色々なマークを表示する方法

チェックマーク以外にも、好きなマークを表示させることができます。

「<i class="fa fa-check fa-lg"」の部分を「Font Awesome」のサイトから変更します。

》「Font Awesome」サイトはこちら

実際に変更してみると、こんなマークも表示できます。

　Twitterマーク

チェックマークを活用して、見やすいブログを作ろう

今回は、AFFINGER6でチェックマークを表示させる方法について解説しました。

• Font Awesomeのプラグインをインストール
• CSSを追加する
• HTMLを入力

チェックマークがあると、記事全体が読みやすくなります。

見出しの中の重要ポイントなど様々な場面で使えるので、ぜひ参考にしてみてください。

まだブログを開設していないといった方は、下記記事でブログの始め方をまとめていますので、こちらもぜひご覧ください。

他にもAFFINGER6の設定項目については、こちらの記事も参考にどうぞ。

今回は以上です。

最後までご覧いただきありがとうございました。