AFFINGER6

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

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

 

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

 

 ←このチェックマーク

 

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

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

 

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

流れに添って設定すればサクッと使えるようになるので、気になる方は参考にされてください。

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

 

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

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

 

  • 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」でなく色の名前で入力しましょう。

 

 

おまけ:色々なマークを表示する方法

 

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

「Font Awesome」のサイトで表示できるアイコンの例

 

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

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

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

 

 Twitterマーク

 

 

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

 

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

 

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

まだブログを開設していないといった方は、下記記事でブログの始め方をシンプルにまとめていますので、興味のある方は是非ご覧ください。

 

関連記事
【簡単】ConoHa WINGでWordPressブログの始め方

続きを見る

 
 
今回の記事が参考になれば幸いです。

では、またお会いしましょう〜!

 

 

-AFFINGER6
-