[STINGER5カスタマイズ]引用-blockquote-の【“】をアイコンフォントに変えてみた

 2014/08/23

quote1
こんにちは、ちゅんこ@shufulifeです。STINGER5のblockquoteの【“】(←これなんていう記号だろ?)の画像部分をアイコンフォントに変えてみたのでその方法のご紹介です。

スポンサーリンク

STINGER5でのカスタマイズ

STINGERシリーズのblockquoteのデザインは共通しています。おなじみのこんな感じですね。

quote3

今回はアイコンフォントのfontawesomeのリンクが張られているSTINGER5でのご説明です。STINGER for FANS、STINGER forLADYでもうまくいくかもしれませんが、未確認です。すみません<(_ _)>

functions.phpへの記述

// blockquoteにアイコンフォントを追加する
function blockquote_add($text) {
$text = str_replace('<blockquote>', '<blockquote><div class="icon"><i class="fa  fa-quote-left"  style="font-size:40px;color:#FFF;"></i></div>', $text);
return $text;
}
add_filter( 'the_content', 'blockquote_add' );

これでblockquoteタグにアイコンフォントを記述されます。次にcssでbackgroundに指定してある画像を削除します。

style.cssのスタイルの変更

/* 引用 */
.post blockquote {
background-color: #f3f3f3;
background-image: url(images/quote.png);
background-repeat: no-repeat;
background-position: left top;
padding-top: 70px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}

この部分を下記に変更

.post blockquote {
background-color: #f3f3f3;
padding:20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}
.post blockquote .icon{
width:100%;
text-align:left;
font-size:36px;
color:#FFF;
}

そうするとこんな感じになります。

quote4

まぁ、なんということでしょう!画像だった【“】がアイコンフォントに・・・

引用もどきも同じです

functions.phpはこちら

//引用もどきにアイコンフォントを追加する
function inyoumodoki_add($text) {
$text = str_replace('<div class="inyoumodoki">', '<div class="inyoumodoki"><div class="icon"><i class="fa  fa-quote-left"  style="font-size:40px;color:#FFF;"></i></div>', $text);
return $text;
}
add_filter( 'the_content', 'inyoumodoki_add' );

CSSは.inyoumodokiのところを、

/* 引用じゃないけど引用と同じデザインにしたい時 */
.inyoumodoki {
background-color: #f3f3f3;
padding:20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}
.inyoumodoki .icon{
width:100%;
text-align:left;
font-size:36px;
color:#FFF;
}

これで引用と同じデザインになります

icomoonなら【“】のデザインが豊富です

fontawesomeの【“】はデザインは一つだけですが、icomoonはいくつかありますし、アイコンフォントを自作できるのでデザインにオリジナリティーが出せます。

【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方

icomoonで【“】をアイコンフォントに変える場合は、functions.phpの
<i class=”fa fa-quote-left” style=”font-size:40px;color:#FFF;”></i>

この部分をicomoonの記述に変更します。

<span class=" icon-quotes-left(icon-以下部分は自分で設定したアイコンにする"style="font-size:40px;color:#FFF;"></span>

わたしのブログはSTINGER5デフォルトのfontawesomeではなくicomoonにしているので引用部分はこんな感じのデザインにしています。

さぁ!行きますよ!ザーボンさん、ドドリアさん!!

まとめ

blockquoteにアイコンフォントの【“】を挿入するのにどうやればいいかつまづいたので、このエントリーが誰かのお役にたてれば幸いです。

参考にさせていただいたのはこちらのサイトです。

twentyfourteenの blockquote引用 スタイルをカスタマイズする!

それでは、ちゅんこ@shufulifeがお送りしましたー。

STNGER5 WordPress

Please comment!

  

現在トラックバックはありません。