
どうも、ジョニーです。
BizVektorのヘッダー(連絡先エリア)を、SNS各種のフォローボタンに変更するカスタマイズのご紹介です。
追記:【BizVektor】ヘッダーの連絡先をSNS各種のフォローボタンに変更する方法(Part2)もあります。
使用するにしても、カスタマイズするにしても、自己責任でお願いします。
では、いってみよう!![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フォローボタン 開始
----------------------------*/
.follow {
margin-bottom:3px;
}
.follow ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.follow ul li{
float: left;
width: 8em;
margin-right: 0px;
padding: 3px;
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-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:26px;
font-family: "FontAwesome";
}
.follow ul li a:hover{
background-color:#fff;
}
.follow ul .twitter a{
background-color:#00aced;
border:2px solid #00aced;
}
.follow ul .twitter a::before{
content: "\f099";
}
.follow .twitter a:hover,.follow .twitter a:hover::before{
color:#00aced;
}
.follow .facebook a{
background-color:#3c5a98;
border:2px solid #3c5a98;
}
.follow .facebook a::before{
content:"\f09a";
}
.follow .facebook a:hover,.follow .facebook a:hover::before{
color:#3c5a98;
}
.follow ul .googleplus a{
background-color:#db4a39;
border:2px solid #db4a39;
}
.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:#ffb53c;
border:2px solid #ffb53c;
}
.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:#87c040;
border:2px solid #87c040;
}
.follow ul .feedly a::before{
content:"\f09e";
}
.follow ul .feedly a:hover,.follow ul
.feedly a:hover::before{
color:#87c040;
}
/*----------------------------
headerフォローボタン 終了
----------------------------*/
ざっくりですが、これだけです!![johnny-c]()

上記を参考にお好きにカスタマイズどうぞ。
《参考記事》
【STINGER5】コピペOK!サイドバーにアイコンフォントでSNS各種のフォローボタンを作る
Webアイコンフォント「Font Awesome」の使い方
まとめ(感想)
ありそうでなかったカスタマイズでした。BizVektorを使っている人は是非お試しあれ!

BizVektorの読み方は、「ビズベクター」じゃなくて「ビズベクトル」だよ!私は間違えた..ぐはは
石川 栄和,大串 肇,星野 邦敏 インプレス 2014-11-14