シンプルでレスポンシブ！オリジナルSNSシェアボタンのソースを公開。

2016/01/16 2016/02/16

はてなブログは本当にSEOに強いの？wordpressと両方使って比較してみた僕の本音

ブログのシェアボタンを一新しました。

↑こんなふうになりました。シンプルで上品な感じに。

なので、例によってソースを公開しようと思います。

一分でわかるこの記事の概要

1公式ボタンを捨てて、オリジナルのSNSボタンにした経緯←今ココ
1.1公式のfacebookボタンが重すぎる
2参考にした記事
3早速、オリジナルのシェアボタンのソースを公開
3.1sns.phpに貼り付けるphpコード
3.2スマホ用のCSS
3.3PC用のCSS
4まとめ
4.1もっとカスタムしたい人は…。かわりにやろうか？

公式ボタンを捨てて、オリジナルのSNSボタンにした経緯

今までシェアボタンのカスタム記事としては、こんな記事とかあんな記事とか書いてきましたが、そういうのはいったん全部リセットして、新規オリジナルデザインに変更しました。

公式のfacebookボタンが重すぎる

一番大きかったのは、facebookボタンの存在です。facebookボタンは、公式ソースを使うと激遅なのです。どのくらい激遅なのかというと、PageSpeed Insightsのテスト結果を10点下げるくらいに激遅。さすがに看過できません。

というわけで、どうせオリジナルボタンにするなら、他のボタンもデザインを一新して、表示を揃えようと、前から思っていたのです。

参考にした記事

オリジナルデザインを作る上で、今回は下記ページで公開されているソースを参考にしました。ありがとうございます。

【WordPress】8種類の自作SNSボタンのコードをご紹介！カウントも表示するよ

といっても、結構いじったので、あんまり面影はないかもしれません。

早速、オリジナルのシェアボタンのソースを公開

早速、ソースを公開します。内容物としては、以下です。

sns.phpに貼り付けるphpコード
スマホ用のCSS
PC用のCSS

基本的に、自分の使っているStinger5で使用することを前提に解説しますが、貼る位置を気を付ければ、別のテーマでも問題なく動くんじゃないかなと思います。

sns.phpに貼り付けるphpコード

以下のソースで、sns.phpの中身を置き換えます。(バックアップは忘れずに)

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>

<div class="share">


<?php if(is_mobile()) {  //以下スマホの場合 ?>
<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=nai_nari&tw_p=tweetbutton&related="nai_nari">Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>">
Facebook&nbsp;<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>

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

<!--はてブボタン-->  
<li class="hatebu">       
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>">はてブ&nbsp; <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>

<!--LINEボタン-->   
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</a>
</li>     

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

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2">RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fseminimalist.info%2Ffeed%2F"  target="blank">feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>
</div> 

<?php } else { //以下PCの場合?> 

<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=nai_nari&tw_p=tweetbutton&related="nai_nari" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">       
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1000');return false;">Facebook&nbsp; <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
      
<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">Google+&nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu"> 
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" >はてブ&nbsp; <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>

 <!--LINEボタン-->      
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="blank">LINE</a>
</li>       

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

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" target="blank">RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fseminimalist.info%2Ffeed%2F"  target="blank">feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>  
</div>
<?php } ?>
</div>

<?php

$url_encode=urlencode(get_permalink());

$title_encode=urlencode(get_the_title());

<?php if(is_mobile()) { //以下スマホの場合 ?>

<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=nai_nari&tw_p=tweetbutton&related="nai_nari">Twitter <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>

</li>

Facebook <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>

</li>

<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" >Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>

</li>

</li>

</li>

<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>">Pocket  <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fseminimalist.info%2Ffeed%2F" target="blank">feedly  <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>

</ul>

</div>

<?php } else { //以下PCの場合?>

<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=nai_nari&tw_p=tweetbutton&related="nai_nari" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">Twitter <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>

</li>

<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1000');return false;">Facebook  <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>

</li>

<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>

</li>

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" >はてブ  <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>

</li>

<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="blank">LINE</a>

</li>

<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="blank">Pocket  <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

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

</ul>

</div>

<?php } ?>

</div>

当ブログでは今のところ使っていませんが、SNS Count Cacheというプラグインによるカウント表示にも対応しているようです。

この辺りのコードは、参考記事のソースまま。「導入していなくても表示に問題ない」「その内気が向いたら導入するかも」という理由により、そのまま残してあります。

sns-top.phpも同様に置き換え。

スマホ用のCSS

次は、こちら。style.cssの中でスマホ用snsボタンについて記述している箇所(Stinger5だと761行目)を、下記で置き換えてください。バックアップ忘れずに。

/*--------------------------------
SNS
---------------------------------*/
.share{
	width:100%;
}
.share h4{
	font-size:120%; 
	text-align:center;
}

.sns{
	margin:0 auto;
	text-align:center;
	
}
.sns ul {
	list-style:none;
	padding: 0 0 20px 0;
}
.sns li {
	float:left;
	width: 24.5%; /*IE9未満とかプレフィックス使ってもだめなブラウザやOS対応*/
	widht: -webkit-calc(25% - 1px);/*Chrome19~25対応*/
	width: -moz-calc(25% - 1px);/*Firefox4~15対応*/
	width: calc(25% - 1px);
	margin:0 1px 1px 0;
}
.sns li a {
	font-size:60%;
	position:relative;
	display:block;
	padding:10px;
	color:#666;
	border-radius:3px;
	text-align:center;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
	color:#fff;
	background:#837054;
}
.sns  .twitter a:hover {
	background:#0092ca;
}
.sns .facebook a:hover {
	background:#2c4373;
}
.sns  .googleplus a:hover {
	background:#ad3a2d;
}
.sns .hatebu a:hover {
	background:#43638b;
}
.sns .line a:hover {
	background:#219900;
}
.sns  .pocket a:hover {
	background:#c0392b;
}
.sns  .rss a:hover {
	background:#e09900;
}
.sns  .feedly a:hover {
	background:#74a436;
}
.sns a {
	background:#dbdbbc;
}

/*--------------------------------

SNS

---------------------------------*/

.share{

width:100%;

}

.share h4{

font-size:120%;

text-align:center;

}

.sns{

margin:0 auto;

text-align:center;

}

.sns ul {

list-style:none;

padding: 0 0 20px 0;

}

.sns li {

float:left;

width: 24.5%; /*IE9未満とかプレフィックス使ってもだめなブラウザやOS対応*/

widht: -webkit-calc(25% - 1px);/*Chrome19~25対応*/

width: -moz-calc(25% - 1px);/*Firefox4~15対応*/

width: calc(25% - 1px);

margin:0 1px 1px 0;

}

.sns li a {

font-size:60%;

position:relative;

display:block;

padding:10px;

color:#666;

border-radius:3px;

text-align:center;

text-decoration: none;

text-shadow:1px 1px 0 rgba(255,255,255,0.3);

}

.sns li a:hover {

color:#fff;

background:#837054;

}

.sns .twitter a:hover {

background:#0092ca;

}

.sns .facebook a:hover {

background:#2c4373;

}

.sns .googleplus a:hover {

background:#ad3a2d;

}

.sns .hatebu a:hover {

background:#43638b;

}

.sns .line a:hover {

background:#219900;

}

.sns .pocket a:hover {

background:#c0392b;

}

.sns .rss a:hover {

background:#e09900;

}

.sns .feedly a:hover {

background:#74a436;

}

.sns a {

background:#dbdbbc;

}

ちなみに、白眉なのは、ボタンの横幅をcalcで自動制御しているところです。CSSの中で四則演算できる日がくるなんて…！　時代は変わるものです。CSS3さまさま。

PC用のCSS

最後は、これ。PC用のCSSです。Stinger5の場合は、style.cssの最後の方にある「/*– ここまで –*/」の上に貼りつけてください。

自分の場合、スマホ版とPC版のデザインをほぼ共通化してしまったので、コード量少な目。ただ、PC版の方は、多少、文字サイズとかを大きくしています。

/*--------------------------------------
  780px SNS
--------------------------------------*/
.share{
	padding-bottom:10px;
}
.sns ul {
	margin:0 auto;
	list-style:none;
	padding: 0 0 20px 0;
}
/*
 .sns li {
	width:24.8%;
	margin:0 1px 1px 0;
}
*/
.sns li a {
	font-size:75%;
	padding:10px 2px;
}
.sns li:nth-child(4n) {
	margin-right:0;
}

/*--------------------------------------

780px SNS

--------------------------------------*/

.share{

padding-bottom:10px;

}

.sns ul {

margin:0 auto;

list-style:none;

padding: 0 0 20px 0;

}

.sns li {

width:24.8%;

margin:0 1px 1px 0;

}

.sns li a {

font-size:75%;

padding:10px 2px;

}

.sns li:nth-child(4n) {

margin-right:0;

}

まとめ

というわけで、上記コードを適用すると、表示がこんなかんじになります。

↑シンプルな二行四列デザイン

↑マウスを当てると、各SNSのイメージカラーに変わるよ

いかがでしょうか。個人的には「フォーカスすると色が変わるけど、基本は目立たない色」という辺りが気に入っています。奥ゆかしくて。基本色については、皆さまのブログのテーマカラーにあわせて、変えてみてもいいかもしれません。

もっとカスタムしたい人は…。かわりにやろうか？

wordpressのカスタム依頼とかも受け付けていますので、もっと高度だったりオリジナルだったりなカスタマイズがしたい人はお声がけください。⇒「書くと叶う！らしいので、自分の得意なことを書いてみる。こんなないなりはいかがですか？」

↑他ミニマリストたちの生息地

最近書いた記事とか

他にも色々書いてます

- SNS, web, wordpress, ブログ運営・開発

反応・感想・リクエスト等お待ちしております。

Loading Facebook Comments ...

しぃより:
2016年1月18日 8:54 AM
カーソルが当たると各カラーに変わるのが良いですねー☆
シックで良い感じです（＾＾*）
返信
- ないなりより:
  2016年1月18日 10:25 AM
  しぃさん
  色はかなり迷いましたが、結果的にいいかんじに落ち着いた気がします！
  記事下はまだいいのですが、記事上にたくさん色があると、ごちゃごちゃしちゃって。ヾ(:３ﾉｼヾ)ﾉｼ
  返信