色んなブログを見ていると、下記のようなチェックマークをよく見かけます。
←このチェックマーク
いったいどうやって出すのだろう…。
そう感じている方も、いらっしゃるのではないでしょうか？
この記事では、チェックマークの表示方法について解説していきます。
流れに添って設定すればサクッと使えるようになるので、気になる方は参考にされてください。
チェックマークを表示する方法
チェックマークはWEBアイコンである「Font Awesome」のプラグインを使って表示します。
３つの手順で表示させることができます。
- Font Awesomeのプラグインをインストール
- CSSを追加する
- HTMLを入力
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マーク
チェックマークを活用して、見やすいブログを作ろう
チェックマークがあると、記事全体が読みやすくなります。
見出しの中の重要ポイントなど様々な場面で使えるので、ぜひ参考にされてくださいね。
まだブログを開設していないといった方は、下記記事でブログの始め方をシンプルにまとめていますので、興味のある方は是非ご覧ください。
-
【簡単】ConoHa WINGでWordPressブログの始め方
続きを見る
今回の記事が参考になれば幸いです。
では、またお会いしましょう〜！
