AFFINGERでチェックマークの見出し表示方法【コピペするだけ】

本記事の内容 記事を書いた人

僕は、AFFINGER5に変えてから思ったことは、カスタマイズの幅が広いということでした。なんでもできるのでカスタマイズが楽しくなってきている自分がいます。

そんな中で、さまざまなカスタマイズ方法を見つけようとAFFINGERユーザーの方のブログを参考にさせて頂いているうちに、気が付きました。

「チェックマークのみの見出し」使っている人多くない？ということ。

← このマークのことです。

僕自身、色々カスタマイズして探してみましたが、AFFINGER本体の機能ではないことがわかりました。どうやら、「WEBアイコンフォント」の「Font Awesome」を使用して表示するようです。

>>Font Awesomeにアクセス

前説が長くなりましたが、気になるチェックマークの表示方法をご紹介していきます。

チェックマークのコード【コピペOK】

チェックマークのコードは、本来「WEBアイコンフォントのFont Awesome」からコードを取得する必要があります。

取得したチェックマークのコードは、以下のようになります。

これだけでは、ただのマークになってしまうので、参考に当サイトで使用しているコードを以下に記載しておきます。

上記のコードは、コピペしてOKです。

このコードを基本文として色や大きさをカスタマイズしましょう。（カラー・サイズ変更方法は後で説明します。）

チェックマークの表示方法

チェックマークの表示方法について、紹介していきます。

グーテンベルクの場合

手順1：記事作成画面を開き、ブロック選択ボタンをクリック。

手順2：ブロックの中から「HTML」ブロックを選択し、貼り付けましょう。

手順3：投稿画面全体の「プレビュー」を表示して、画像のように表示されていたらOKです。

あとは、コードの「ここに文章をいれてください。」の部分を変更して使用してください。

クラシックエディターの場合

手順1：投稿画面を開き、「テキスト」をクリックします。

手順2：下記のコードをコピーしましょう。

※上記のコードは、クラシックエディター用のコードです。コピペできるように<p>タグで挟んでいます。

手順3：コードを貼り付けして、「ビジュアル」をクリックしましょう。

手順4：下の画像のようになっていたらOKです。

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

つづいて、チェックマーク部分のサイズ変更を紹介します。

変更自体は、超簡単です。

上記コードの「fa-lg」の部分を、下記のコードに変更するだけです。

適用した場合のサイズ別の例　↓

基本サイズです

サイズが、1.3倍です

サイズが、2倍です

サイズが、3倍です

サイズが、4倍です

以上のように、お好みのサイズに変更して使ってみましょう。

チェックマークのカラー変更方法

最後に、チェックマークのカラーについて変更していきましょう。

実は、カラー変更も簡単なんです。

上記コードの「color :」の後の色名を変更するだけです。

必ず、「色名」で指定するようにしましょう。

カラーを変更した場合の例はこちら　↓

　色名：cornflowerblue

　色名：darkcyan

　色名：gold

　色名：tomato

　色名：violet

好きなカラーは、下記のサイトで探してみてください。

>>原色大辞典

※「原色大辞典」に載っている「色名」のみ、HTMLで表示されます。

というわけで、今回は、AFFINGERでチェックマークの見出し表示方法【コピペするだけ】をご紹介してきました。

今回はここまでです。

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