『コピペだけでおしゃれなチェックマークがつく』
というのを試してみたけど上手く表示されないのですが、、
こんなおしゃれなチェックマークのアイコン
今回はAFFINGERで↑のようなチェックマークのついた見出しの作成方法を解説いたします。
併せてコピペしたチェックマークが上手く出ないという方に向けて、解決方法をご紹介しますのでよければ参考にしてみてください。
-
-
初心者ブロガーがブログを収益化する仕組みの作り方
続きを見る
注）チェックマークはコードのコピペだけでは表示されません
こんなおしゃれなチェックマークのアイコン
実はこのアイコンですが、AFFINGER6の機能ではなく
【Font Awesome】
そのため、コードを投稿画面にコピペだけしても表示されません。
コピペだけで表示と記載されていても、
実際には少しだけ事前準備が必要なものになるためです。
以下、【Font Awesome】を使用するため準備方法を解説致します。
ちなみにこの【Font Awesome】の使用方法はいくつかあるのですが、今回は『CDN』
チェックマーク表示手順
手順1 以下のコードをコピー
<link href="https://use.fontawesome.
手順2 header.php内にコードを貼り付ける
手順１でコピーしたコードを、以下の手順で自身のブログやWebサイトの<head>
[ダッシュボード]⇒[外観]⇒[テーマエディター]⇒
⇒この中からheader.phpを探してクリックします。
＜/herder＞の一行手前にペーストします。
必ず改行してからコピペしてくださいね
コピペしたら『ファイルを更新』をクリック。
これで準備はOKです。
事前に追加CSSを入力済みで、記事内にチェックマークを出すコードが入力されていればもう表示
まだ、していないという方は手順３を行いましょう。
手順３ コードを追加
まず『外観』→『カスタマイズ』→『CSS追加』から
以下のコードをコピペします。
/*チェックマーク*/
.check1{font-size: 20px;
font-weight: bold;
color: #333333;
}
コピペしたら公開をクリック。
次に投稿画面を開き、「テキスト」をクリックして、記事内に以下のHTMLコードをコピペします。
<i class="fa fa-check fa-1g" style="color: #4965b2;" aria-hidden="true"></i> <span class="check">ここに文章を入れて使用してください</
投稿もしくはプレビューで実際に今回のチェックマークが反映されればOKです！
お疲れ様でした。
まとめ
以上、
チェックマークを使った読みやすいブログ作成の一助になればと嬉
このブログでは、
AFFINGER6（アフィンガー６）最速導入手順
- STEP１ 『AFFINGERの購入・ダウンロード』
- STEP２ 『AFFINGERをインストールする』
- STEP３ 『管理メニューの初期設定』
- STEP４ 『デザインの変更』
- STEP５ 『プラグインのインストール』
- STEP６ 『記事を投稿する』
- STEP７ 『マネタイズする』
『稼ぐブログ』をつくるなら『AFFINER6（アフィンガー6）』がおすすめ
ブログライティングで本格的に稼ぎたい方は、「稼ぐに特化した」ブログテーマAFFIBGER6（アフィンガー6）を用いて記事を書くのがおすすめです。
AFFINGER6がおすすめの人
- 1.これからアフィリエイトで本格的に稼ぎたい人
- 2.記事の装飾やデザインを簡単に使いたい人
- 3.テーマ選びで失敗したくない人
- 4.SEO対策に自信がない人
当ブログもAFFIBGER6を導入後、大きくアクセス数が増えました。
ブログテーマはどれがいいのか分からなければ、AFFINGERにしておけばまず間違いありませんので、良ければ是非使ってみてください！