ブログ

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

アフィンガー 見出し風チェックマーク

ブログ界隈で活躍する「Tsuzukiさん」のような見出し風チェックマークを出したい。

Tsuzukiさんのようにかっこよく見出しを作りたい。

アフィンガー で”チェックマークのみ”を探してみたけど中々みつからない。

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

僕自身Tsuzukiさんに憧れがあって、ブログをはじめました。

同じアフィンガー を使っているのに「見出し風のチェックマーク」をどうやって出しているのか疑問でした。

ですが、色々調べて本を買ってやっとたどりつきました。

AKIHIRO

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

この記事を読み終える頃には、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 Blog チェックマーク見出し
Tsuzuki Blog

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

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

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

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

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

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

 

 

「Font Awesome」とはアイコンを文字として扱うことを可能としたツール。

画像ではなく文字なので、大きさや色などを変更することが可能です。

 

 

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

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

アフィンガー のアイコン(Font Awesome)

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

Font Awesome入り口

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

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

Font Awesome(チェックマーク)

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

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

Font Awesome(チェックマーク画面1)

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

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

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

Font Awesome(チェックマーク画面2)

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

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

では次で紹介します。

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

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

 

【基準のコード】

(<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

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

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

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

>>color-sample.com

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

アフィンガー 見出し風チェックマークをワンクリックでだす

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

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

 

<i class="fa fa-check fa-lg" style="color: deepskyblue;" aria-hidden="true"></i><span class="huto"> 本記事の内容</span>

 

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

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

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

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

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

アフィンガー AddQuicktag1

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

 

 

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

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

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

 

アフィンガー AddQuicktag1

 

 

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>」

 

を記入します。

 

アフィンガー AddQuicktag2

 

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

 

アフィンガー AddQuicktag3

 

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

アフィンガー AddQuicktag4

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

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

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

Tsuzukiblog風アフィンガー 見出し風チェックマーク

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

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

本記事の要約

  • 【Tsuzuki Blog風】見出し風のチェックマークを設置
  • チェックマークの大きさの変更の方法
  • チェックマークの色の変更の方法
  • 「AddQuicktag」でワンクリックでチェックマークを出す

 

こんな感じです。

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

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

 

Tsuzuki Blogにコンテンツの質を学びに行く!!

 

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

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

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

この記事が気に入ったらフォローしよう!!

follow me

-ブログ
-

© 2021 AKIHIROs P4U Blog