広告 AFFINGER

【AFFINGER】H3タグのアイコンを自在にカスタマイズする方法

Affinger h3 icon customize

どうも、@dearwalker_yuyaです。

最近、別サイトでWordPressテーマに『AFFINGER(アフィンガー)』を使っています。

「お金を稼ぐ」に特化した。というだけありアフィリエイトなどを取り扱うのに非常に快適で、デザインカスタマイズに時間を取られないのが魅力。

その『AFFINGER』のH3タグのアイコンをカスタマイズ方法をご紹介します!

デフォルトの『チェックアイコン』から好きなものに!

H3にチェックマークをオンにする方法

WordPressテーマ・AFFINGERにはCSSを触らなくてもH3にアイコンフォントを飾る機能が付いています。まずこれを『オン』にしましょう。

affinger-h3-icon-customize2

WordPress管理画面より『AFFINGER管理』の中にある『H3にチェックマークを適応する』にチェック。これで本文中のH3タグにアイコンフォントのチェックマークが入ります。

こんな感じ。

affinger-h3-icon-customize3

小見出しでもグッと目にとまりやすくなりますよね?

これでもOKなんですけどサイトに合わせてオリジナリティを出すためにアイコンフォントを変更してみたいと思います。

アイコンフォントの変更方法

affinger-h3-icon-customize4

AFFINGERのアイコンフォントでも使われている『Font Awesome Icons』へアクセス。

・Font Awesome Icons

affinger-h3-icon-customize5

下へスクロールしていくとズラッとたくさんのアイコンが並んでいるの使いたいものを選んでみましょう。

affinger-h3-icon-customize6

今回はコーヒーカップにしてみました。下の方にアイコンフォントを表示させるコードが貼ってあります。

affinger-h3-icon-customize7
<i class="fa fa-coffee"></i>

このコードをデフォルトと置き換えるだけ。

置き換え場所は『functions.php』

さて、コードを置き換えてみましょう。

※記述を間違えると真っ白になるのでFTPなどで『functions.php』をダウンロードしてバックアップは取っておきましょう。

affinger-h3-icon-customize8

WordPress管理画面の『functions.php』よりH3アイコンフォントの部分を見つけてきます。command+F(control+F)で『h3』とページ内検索すると楽ですよ。

affinger-h3-icon-customize10
'$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がコーヒーカップに変わっていれば完了です!

affinger-h3-icon-customize11

好きなアイコンのコードと差し替えるだけで面倒なCSSの設定もなく、自在にカスタマイズ出来るので簡単です。アイコンひとつで雰囲気が良くなるので細かい作業は大事ですね。

WordPressテーマ『AFFINGER』を使ってみたい方はこちらよりどうぞ!


稼ぐサイトの設計図-AFFINGER4公式ガイド

ちなみにSTINGER5のH3カスタマイズも書いてるので興味があればこちらもどうぞ!

【STINGER5】見出しの3hタグを『Webアイコンフォント』で華やかに飾ってみよう! | SiteMiru(してみる)

あわせて読みたい

-AFFINGER
-, ,