
どうも、ジョニーです。
先日「【BizVektor】ヘッダーの連絡先をSNS各種のフォローボタンに変更する方法!」という記事を書いたのですが、こちらはパート2です。
BizVektorのヘッダー(連絡先エリア)を、SNS各種のフォローボタンに変更するカスタマイズのご紹介です。
使用するにしても、カスタマイズするにしても、自己責任でお願いします。
では、いってみよう!![johnny-c]()

カスタマイズする理由(仕上がりイメージ)
私がBizVektorの子テーマ作成をする際にカスタマイズしたので、備忘録です。
デフォルトではこんな感じ ↓

仕上がりイメージはこんな感じ ↓

カスタマイズ スタート
「header.php」をいじる
Font Awesomeを使用しようできるように、「header.php」のheadタグ内に下記コードを追記します。
※私の場合は子テーマに書いてます。
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
「functions.php」をいじる
「functions.php」に下記コードを追記します。
※私の場合は子テーマに書いてます。
// ヘッダーの連絡先をSNS各種のフォローボタンに変更する
add_filter('headContactCustom','do_head_contact_custom');
function do_head_contact_custom($headContact){
$headContact = '<div id="headContact"><div id="headContactInner">
<div class="follow">
<ul>
<li class="twitter"><a href="ツイッターのURL" target="_blank">Twitter</a></li>
<li class="facebook"><a href="フェイスブックページのURL" target="_blank">Facebook</a></li>
<li class="googleplus"><a href="Google+ページのURL" target="_blank">Google+</a></li>
<li class="feedly"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【サイトのドメイン】%2Ffeed%2F" target="_blank">Feedly</a></li>
</ul>
</div>
</div></div>';
return $headContact;
}
「style.css」をいじる
「style.css」に下記コードを追記します。
※私の場合は子テーマに書いてます。
/*----------------------------
headerフォローボタン 開始
----------------------------*/
/*スマホでは表示しない*/
@media (max-width: 770px) {
.follow { display:none; }
}
.follow {
margin-bottom:3px;
}
.follow ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.follow ul li{
float: left;
width: 3em;
margin-right: 0px;
margin-bottom: 2px;
padding: 0px;
text-align: center;
}
.follow ul li a{
padding-top:10px;
padding-bottom:5px;
display:block;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
color:#fff;
font-size:12px;
font-family:'Open Sans',sans-serif;
text-align:center;
text-decoration:none;
}
.follow ul li a::before{
position:relative;
padding-top:3px;
padding-bottom:5px;
display:block;
-webkit-transition:.15s ease-in-out;
transition:.15s ease-in-out;
color:#fff;
font-size:16px;
font-family: "FontAwesome";
}
.follow ul li a:hover{
background-color:#ffc200;
}
.follow ul .twitter a{
background-color:#00234a;
border-left:2px solid #fff;
}
.follow ul .twitter a::before{
content: "\f099";
}
.follow .twitter a:hover,.follow .twitter a:hover::before{
color:#00aced;
}
.follow .facebook a{
background-color:#00234a;
border-left:2px solid #fff;
}
.follow .facebook a::before{
content:"\f09a";
}
.follow .facebook a:hover,.follow .facebook a:hover::before{
color:#3c5a98;
}
.follow ul .googleplus a{
background-color:#00234a;
border-left:2px solid #fff;
}
.follow ul .googleplus a::before{
content:"\f0d5";
}
.follow ul .googleplus a:hover,.follow ul
.googleplus a:hover::before{
color:#db4a39;
}
.follow ul .rss a{
background-color:#00234a;
border-left:2px solid #fff;
}
.follow ul .rss a::before{
content:"\f09e";
}
.follow ul .rss a:hover,.follow ul .rss a:hover::before{
color:#ffb53c;
}
.follow ul .feedly a{
background-color:#00234a;
border-left:2px solid #fff;
}
.follow ul .feedly a::before{
content:"\f09e";
}
.follow ul .feedly a:hover,.follow ul
.feedly a:hover::before{
color:#87c040;
}
/*----------------------------
headerフォローボタン 終了
----------------------------*/
ざっくりですが、これだけです!![johnny-c]()

上記を参考にお好きにカスタマイズどうぞ。
まとめ(感想)
「前回記事」のパート2でした。BizVektorを使っている人は是非お試しあれ!

今月中には、BizVektor の子テーマ配布&サイト公開できそうかな…
石川 栄和,大串 肇,星野 邦敏 インプレス 2014-11-14