はぴすぷ

【Font Awesome】h2,h3見出しの頭にアイコンをCSSだけで追加する方法【STINGER5】

      2015/10/21

自分のサイトを見ていて、よく<h3>見出しが目立ってないよな～と思っていました。

つい数時間前まではこんな感じだったんです。（All in～の部分がh3）

SS_2737

若干文字が大きく、太字になっていて、下線も入ってはいるのですが、パッと見て「見出し」だと分かり辛いんですよね。

完全にスタイルを変えてしまっても良かったのですが、とりあえずはアイコンだけ付けて目立たせることにしました。

完成形はこんな感じです。

SS_2738

アイコン1つ付けるだけで、だいぶ「見出し」っぽくなります。

というわけで実装の方法です。数行コピペするだけで簡単にできます。

スポンサーリンク

Font Awesomeを導入する

アイコンの表示には「Font Awesome」というフォントアイコンを使用します。

導入は以下の1行を追加するだけで簡単に終わります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

詳しくはこちらで書いていますのでご覧下さい。
一行追加するだけ！CSSのみで使えるフォントアイコン【Font Awesome】の使い方とサンプル

当サイトは、WordPressのテーマ「STINGER5」を使用しているので既に入っていました。ただバージョンが古かったので新しいものに置き換えています。このことについても、先ほどの記事で触れています。

見出しの頭にアイコンを追加する

以下の様なコードをcssファイルに追記したら完成です。

/* 記事内のh3の手前にアイコンを付ける */
.post h3:before {
    font-family:"FontAwesome";
    content:"\f06c";
    color:#57CC37;
    font-size:24px;
    margin-right:9px;
}

「STINGER5」を前提に用意したものなので、自身の当てたい要素に合わせて調整して下さい。

記事に対して、クラス 「post」が割り当てられているので記事内の<h3>に限るようにしています。

「:before」を使うことで、<h3>の頭に「content」が追加されます。

「content」で指定しているものは、フォントのUnicodeで、簡単に言うとアイコンの種類です。

Font AwesomeのUnicodeを調べる方法

まずは、使いたいアイコンを「Font Awesome Icons」で探しましょう。

SS_2739

使いたいアイコンをクリックすると、サンプルを表示する画面が表示されます。この画面にUnicodeが書かれています。

SS_2736

一部の見出しからアイコンを外す

一括で全ての見出しに指定したのはいいけど、付いて欲しくないものもありますよね。

「STINGER5」の場合、デフォルトの状態だと、記事終わりの「関連記事」と「コメント入力フォーム」の見出しにもアイコンが付くことになります。

SS_2735

当サイトは「コメント入力フォーム」をカスタマイズしているので若干異なりますが、こんな感じにアイコンがダブってしまったりします。

こうならない様に、付いてしまうアイコンを打ち消すコードを書きます。

.post h3.point:before,
.post h3.comment-reply-title:before {
    content: none;
}

上2行で「関連記事」と「コメント入力フォーム」の見出しを指定しています。「content」に「none」を指定することで打ち消すことが出来ます。

他にも自身のサイトで付けたくない見出しがあれば、同じように除外する要素を指定しましょう。

終わりに

たったこれだけで、h2、h3などの見出しにアイコンを付けることが出来ます。

どうにかしたいなーと思っていた問題がまた1つ片付きました！

地味な内容ですが、かなり見やすくなったのではないかな～と私的には大変満足していますｗ

もっと見やすいサイトにしていく為にも、デザインのセンス磨いてCSSの勉強しないとな…。頑張ろう…！

それでは！

 - CSS, STINGER, Webサイト構築, WordPress ,