twentyfourteenのh2スタイルにfontawesomeのアイコンを追加する方法

Image

fontawesomeで簡単にかっこいいアイコンを使おう!で、

もくろみとしては h2タグやh3タグの装飾や、左ブロックのサブメニューの頭に付けたりして視覚的に分かりやすくしたいと思っています。使い方は分かったので、近いうちにちょっとずつデザインを変更していく予定です♪

のように書いていました。まずは中見出しでよくつかっている<h2> タグを何とかしたいと思います。

twentyfourteenと書きましたがfontawesomeが使えるようにしてあればどのテーマでも同じように修正出来るかなーと思います。

そのまえに…h1の修正について

すでにh1についてはtwentyfourteenのh1スタイルを修正してありました。

Image

このように文字の大きさを調整してアンダーラインをドットで引いてあります。子テーマのstyle.cssに以下を追加してあります。

この感じで中見出しのh2についても修正したいと思います。

中見出し修正前

えーっと(^_^;、すでにこのblogを書いているときには修正してしまった後なのですが、とりあえずh2の修正前はこのような表示でした。

Image

こんなかんじです。文字がちょっと大きいかなぁというのと、中見出しとそのあとの文章の境がわかりにくい、というところが気になって直したいなと思っていました。

h1と同じように子テーマのstyle.cssに以下を追加しました。

これで、

Image

このように、文字がちょっと小さくなって上下にラインが入りました。

fontawesomeの文字をアイコン的に頭に入れたい!

fontawesomeで簡単にかっこいいアイコンを使おう!でfontawesomeは使えるようになっています。なので、fontawesome の文字をアイコン的にh2の頭に入れたかったのです!

ですが…フォントであるが故に(^_^;、いつもやってるようにCSSのbackground-imageで指定するやり方ができません!

かといってせっかくフォントなのに画像に置き換えて…とかだと本末転倒(>_<)です。考えた結果、WordPressのフィルターを追加してみました。

子テーマのfunctions.phpに以下のfunctionとadd_filter行を追加します。

これでh2が、

Image

このように fa-smile-o がくっついた形で表示されました。

fontawesomeなので、アイコンの一覧 から好きな画像をみつけて、置き換えることも簡単です。

先ほどの functions.php の i class=”fa fa-smile-o” で指定しているfa-smile-ofa-child に置き換えれば、

Image

このように簡単に好きなアイコンを指定することができます。

まとめ:fontawesomeを使うときはfilterがいいの、かな?

今回やってみた分かったのはフォントだから色々簡単にできる、と思っていたのですが フォントだから故の ちょっとあれ?みたいなことがあるということです。

他にもデザインとして色々なところで使っていきたいので今回のようにWordPressのフィルターでやっていくのか、それとももっと上手い方法があるのか?を考えていきたいと思っています。

また、フィルターを通すからそこで色々条件付けをすればアイコンとして表示するフォントの種類も変えられるんじゃないかな~という可能性に気づいたのでそれも試して上手くいけば、blogに書きたいと思っています(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る