どうも、@dearwalker_yuyaです。
最近、別サイトでWordPressテーマに『AFFINGER（アフィンガー）』を使っています。
「お金を稼ぐ」に特化した。というだけありアフィリエイトなどを取り扱うのに非常に快適で、デザインカスタマイズに時間を取られないのが魅力。
その『AFFINGER』のH3タグのアイコンをカスタマイズ方法をご紹介します！
デフォルトの『チェックアイコン』から好きなものに！
H3にチェックマークをオンにする方法
WordPressテーマ・AFFINGERにはCSSを触らなくてもH3にアイコンフォントを飾る機能が付いています。まずこれを『オン』にしましょう。
WordPress管理画面より『AFFINGER管理』の中にある『H3にチェックマークを適応する』にチェック。これで本文中のH3タグにアイコンフォントのチェックマークが入ります。
こんな感じ。
小見出しでもグッと目にとまりやすくなりますよね？
これでもOKなんですけどサイトに合わせてオリジナリティを出すためにアイコンフォントを変更してみたいと思います。
アイコンフォントの変更方法
AFFINGERのアイコンフォントでも使われている『Font Awesome Icons』へアクセス。
・Font Awesome Icons
下へスクロールしていくとズラッとたくさんのアイコンが並んでいるの使いたいものを選んでみましょう。
今回はコーヒーカップにしてみました。下の方にアイコンフォントを表示させるコードが貼ってあります。
<i class="fa fa-coffee"></i>
このコードをデフォルトと置き換えるだけ。
置き換え場所は『functions.php』
さて、コードを置き換えてみましょう。
※記述を間違えると真っ白になるのでFTPなどで『functions.php』をダウンロードしてバックアップは取っておきましょう。
WordPress管理画面の『functions.php』よりH3アイコンフォントの部分を見つけてきます。command+F（control+F）で『h3』とページ内検索すると楽ですよ。
'$1<i class="fa fa-check-circle"></i><span style="margin-left:15px;">$2</span>$3',
'$1<i class="fa fa-coffee"></i><span style="margin-left:15px;">$2</span>$3',
置き換えてみました、要するにここが変わっただけですね。
<i class="fa fa-check-circle"></i>
<i class="fa fa-coffee"></i>
コードを置き換えたら更新ボタンをポチッと。
H3がコーヒーカップに変わっていれば完了です！
好きなアイコンのコードと差し替えるだけで面倒なCSSの設定もなく、自在にカスタマイズ出来るので簡単です。アイコンひとつで雰囲気が良くなるので細かい作業は大事ですね。
WordPressテーマ『AFFINGER』を使ってみたい方はこちらよりどうぞ！
ちなみにSTINGER5のH3カスタマイズも書いてるので興味があればこちらもどうぞ！
・【STINGER5】見出しの3hタグを『Webアイコンフォント』で華やかに飾ってみよう！ | SiteMiru（してみる）