Font Awesomeを使って、h2やh3の見出しにアイコンを表示する方法
By writer | 2015/04/17
当サイトも見出しを変えたら一気に雰囲気が変わりました。断然おしゃれに！
こんにちは、TravelPress「Ark(あるく)」です。
今回は、Webフォントアイコン「Font Awesome」を使ってh2やh3の見出しにアイコンを表示する方法をご紹介します。
Font Awesomeの使い方
まず初めに Font Awesome の使い方を軽く説明します。「詳しく知りたいよ！」という方は以下の記事を参考にしてください。
まずは Font Awesome のサイトにアクセスします。
すると Font Awesome を呼び出すためのタグがあるので、これを自サイトの＜head＞〜＜/head＞内に書き込みます。以下のタグをコピペでもOK！
|
1 |
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
あとはメニューバーから「Icons」をクリックすると、ズラーッとアイコンが出てくるので好きなのを選んでサイトの表示したい場所に貼り付けます。
ドロイドくんの場合だと…
|
1 |
<i class="fa fa-android fa-2x"></i> |
をサイドバーだったり、ウィジェットに貼り付ければ完成です。
サイズを変更したい場合は、以下の表を参考にしてください。
| fa-lg | fa-2x | fa-3x | fa-4x | fa-5x |
色の変更はstyle=”color”を追加すればOK！
もし灰色にしたいなら…
|
1 |
<i class="fa fa-check fa-android fa-2x" style="color:#999;"></i> |
と、上記のように style=”color:#999; を追加します。
Font Awesomeを見出しで使う方法
今回、h2の見出しにチェックマークを追加する方法で説明しますが、Font Awesome 内のアイコンであれば自由に変更可能です。
スタイルシート(style.css)の一番下に以下の２つを追加してください。
|
1 2 3 4 |
h2 { font-weight:bold; font-size:20px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2:before { color:#999; //アイコンの色 width:30px; height:30px; line-height:30px; text-align:center; margin-right:10px; font-family:"FontAwesome"; content:"\f00c"; //アイコンの種類 font-weight:lighter; font-size:25px; //アイコンの大きさ position: relative; top:-3px; display:inline-block; } |
当サイトの場合、h2に「border-bottom: 3px solid #50AAC6;」を追加して下線を引いています。h3やh4の見出しを変更したい時も同様のやり方です。
あとは煮るなり焼くなり自由にカスタマイズしてください。
※Stingerのテーマを利用している方は、見出しの背景が灰色に固定されていると思うので functions.php にある以下の部分を削除してください。（functions.phpを変更する場合は必ずバックアップを取ってから！）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 中見出し */ h2 { background: <?php echo $menu_bgcolor; ?>; color: <?php echo $menu_color; ?>; } h2:after { border-top: 10px solid <?php echo $menu_bgcolor; ?>; } h2:before { border-top: 10px solid <?php echo $menu_bgcolor; ?>; } |
アイコンを変更する方法
次にアイコンコードを取得するやり方です。
Font Awesome のサイトのCSSを見ます。Macを使用している方はメニューバーの 「開発」 → 「ページのソースを表示」 をクリックします。
すると下の画像のようにズラーッとソースが出てきます。
次に左側の項目から スタイルシート → font-awesome.css を選択します。
すると Font Awesome のCSSを見ることができるので、Macをお使いの方は「command + F」で検索バーを出してください。
検索するときはアイコンの名前、ドロイド君であれば fa-android 、チェックマークであれば fa-check と入力します。
検索すると、
|
1 2 3 |
.fa-check:before { content: "\f00c"; } |
と出てくるので content: “⚪︎⚪︎⚪︎”; の ⚪︎⚪︎⚪︎ 部分がアイコンコードになります。あとは先ほどのスタイルシートに入力すれば完成です。
※以上のやり方は Font Awesome が推奨しているやり方ではないので、そこだけ注意をお願いします。
終わりに
文章の中でも見出しは、かなり重要な役割を担っています。読みやすくなるのはもちろん、個性を出して目立たせたり、読者にインパクトを与えることができます。
いろいろ試行錯誤し、自分のブログに合った見出しを考えてみてください！
Share A COMMENT
コメントをシェアしよう