
ブログ界隈で活躍する「Tsuzukiさん」のような見出し風チェックマークを出したい。
Tsuzukiさんのようにかっこよく見出しを作りたい。
アフィンガー で”チェックマークのみ”を探してみたけど中々みつからない。
この記事では、このような悩みを解決します。
僕自身Tsuzukiさんに憧れがあって、ブログをはじめました。
同じアフィンガー を使っているのに「見出し風のチェックマーク」をどうやって出しているのか疑問でした。
ですが、色々調べて本を買ってやっとたどりつきました。

この記事では、前半に「見出し風チェックマーク」の出し方、後半では「チャックマークの色や大きさの変更」や「ワンクリックで簡単にチェックマークを出現させる方法」について紹介します。
この記事を読み終える頃には、Tsuzukiさんのような「見出し風チェックマーク」が出せるでしょう。
また、色や大きさを変更してオリジナルの見出し風チェックマークを出せると思いますよ。
ぜひ最後までご覧ください。
目次
【Tsuzuki Blog風】見出し風のチェックマークの作り方

結論以下のコードをコピーすれば、【Tsuzuki Blog風】見出し風のチェックマークを出せるとができます。
<i class="fa fa-check fa-2x" style="color: deepskyblue;" aria-hidden="true"></i><span class="huto"> ここに入力</span>
簡単ですよね。
コピーして貼り付ければ、以下のようになります。
チェックマーク
そして、Tsuzukiさんのようにボックスと組み合わせるとこんな感じになります。
チェックマーク
グレーボックス:Tsuzukiさん風
このチェックマークを使えばTsuzukiさんのように見出しを作れます。
まずは、形から入るのも大事。

上のTsuzukiさんブログですが、そっくりですよね。
これでTsuzukiさんと同じ武器を手に入れました。
ブログ初心者は形から入るのも大事ですよ。
この見出し風チェックマークはどういう仕組み?
このチェックマークは画像ではありません。
「WEBアイコンフォント」の「Font Awesome」というものを使っています。
「Font Awesome」とはアイコンを文字として扱うことを可能としたツール。
画像ではなく文字なので、大きさや色などを変更することが可能です。
アフィンガー のテーマを使ってる人なら以下の所にありますよ。
別途プラグインを入れる必要はありません。

こちらをクリックして入って「Font Awesome」に入ります。

次に「チェックマーク」を探します。
中々見つからないと思うので検索窓に「check」と入力して検索するとすぐに見つかりますよ。

チェックマークが見つかったら、クリックしてみてください。
そしたら、以下のところに飛びます。

そしたらこのようなコード(<i class="fa fa-check" aria-hidden="true"></i>)があると思います。
これがチェックマークのコードです。
以下の画像を参考にしてください。

このコードが基準となるコードです。
これに一手間加えると、チェックマークを大きくしたり、色を変更できたりします。
では次で紹介します。
見出し風チェックマークの大きさ変更の方法
先ほどのチェックマークのコードに大きさを指定するコードを追加します。
【基準のコード】
(<i class="fa fa-check" aria-hidden="true"></i>)
↓
【大きさを指定するコードを追加】
<i class="fa fa-check fa-lg" aria-hidden="true"></i>
追加するコードは「fa-lg」の部分。
この部分を変更すると大きさが変わります。
fa-lg (1.3倍)
fa-2x (2倍)
fa-3x (3倍)
fa-4x (4倍)
fa-5x (5倍)
このように『lg〜5x』と数字が上がっていくとチェックマークが大きくなります。
おすすめのサイズは、「2x」です。
Tsuzukiさんもこのサイズだと思います。
見出し風チェックマークの色の変更の方法
次はチェックマークの色の変更の方法です。
色の変更では、CCSを使わずに先ほどのコードに少し追加するだけで、好きな色に変更できます。
【大きさを指定したコード】
<i class="fa fa-check fa-lg" aria-hidden="true"></i>
↓
【色を指定したコード(今回は水色)】
<i class="fa fa-check fa-lg" style="color: deepskyblue;" aria-hidden="true"></i>
追加したコードは、「 style="color: deepskyblue;" 」の部分。
このコードを追加するだけで色が変わります。
簡単ですよね。
ただここで少し注意するポイントがあります。
色のコードを追加するときには、「#〇〇〇〇」のような英数字ではなく、色の名前で指定する必要があります。
今回の色は、「あざやかな青系の色」。
英数字だと「#00bfff」ですが、色の名前では「deepskyblue」となります。
間違えて英数字で色を指定すると何も起きないので注意。
色の指定を「ピンク」や「緑」、「黄色」のコードを指定すると、チェックマークの色も変わりますよ。
Pink
Green
Yellow
色でブログの印象は変わると思うので、自分らしいオリジナルのチェックマークにしてくださいね。
色の名前はこちらのサイトを参考にしてください。
綺麗に分類されているのでわかりやすいです。
【Tsuzuki Blog風】見出し風のチェックマークをワンクリックで出現させよう

冒頭で紹介した以下のコードは、ワードプレスの「テキストモード」にして追加しないとチェックマークは出現しません。
※ビジュアルモードだと文字列として認識されるため。
<i class="fa fa-check fa-lg" style="color: deepskyblue;" aria-hidden="true"></i><span class="huto"> 本記事の内容</span>
また、このコードを一回一回コピーして貼り付けするのもめんどくさいですよね。
そこでプラグインの『AddQuicktag』を使います。
これを使うことで、記事を書くときにワンクリックでチェックマークを出せることができる。
やり方はすごく簡単です。
※AddQuicktagが入ってない場合は入れて有効化してください。

step
1まずは、設定の部分の「AddQuicktag」をクリック!
step
2次に、「ボタン名」「ダッシュアイコン」「ラベル名」に名前を設置。
基本的にボタン名だけでいいと思います。
※わかりやすい名前にしてください。今回は、水色のチェックマークと設定しました。
step
3次は、「開始タグ」と「終了タグ」を設定していきます。
ここでは、自分が書いたコードを使います。
<i class="fa fa-check fa-lg" style="color: deepskyblue;" aria-hidden="true"></i><span class="huto"> 本記事の内容</span>
開始タグには
「<i class="fa fa-check fa-lg" style="color:deepskyblue;"aria-hidden="true"></i><span class="huto"> 本記事の内容」
と記入します。
終了タグには、
「</span>」
を記入します。
step
4最後に一番右端のチェックボタンを押して保存ボタンを押せばOK。
記事を書く画面に移動するとこのようになります。
これでワンクリックで【Tsuzuki Blog風】見出し風のチェックマークの設置が完了です。
少し手間はかかりますが、コピーして貼り付ける行為ではなく、ワンクリックでチェクマーク が出現するので、記事の執筆のスピードも上がると思います。
まとめ:【Tsuzuki Blog風】見出し風のチェックマークで見出しを書いてみよう!

今回の記事では、【Tsuzuki Blog風】見出し風のチェックマークを簡単に設定できる方法を紹介しました。
以下が本記事の要約になります。
本記事の要約
- 【Tsuzuki Blog風】見出し風のチェックマークを設置
- チェックマークの大きさの変更の方法
- チェックマークの色の変更の方法
- 「AddQuicktag」でワンクリックでチェックマークを出す
こんな感じです。
【Tsuzuki Blog風】見出し風のチェックマークを手に入れたとしても、記事の内容が伴わなければ意味がありません。
コンテンツの質も学びましょう。
本記事を書く際にHTMLやCSSが全くわからない人におすすめの本があったので紹介します。
僕自身もこの本を読むまではHTMLやCSSの意味がわからなかったのですが、画像付きで丁寧な解説付きなので、理解できるようになりました。
今後ブログを本気でやるんだったら少しでも学んでおきたいHTMLとCSSを1冊にまとめた本なのでおすすめですよ。