色んなブログを見ていると、下記のようなチェックマークをよく見かけます。
←このチェックマークいったいどうやって出すのだろう…。
そう感じている方も、いらっしゃるのではないでしょうか？
この記事では、チェックマークの表示方法について解説していきます。
流れに添って設定すればサクッと使えるようになるので、ぜひ使ってみてくださいね。
＼ SEOに優れたWordPressテーマ ／
※ 5,000円相当のプラグイン付き！
チェックマークを表示する方法
チェックマークはWEBアイコンである「Font Awesome」のプラグインを使って表示します。
３つの手順で表示させることができます。
順に解説しますね。
Font Awesomeのプラグインをインストール
まず初めに、「Font Awesome」のプラグインをインストールします。
手順「プラグイン」→「Font Awesome」でキーワード検索
CSSを追加する
「外観」→「カスタマイズ」→「追加CSS」で以下のコードを入力します。
.my-skyblue {color: #6c9fce;}
HTMLを入力
チェックマークを表示させるHTMLコードがこちら。
<i class="fa fa-check fa-lg" style="color: cornflowerblue;" aria-hidden="true"> </i><span class="huto">ここにテキストを入力</span>
最後に、このコードを記事内に入力していきます。
「カスタムHTML」を選び、先ほどのコードをコピペします。
色やサイズは好きなものに変更することができますよ。
次にチェックマークのサイズと、色変更についてご紹介していきますね。
チェックマークのサイズ変更方法
サイズ変更もとてもカンタンに行えます。
<i class="fa fa-check fa-lg"…
コードの「fa-lg」の部分を、下記コードに変更します。
サイズ変更コード
- fa-lg (1.3倍)
- fa-2x (2倍)
- fa-3x (3倍)
- fa-4x (4倍)
- fa-5x (5倍)
実際に表示すると、このようなサイズ感です。
標準サイズ 2倍サイズ 3倍サイズ 4倍サイズ 5倍サイズチェックマークの色変更
お次に、色の変更をしていきましょう。
コードの「"color: cornflowerblue;"」の色名を変更していきます。
好きな色はについては「原色大辞典」で探してみてくださいね。
色変更をすると、このように表示されます。
コーラル オレンジ ライトグリーン ライトスカイブルー シルバーココに注意
色名の入力は、16進数「＃FFFFFF」でなく色の名前で入力しましょう。
【補足】色々なマークを表示する方法
チェックマーク以外にも、好きなマークを表示させることができます。
「<i class="fa fa-check fa-lg"」の部分を「Font Awesome」のサイトから変更します。
実際に変更してみると、こんなマークも表示できます。
Twitterマークチェックマークを活用して、見やすいブログを作ろう
今回は、AFFINGER6でチェックマークを表示させる方法について解説しました。
チェックマークがあると、記事全体が読みやすくなります。
見出しの中の重要ポイントなど様々な場面で使えるので、ぜひ参考にしてみてください。
まだブログを開設していないといった方は、下記記事でブログの始め方をまとめていますので、こちらもぜひご覧ください。
他にもAFFINGER6の設定項目については、こちらの記事も参考にどうぞ。
今回は以上です。
最後までご覧いただきありがとうございました。
