【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;
	 }