fontawesomeで簡単にかっこいいアイコンを使おう！で、
のように書いていました。まずは中見出しでよくつかっている<h2> タグを何とかしたいと思います。
twentyfourteenと書きましたがfontawesomeが使えるようにしてあればどのテーマでも同じように修正出来るかなーと思います。
そのまえに…h1の修正について
すでにh1についてはtwentyfourteenのh1スタイルを修正してありました。
このように文字の大きさを調整してアンダーラインをドットで引いてあります。子テーマのstyle.cssに以下を追加してあります。
.entry-title {
font-size: 28px;
border-bottom:1px dotted #5e4390;
}
この感じで中見出しのh2についても修正したいと思います。
中見出し修正前
えーっと(^_^;、すでにこのblogを書いているときには修正してしまった後なのですが、とりあえずh2の修正前はこのような表示でした。
こんなかんじです。文字がちょっと大きいかなぁというのと、中見出しとそのあとの文章の境がわかりにくい、というところが気になって直したいなと思っていました。
h1と同じように子テーマのstyle.cssに以下を追加しました。
h2 {
font-size:20px;
padding:10px 0px 10px 1px;
border-top:1px dotted #5e4390;
border-bottom:1px dotted #5e4390;
}
これで、
このように、文字がちょっと小さくなって上下にラインが入りました。
fontawesomeの文字をアイコン的に頭に入れたい！
fontawesomeで簡単にかっこいいアイコンを使おう！でfontawesomeは使えるようになっています。なので、fontawesome の文字をアイコン的にh2の頭に入れたかったのです！
ですが…フォントであるが故に(^_^;、いつもやってるようにCSSのbackground-imageで指定するやり方ができません！
かといってせっかくフォントなのに画像に置き換えて…とかだと本末転倒(>_<)です。考えた結果、WordPressのフィルターを追加してみました。
子テーマのfunctions.phpに以下のfunctionとadd_filter行を追加します。
// h2にfontawesomeを追加する
function ryus_h2_add($text ) {
$text = str_replace('<h2>', '<h2><i class="fa fa-smile-o" style="font-size:24px;margin-right:5px;"></i>', $text);
return $text;
}
add_filter( 'the_content', 'ryus_h2_add' );
これでh2が、
このように fa-smile-o がくっついた形で表示されました。
fontawesomeなので、アイコンの一覧 から好きな画像をみつけて、置き換えることも簡単です。
先ほどの functions.php の i class=”fa fa-smile-o” で指定しているfa-smile-oをfa-child に置き換えれば、
このように簡単に好きなアイコンを指定することができます。
まとめ：fontawesomeを使うときはfilterがいいの、かな？
今回やってみた分かったのはフォントだから色々簡単にできる、と思っていたのですが フォントだから故の ちょっとあれ？みたいなことがあるということです。
他にもデザインとして色々なところで使っていきたいので今回のようにWordPressのフィルターでやっていくのか、それとももっと上手い方法があるのか？を考えていきたいと思っています。
また、フィルターを通すからそこで色々条件付けをすればアイコンとして表示するフォントの種類も変えられるんじゃないかな～という可能性に気づいたのでそれも試して上手くいけば、blogに書きたいと思っています(^^)/
コメント