【Tsuzuki Blog風】アフィンガー で見出し風チェックマーク作り方を10枚の画像で解説

この記事では、このような悩みを解決します。

この記事では、前半に「見出し風チェックマーク」の出し方、後半では「チャックマークの色や大きさの変更」や「ワンクリックで簡単にチェックマークを出現させる方法」について紹介します。

この記事を読み終える頃には、Tsuzukiさんのような「見出し風チェックマーク」が出せるでしょう。

また、色や大きさを変更してオリジナルの見出し風チェックマークを出せると思いますよ。

ぜひ最後までご覧ください。

【Tsuzuki Blog風】見出し風のチェックマークの作り方

結論以下のコードをコピーすれば、【Tsuzuki Blog風】見出し風のチェックマークを出せるとができます。

簡単ですよね。

コピーして貼り付ければ、以下のようになります。

チェックマーク 

そして、Tsuzukiさんのようにボックスと組み合わせるとこんな感じになります。

チェックマーク 

このチェックマークを使えばTsuzukiさんのように見出しを作れます。

まずは、形から入るのも大事。

上のTsuzukiさんブログですが、そっくりですよね。

これでTsuzukiさんと同じ武器を手に入れました。

ブログ初心者は形から入るのも大事ですよ。

この見出し風チェックマークはどういう仕組み？

このチェックマークは画像ではありません。

「WEBアイコンフォント」の「Font Awesome」というものを使っています。

 

 

アフィンガー のテーマを使ってる人なら以下の所にありますよ。

別途プラグインを入れる必要はありません。

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

次に「チェックマーク」を探します。

中々見つからないと思うので検索窓に「check」と入力して検索するとすぐに見つかりますよ。

チェックマークが見つかったら、クリックしてみてください。

そしたら、以下のところに飛びます。

そしたらこのようなコード（<i class="fa fa-check" aria-hidden="true"></i>）があると思います。

これがチェックマークのコードです。

以下の画像を参考にしてください。

このコードが基準となるコードです。

これに一手間加えると、チェックマークを大きくしたり、色を変更できたりします。

では次で紹介します。

見出し風チェックマークの大きさ変更の方法

先ほどのチェックマークのコードに大きさを指定するコードを追加します。

追加するコードは「fa-lg」の部分。

この部分を変更すると大きさが変わります。

 fa-lg (1.3倍)

 fa-2x (2倍)

 fa-3x (3倍)

 fa-4x (4倍)

 fa-5x (5倍)

このように『lg〜５x』と数字が上がっていくとチェックマークが大きくなります。

おすすめのサイズは、「2x」です。

Tsuzukiさんもこのサイズだと思います。

見出し風チェックマークの色の変更の方法

次はチェックマークの色の変更の方法です。

色の変更では、CCSを使わずに先ほどのコードに少し追加するだけで、好きな色に変更できます。

追加したコードは、「 style="color: deepskyblue;" 」の部分。

このコードを追加するだけで色が変わります。

簡単ですよね。

ただここで少し注意するポイントがあります。

色のコードを追加するときには、「＃〇〇〇〇」のような英数字ではなく、色の名前で指定する必要があります。

今回の色は、「あざやかな青系の色」。

英数字だと「#00bfff」ですが、色の名前では「deepskyblue」となります。

間違えて英数字で色を指定すると何も起きないので注意。

色の指定を「ピンク」や「緑」、「黄色」のコードを指定すると、チェックマークの色も変わりますよ。

 Pink

 Green

 Yellow

色でブログの印象は変わると思うので、自分らしいオリジナルのチェックマークにしてくださいね。

色の名前はこちらのサイトを参考にしてください。

綺麗に分類されているのでわかりやすいです。

＞＞color-sample.com

 【Tsuzuki Blog風】見出し風のチェックマークをワンクリックで出現させよう

冒頭で紹介した以下のコードは、ワードプレスの「テキストモード」にして追加しないとチェックマークは出現しません。

※ビジュアルモードだと文字列として認識されるため。

また、このコードを一回一回コピーして貼り付けするのもめんどくさいですよね。

そこでプラグインの『AddQuicktag』を使います。

これを使うことで、記事を書くときにワンクリックでチェックマークを出せることができる。

やり方はすごく簡単です。

※AddQuicktagが入ってない場合は入れて有効化してください。

step
1まずは、設定の部分の「AddQuicktag」をクリック！

 

 

step
2次に、「ボタン名」「ダッシュアイコン」「ラベル名」に名前を設置。

基本的にボタン名だけでいいと思います。

※わかりやすい名前にしてください。今回は、水色のチェックマークと設定しました。

 

 

 

step
3次は、「開始タグ」と「終了タグ」を設定していきます。

ここでは、自分が書いたコードを使います。

開始タグには

と記入します。

 

終了タグには、

を記入します。

 

 

step
4最後に一番右端のチェックボタンを押して保存ボタンを押せばOK。

 

 

記事を書く画面に移動するとこのようになります。

これでワンクリックで【Tsuzuki Blog風】見出し風のチェックマークの設置が完了です。

少し手間はかかりますが、コピーして貼り付ける行為ではなく、ワンクリックでチェクマーク が出現するので、記事の執筆のスピードも上がると思います。

まとめ：【Tsuzuki Blog風】見出し風のチェックマークで見出しを書いてみよう！

今回の記事では、【Tsuzuki Blog風】見出し風のチェックマークを簡単に設定できる方法を紹介しました。

以下が本記事の要約になります。

 

こんな感じです。

【Tsuzuki Blog風】見出し風のチェックマークを手に入れたとしても、記事の内容が伴わなければ意味がありません。

コンテンツの質も学びましょう。

本記事を書く際にHTMLやCSSが全くわからない人におすすめの本があったので紹介します。

僕自身もこの本を読むまではHTMLやCSSの意味がわからなかったのですが、画像付きで丁寧な解説付きなので、理解できるようになりました。

今後ブログを本気でやるんだったら少しでも学んでおきたいHTMLとCSSを１冊にまとめた本なのでおすすめですよ。