【STINGER5】サイドバーにSNSフォローボタンを追加してみよう

2015/10/15

snsボタン-5

こんなSNSフォローボタンを探し続けて一週間。ようやくカスタマイズに成功しました。今回は「ちゅんこ」さんのサイトを参考に「Google＋」を「Feedly」へと修正しましたので、そのやり方をご紹介したいと思います。

当ブログで利用していない「Google＋」を「Feedly」へ変更

モカは「Google＋」は利用していません。有名ブロガーの方々は大抵使っているみたいですが、今のところブログ記事を書いたり、Twitterすらまともに活用出来ていないので、利用するのはもう少し先になりそうだなぁという事でカスタマイズする事にしました。

▼本家、ちゅんこさんのサイトで紹介しているフォローボタン

▼モカがカスタマイズしたフォローボタン

「Google＋」を消して、「RSS」を元に「Feedly」を追加しました。

フォローボタンを作成してみよう！

今回は「sidbar.php」と「style.css」の２つを修正します。

「sidbar.php」ちゅんこさんのサイトに記載のあるphpの内容をちょこっと修正し以下の様にしました。

sidber.phpの内容

Google+の一文を削除
Feedlyの一文をGoogle+の一文の場所に追加

<!-- SNSボタン -->
<h4 class="menu_underh2">follow Me</h4>
<div class="follow">
<ul>
<li class="twitter"><a href="=【TwitterアカウントのURL】" target="_blank">Twitter</a></li>
<li class="facebook"><a href="【FacebookのアカウントのURL】" target="_blank">Facebook</a></li>
<li class="rss"><a href="<?php echo home_url(); ?>/?feed=rss2" target="_blank">RSS</a></li>
<li class="feedly"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【サイトドメイン(例 moka.com】%2Ffeed%2F" target="_blank">Feedly</a></li>
</ul>
</div>
<!-- SNSボタンここまで -->

<h4 class="menu_underh2">follow Me</h4>

<ul>

<li class="twitter"><a href="=【TwitterアカウントのURL】" target="_blank">Twitter</a></li>

<li class="facebook"><a href="【FacebookのアカウントのURL】" target="_blank">Facebook</a></li>

<li class="rss"><a href="<?php echo home_url(); ?>/?feed=rss2" target="_blank">RSS</a></li>

<li class="feedly"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【サイトドメイン(例 moka.com】%2Ffeed%2F" target="_blank">Feedly</a></li>

</ul>

</div>

【】内は皆さんの内容へ修正して下さい。

style.cssの内容

こちらも同様にGoogle+を削除し、Feedlyを追加します。

.follow {
	margin-bottom:24px;
}


.follow ul{
	position:relative;
	margin:-10px 0 0 -10px;
	overflow:hidden;
}

.follow ul li{
	float:left;
	width:46%;
	margin:10px 0 0 10px;
	}
	
.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;
	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 .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;
	 }

.follow {

margin-bottom:24px;

}

.follow ul{

position:relative;

margin:-10px 0 0 -10px;

overflow:hidden;

}

.follow ul li{

float:left;

width:46%;

margin:10px 0 0 10px;

}

.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;

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 .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;

}

如何でしょう？モカのサイトと同じ様になりましたか？余白などの設定は必要に応じて入れて下さい！

まとめ

少しカスタマイズするだけで、結構、自身のサイトに合う内容に変更できますね！

個人的には、今まで味気無いボタンでしたしそれなりに気に入っていますので、当面はこのままにしたいと思います。もう少し工夫すれば色付きの○の中にアイコンを表示したりも出来ますので、スキル次第ですね。（モカは勉強不足です…。）

＜関連記事＞

stinger5のSNSボタンを目立つようにカスタマイズしてみよう！

http://mocakun.com/wordpress-sns

こんにちは！モカです。stinger5のSNSボタンが何だか寂しかったので、少し目立つようにカスタマイズしてみました。色々なサイトを見て勉...

mocakun.com（このサイト内）

-WordPress全般