どうもこんにちは、@dearwalker_yuyaです。
今回は見出しの3hタグを装飾!
WordPressテーマ『STINGER5』の本文中h2タグの見出しはデフォルトから吹出し型となっておりお洒落です。
さらにブログを彩るためにh3タグにも『Webアイコンフォント』でワンポイント付けてあげたのでご紹介します!
『Webアイコンフォント』を使うと印象が変わる
デフォルトのh3タグ
まずほぼデフォルトの形のh3見出しがこちら。
これを装飾してみると・・・
『Webアイコンフォント』で装飾したh3タグ
結構印象変わりませんか?
目に留まりやすく、より見出しとして機能しています。
では『Webアイコンフォント』を設定してみましょう。STINGER5のテーマならすでに下準備は出来てます。今回はこちらの記事を参考にさせて頂きました!
Webアイコンフォント「Font Awesome」の使い方 - TASK NOTES
『Webアイコンフォント』の使い方
アイコンフォントは『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がこうなる。
CSS解説
content:"\f046";
この部分がアイコンの種類。ここを変更するだけでアイコンを変更出来ます。
あとはテキストと同じようにcolorやfont-sizeで色や大きさをカスタマイズしてあげましょう。
こんなに変えられる『Webアイコンフォント』あれこれ
雷マーク
ハートマーク
ファイヤーマーク
アイコンの種類・色・サイズをCSSひとつで雰囲気が変わるのが面白いですね!
これがあるだけで「ここは見出しだよ」「ここはカテゴリーだよ」とユーザーに伝わりやすくなります。
まとめ
今回はhタグでしたがCSSで色んな場所や表現で仕込むことが出来ます。
例えばSTINGER5ではデフォルトで日付やタグにも仕込まれていますし、SNSのアイコンも豊富なのでそこにも使える。
このブログではフッターに追加した、カテゴリー一覧のウィジェットにも『Webアイコンフォント』を使って雰囲気を出してみました。
CSSだけの装飾とはひと味違うので興味ある方はとても簡単なのでチャレンジしてみてください!
もっと楽に設定したいならこちら
稼ぐサイトの設計図-AFFINGER4公式ガイド