広告 AFFINGER

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

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

どうもこんにちは、@dearwalker_yuyaです。
今回は見出しの3hタグを装飾

WordPressテーマ『STINGER5』の本文中h2タグの見出しはデフォルトから吹出し型となっておりお洒落です。

さらにブログを彩るためにh3タグにも『Webアイコンフォント』でワンポイント付けてあげたのでご紹介します!

『Webアイコンフォント』を使うと印象が変わる

デフォルトのh3タグ

デフォルトh3

まずほぼデフォルトの形のh3見出しがこちら。

これを装飾してみると・・・

『Webアイコンフォント』で装飾したh3タグ

Webアイコンフォントのh3タグ

結構印象変わりませんか?
目に留まりやすく、より見出しとして機能しています。

では『Webアイコンフォント』を設定してみましょう。STINGER5のテーマならすでに下準備は出来てます。今回はこちらの記事を参考にさせて頂きました!

Webアイコンフォント「Font Awesome」の使い方 - TASK NOTES

『Webアイコンフォント』の使い方

アイコンフォントは『Font Awesome』を使用

Font Awesome

アイコンフォントは『Font Awesome』を使用します。作業は超簡単ですよ!

header内にCSSを追加

まず下記コードをheader.phpへのhead内へ追加します。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

STINGER5の場合はすでにデフォルトで入っているのでこの作業はスルーしてOKです。

※追記: 新しいバージョンのコードが出ているので上手くアイコンが出ない場合はこちらより新しいものに差し替えてみてください。

Get Started with Font Awesome

使いたいアイコンを選択

『Font Awesome』より使いたいアイコンを探しましょう。

Get Started with Font Awesome

使用したいアイコンをクリックすると詳細ページが開くのでアイコンのコードをCSSへ記述してカスタマイズするだけです。

アイコン番号

では、実際にh3タグを装飾してみましょう!

h3タグを装飾CSS

style.cssの.post h3の後ろにこのコードを追加。

.post h3:before {
  color:#333;
  margin-right: 10px;
  font-family:"FontAwesome";
  content:"\f046";
  font-size:25px;
}

するとh3がこうなる。

Webアイコンフォントのh3タグ

CSS解説

  content:"\f046";

この部分がアイコンの種類。ここを変更するだけでアイコンを変更出来ます。

あとはテキストと同じようにcolorやfont-sizeで色や大きさをカスタマイズしてあげましょう。

こんなに変えられる『Webアイコンフォント』あれこれ

雷マーク

雷マーク

ハートマーク

ハートマーク

ファイヤーマーク

ファイヤーマーク

アイコンの種類・色・サイズをCSSひとつで雰囲気が変わるのが面白いですね!
これがあるだけで「ここは見出しだよ」「ここはカテゴリーだよ」とユーザーに伝わりやすくなります。

まとめ

まとめ

今回はhタグでしたがCSSで色んな場所や表現で仕込むことが出来ます。

例えばSTINGER5ではデフォルトで日付やタグにも仕込まれていますし、SNSのアイコンも豊富なのでそこにも使える。

このブログではフッターに追加した、カテゴリー一覧のウィジェットにも『Webアイコンフォント』を使って雰囲気を出してみました。

CSSだけの装飾とはひと味違うので興味ある方はとても簡単なのでチャレンジしてみてください!

もっと楽に設定したいならこちら
稼ぐサイトの設計図-AFFINGER4公式ガイド

あわせて読みたい

-AFFINGER
-,