AFFINGER5

AFFINGER5で”マナブログ風”のチェックを表示させる方法【カスタマイズ】

この記事を書いた人

 

こんな人に読んで欲しい

悩む人
AFFINGER5でチェックマークを表示したい
悩む人
マナブログのチェックマークを真似したい
悩む人
CSSの知識がないけど出来る?

 

みなさんこんにちは!あーる(@aru20r)です。

本記事では「AFFINGER5でマナブログ風のチェックを表示させる方法【カスタマイズ】」というテーマで解説していきます。

AFFINGER5を使用している人で、マナブさんが使用しているチェックマークを使いたい人が多いと思います。

この記事を見れば、簡単に”マナブログ風チェックマーク”を表示することができるので参考にしてください。

AFFINGER5にマナブログ風チェックマークを表示させる方法

Are you planning to make your own #website for your business? Here are some pros and cons that might help you decide.

AFFINGER5にチェックマークを表示するには、3つの手順が必要です

チェックマーク表示の手順

  1. AFFINGER5の追加CSSにコードを挿入
  2. AFFINGER5で使用するパーツのカスタマイズ
  3. "AddQuicktag"を使用し、簡単に使用できるように設定

 

AFFINGER5の追加CSSにコードを挿入

まずは、追加CSSにコードを挿入していきます。

追加CCSは、「ワードプレスダッシュボード→外観→カスタマイズ→追加CSS」で開くことができます。

チェックコード

.st-marumozi {
font-size: 20px;
}

.fa-check {
color: #1e73be;//好きなカラーコードを入力
}

上記のCSSコードを追加CSSに入力してください。

メモ

”.fa-check”の部分に好きなカラーコードを入力することで、チェックマークの色を変更することができます。

今回は青色のチェックマークにしたいので、カラーコードは”#4169e1”にします。

青色のチェックコード

.st-marumozi {
font-size: 20px;
}

.fa-check {
color: #4169e1;//青のカラーコード
}

青色のチェックマークにしたい人は、上記のコードをコピーして追加CSSに挿入しましょう。

上記のようにコードを挿入し、公開を押せばOKです。

ポイント

上記のコードにある”好きなカラーコードを入力”という文字は、分かりやすくするためだけに書いてあるので、カラーを決めたら消して問題ないです。

※無駄な文字があると容量が重くなり、読み込み時間が遅くなってしまいます。

 

AFFINGER5で使用するパーツのカスタマイズ

チェックマークを表示させるには、AFFINGER5に最初から入っている”記事パーツ”を使用します。

今回は、”まるもじ小”という記事パーツのコードを使用していきます。

まるもじ小のコードは、「テキストパーツ→まるもじ(小)→基本」で開くことができます。

まるもじ小のコードはこちらになります。

 まるもじ(小)タグ
[st-marumozi fontawesome="" bgcolor="#f3f3f3" bordercolor="" color="#000000" radius="30" margin="0 10px 0 0" myclass=""][/st-marumozi]

 

ですが、ただの”まるもじコード”では使用できないため、カスタマイズする必要があります

 カスタマイズ済みのタグ
[st-marumozi-big fontawesome="fa-check" bgcolor="#fff" bordercolor="" color="#000000" radius="30" margin="0 10px 10px 0"][/st-marumozi-big]

 

上記の、カスタマイズしたコードを記事に貼り付けることで、チェックマークを表示させることができます。(コピペでOK

 

”AddQuicktag"で、チェックを簡単に表示する

プラグイン”AddQuicktag”に登録することで、先ほど作成した”マナブログ風チェックマーク”を簡単に挿入することができます。

”AddQuicktag”は、上記のURLからダウンロードすることができます。

”AddQuicktag”を起動したら、先ほど作成したチェックマークのコードを挿入していきます

”AddQuicktag”を開くとこのような画面になります。

チェックマークを表示するために入力する項目が3箇所あります。

  1. ボタンのタイトル→分かりやすければなんでもいいです。
  2. 開始タグと終了タグ→”チェックコード”を入力します。
  3. チェックマーク→2つのチェック項目にレ点を入れます。

 

開始タグと終了タグのチェックコードは下記になります

 

開始タグ

[st-marumozi-big fontawesome="fa-check" bgcolor="#fff" bordercolor="" color="#000000" radius="30" margin="0 10px 10px 0"]]

 

終了タグ

[/st-marumozi-big]

 

上記のタグを”AddQuicktag”にコピペするだけでOKです!

コピペが完了したら”変更を保存”をクリックします。

投稿画面を開くと、「Quicktags」という項目があるのでクリックします

先ほど登録したチェックコード(manabu)があるので、クリックすればチェックマークを表示することができます。

←manabu風チェックマーク

これで、manabu風のチェックマークを表示することができました!

 

AFFINGER5:マナブ風チェックマークまとめ

We help artists build their brand, engage their audience, and drive online sales in 7-steps.

ここまでは、アフィンガー5で”マナブログ風チェックマーク”を表示する方法についてご紹介してきました。

マナブログ風のチェックマークを表示させたい人は少なくありません。

本記事で紹介した内容を真似するだけで表示することができますが、わからないことがあれば気軽に連絡ください

→→あーるのTwitter

また、”RIABLOG”では、ブログで役立つ情報などを発信しているので、参考にしてください

 

  • この記事を書いた人

あーる

当サイト「RIABLOG」では、ブログやアフィリエイトについて記事を書いています。 「ブログを始めたいな」と思っている人の参考になれば嬉しいです。

-AFFINGER5

© 2020 RIABLOG Powered by AFFINGER5