Tweet

さて本日のブログカスタマイズテーマは「見出しの装飾」です！

WordPressを使用していて、見出しをもうちょっとかっこよくしたいなあと思ったことはありませんか？

本ブログではWordPressの「STINGER5」を使用してますので、これを例に装飾する方法を解説します。

見出しの装飾って？

まずやりたいことですが、以下のような見出しにすることが目標です。

←これがWEBアイコンフォントです

通常STINGER5だと見出しの装飾はデフォルトで以下のようになっています。

見出し１

見出し２

見出し３

今回は見出し３にWEBアイコンフォントを付けます。
※応用すればどの見出しにもアイコンを付けることができます。

アイコンを付ける方法

画像を選択する

アイコンの画像は「Font Awesome」というサイトが提供しているものが有名ですので、こちらを利用します。

http://fortawesome.github.io/Font-Awesome/

⇒こちらのサイトのIconsタブから使用したい画像をクリックして、画像のコードをメモします。下記画像の赤枠の部分です。

CSSのh3タグに追記

あとは簡単です。WordPress管理画面の「外観」⇒「テーマの編集」からstyle.cssを以下のように編集します。

１．まずh3タグを探します。".post h3"と書いてあるタグです。
２．もともとあったh3タグの内容はそのままにして、".post h3"の下に以下の記述を追記します。

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

３．content:"\xxxx"のxxxx部分を先ほどメモした画像コードに置き換えます。
４．修正を保存します。

これで見出し３を選択すれば、WEBアイコンが付きます！！

まとめ

今回は見出しにWEBアイコンフォントを付ける方法を紹介しました。

本ブログもこれで大分見やすくなったかなと思います。

皆さんもぜひ試してみてください。

Tweet