SIBATABI

旅の経験を情報として配信するブログ

【STINGER6】大きく!押しやすく!SNSボタンをバイラルメディア風にするカスタマイズ

 
stinger6

今までデザインがバラバラだったSTINGERシリーズのSNSボタンが、6から統一デザインに変更されました。

最初は気に入っていたんですが、よくよく考えてみたら小さ過ぎるんじゃないかと思い始めたので、バイラルメディア風にデザインを変更してみました。

今回は、SNSボタンのカスタマイズについてまとめておきたいと思います。

完成するとこんな感じになります。

「STINGER6」カスタマイズまとめ

PC画面。

 

「STINGER6」カスタマイズまとめ

モバイル画面。

ちなみに、下記ブログを参考にtwitterのツイート数カウントも出来るようにしてあります。

 

sns.phpの編集

<div class="sns_single">
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<ul class="clearfix">
<!--Facebookボタン--> 
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank"><i class="fa fa-facebook"></i>
<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':'<span class="sns_singletext">'.scc_get_share_facebook().'</span>'; ?></a>
</li>

<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=<?php echo $twitter_name ?>&tw_p=tweetbutton" target="_blank"><i class="fa fa-twitter"></i> <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':'<span class="sns_singletext">'.scc_get_share_twitter().'</span>'; ?></a>
</li>

<!--はてブボタン--> 
<li class="hatebu"> 
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php the_title(); ?>"><i class="fa fa-hatena"></i><span style="font-weight:bold">B!</span>
<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?:'<span class="sns_singletext"><span class="hatebno">'.scc_get_share_hatebu().'</span></span>';
?></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

</li>

<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" target="_blank"><i class="fa fa-google-plus"></i> <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':'<span class="sns_singletext">'.scc_get_share_gplus().'</span>'; ?></a>
</li>

<!--ポケットボタン--> 
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="_blank"><i class="fa fa-get-pocket"></i> <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':'<span class="sns_singletext">'.scc_get_share_pocket().'</span>'; ?></a></li>

<!--LINEボタン--> 
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><span class="sns_singletext">LINE</span></a>
</li> 
</ul>
<?php else: ?>
<ul class="clearfix">
<!--Facebookボタン--> 
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank"><i class="fa fa-facebook"></i> Facebook
<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':'<span class="sns_singletext">'.scc_get_share_facebook().'</span>'; ?></a>
</li>

<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=<?php echo $twitter_name ?>&tw_p=tweetbutton" target="_blank"><i class="fa fa-twitter"></i> Twitter <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':'<span class="sns_singletext">'.scc_get_share_twitter().'</span>'; ?></a>
</li>

<!--はてブボタン--> 
<li class="hatebu"> 
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php the_title(); ?>"><i class="fa fa-hatena"></i><span style="font-weight:bold">B! はてブ</span>
<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?:'<span class="sns_singletext"><span class="hatebno">'.scc_get_share_hatebu().'</span></span>';
?></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

</li>

<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" target="_blank"><i class="fa fa-google-plus"></i> Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':'<span class="sns_singletext">'.scc_get_share_gplus().'</span>'; ?></a>
</li>

<!--ポケットボタン--> 
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="_blank"><i class="fa fa-get-pocket"></i> Pocket <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':'<span class="sns_singletext">'.scc_get_share_pocket().'</span>'; ?></a></li>

<!--LINEボタン--> 
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><span class="sns_singletext">LINEへ送る</span></a>
</li> 
</ul>
<?php endif; ?>
</div>

上記のように、sns.phpを書き換えました。

 

snsをsns_singleに置き換え

SNSボタンを装飾するCSSはトップページも、投稿ページも共通のものなので、<div class=”sns”>を<div class=”sns_single”>に置き換えて、投稿ページのSNSボタンのみ装飾を変更出来るようにしました。

 

モバイルとPCで表示の切り替え

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>

<?php else: ?>

<?php endif; ?>

条件分岐を使って、モバイルとPCで表示を切り替え。

PC画面では、アイコンだけでなく文字も入るようにしています。

 

style.cssの編集

.sns_single{
padding: 0 10px;
margin-bottom:10px;
width: auto;
}

.sns_singletext{
font-size:20px;
vertical-align:none;
margin-bottom: 0px;
}

.sns_single li {
float:left;
padding:0px;
text-align:center;
list-style:none;
width:50%;
margin:0px 0px 5px 0px; 
}

.sns_single li a {
font-size:20px;
position:relative;
display:block;
padding:20px 10px 10px 10px;
color:#fff;
border-radius:0px;
text-align:center;
text-decoration: none;
height:40px;
}


/* ツイッター */
.sns_single .twitter a {
background:#55acee;
}
.sns_single .twitter a:hover {
background:#4892cb;
}

.sns_single .twitter .snstext {
border-left:1px solid #9ACFF4;
padding-left:10px;
margin-left:0px;
}

/* Facebook */
.sns_single .facebook a {
background:#3b5998;
}
.sns_single .facebook a:hover {
background:#324c81;
}

.sns_single .facebook .snstext {
border-left:1px solid #607BB2;
padding-left:10px;
margin-left:0px;
}

/* グーグル */
.sns_single .googleplus a {
background:#dc4e41;
}
.sns_single .googleplus a:hover {
background:#bb4237;
}

.sns_single .googleplus .snstext {
border-left:1px solid #E0776D;
padding-left:10px;
margin-left:0px;
}

/* はてぶ */
.sns_single .hatebu a {
background:#00a5de;
}

.sns_single .hatebu a:hover {
background:#008cbd;
}

.sns_single .hatebu .snstext {
border-left:1px solid #48B6DB;
padding-left:10px;
margin-left:0px;
}

/* LINE */
.sns_single .line a {
background:#25af00;
}
.sns_single .line a:hover {
background:#219900;
}

/* Pocket */
.sns_single .pocket a {
background:#f03e51;
}

.sns_single .pocket .snstext {
border-left:1px solid #F27985;
padding-left:10px;
margin-left:0px;
}

.sns_single .pocket a:hover {
background:#c0392b;
}

上記をstyle.cssの子テーマ共通部分に追加しました。

 

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {

/*--------------------------------
SNS
---------------------------------*/
/*SNSボタンのレイアウト*/
.sns_single {
margin-left:0px;
width:760px

}

.sns_single li {
width:380px;
margin:0px 0px 10px 0px; 
}

上記をPC部分に追加。

 

これでバイラルメディア風のボタンになっているはずです。

このコードは、当ブログに適用しているものをそのまま貼り付けているので、不自然な余白などが生まれてしまう場合があると思いますが、その場合は適宜調整してみてください。