yuichi.co

ゆういちのノートブック

【Stinger7】記事下のSNSシェアボタンをオリジナルにカスタマイズする方法

2016/03/17
 14539

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズする方法

@yuichico_です。今回はStinger7の単一記事下のツイッター、フェイスブック、グーグルプラス、ポケット、はてなブックマーク、ラインのSNSシェア(共有)ボタンとその上に文章(シェアしていただけると助かります。)をオリジナルにカスタマイズしました。デフォルトからあったボタンをカスタマイズしましたので、案外簡単にできました。完成図としてはこんな感じです。スマホ版だと縦3列横2列に設置しました。

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされない場合 スマホ版

PC版だと縦6列横1列に表示します。

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされない場合 PC版

 

Stinger7ではTwitterとLINEを除いて、各ソーシャルネットワークからシェア数を取ってこれる設定になっています。もし、記事がシェアされた場合は以下のように表示されるようにしました。スマホ版です。

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされた場合 スマホ版

PC版です。

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされた場合 PC版



ダウンロードしてインストール

リンク Stinger7親テーマと子テーマのダウンロードとインストールのやり方

子テーマは必ずインストールしてください。

子テーマへアップロード

sns-top.phpとsns.phpを子テーマへアップしてください。

リンク Stinger7で特定の親テーマのファイルを子テーマへアップロードする方法

カスタマイズ

※追記 一番下の まとめ に新しいsns.phpとstyle.cssが掲載してあります。そちらのコピペしてください。オリジナルSNSボタンのサイズとアイコンの位置が合っていなかったためです。またsns-top.phpはすべて削除してください。トップページにも反映されてしまいます。

sns-top.phpとsns.php、style.cssをカスタマイズします。なおStinger7のみのカスタマイズになりますので、他Stingerシリーズをカスタマイズする方は参考にしないでください。

sns-top.php

デフォルトのトップページ下にあるSNSシェアボタンは削除しました。理由は右サイドバーにすでに設置したためです。

リンク 【Stinger7】右サイドバーにSNSフォローボタンを簡単に設置するカスタマイズ

外観→テーマ編集→sns-top.phpへ 全て空白にして削除してください。そのあと ファイルを更新 をクリックします。ご自身のブログを確認するとトップページにあるSNSシェアボタンは削除されているはずです。

sns-top.phpの記述を全て削除して ファイルを更新

sns.php

外観→テーマ編集→sns.phpで以下をコピペしてください。シェアしていただけると助かります。は、お好きな文章に変えても、変えなくても問題ございません。

<?php if ( trim( $GLOBALS["stdata12"] ) == '' ) {
	if ( trim( $GLOBALS["stdata25"] ) !== '' ) {
		$twitter_name = esc_attr( $GLOBALS["stdata25"] );
	}else{
		$twitter_name = '';
	}

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

        <p>シェアしていただけると助かります。</p>
	<div class="sns">
	<ul class="clearfix">
		<!--ツイートボタン-->
		<li class="twitter"> 
		<a target="_blank" href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=<?php echo $twitter_name ?>&tw_p=tweetbutton"><i class="fa fa-twitter fa-2x"></i><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':'<span class="snstext">'.scc_get_share_twitter().'</span>'; ?></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;?>" target="_blank"><i class="fa fa-facebook fa-2x"></i>
		<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':'<span class="snstext">'.scc_get_share_facebook().'</span>'; ?></a>
		</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 fa-2x"></i><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':'<span class="snstext">'.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 fa-2x"></i><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':'<span class="snstext">'.scc_get_share_pocket().'</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; font-size:26px">B!</span>
			<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':'<span class="snstext"><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>

		<!--LINEボタン-->   
		<li class="line">
		<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><span style="font-weight:bold; font-size:20px">LINE</span></a>
		</li>     
	</ul>

	</div> 

	<?php
}

CSS

PC版とスマホ版に分けて記述しました。.sns li のwidthをパーセント指定することでスマホの機種ごとに、snsシェアボタンの幅を均等に表示します。なお、画像はシェアされた場合のものです。シェアされない場合は数字は表示されませんが、アイコンは表示されます。

スマホ版

それぞれ縦と横に応じてカスタマイズしてみました。縦横の列を変えたい場合は、.sns li の%を変えます。外観→テーマ編集→style.cssの一番下へ以下をコピペします。

.sns{
    margin: 0 auto;
}
.sns li {
    width: 30%;
}
.sns li a {
    font-size: 80%;
    padding: 19px 0px 10px;
}
.sns .hatebu a {
    padding: 19px 0px 12px;
}
.sns .line a {
    padding: 19px 0px 14px;
}
.sns .facebook .snstext,
.sns .googleplus .snstext,
.sns .pocket .snstext,
.sns .hatebu .snstext {
    border-left: none;
    padding-left: initial;
    margin-left: initial;
}
.snstext {
    font-size: 20px;
    vertical-align: top;
}

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされた場合 スマホ版

縦2列横3列
.sns li {
    width: 46.66666%;
}

横3列縦2列 SNSオリジナルボタン カスタマイズ

縦1列横6列
.sns li {
    width: 98.44444%;
}

横6列縦1列 SNSオリジナルボタン カスタマイズ

縦6列横1列

この場合のCSSは、シェアの数字が改行されるようになります。均等にシェアされれば問題ないですが、はてぶが1000を超えてフェイスブックが10ほどでしたら、はてぶのシェア数が改行されておかしくなります。こんな感じになりますので、ここには記述しません。

横1列縦6列 SNSオリジナルボタン 記述しない

PC版

スマホと同様、縦横の列を変えたい場合は、.sns li の%を変えます。外観→テーマ編集→style.cssの一番下へ以下をコピペします。

@media only screen and (min-width: 781px) {
.sns li {    
    width: 15.11111%;
}
.sns li a {
    font-size: 90%;
    padding: 18px 2px 10px;
}
.sns .hatebu a {
    padding: 18px 0px 10px;
}
.sns .line a {
    padding: 19px 0px 11px;
}
}

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされた場合 PC版

縦3列横2列
@media only screen and (min-width: 781px) {
.sns li {
    width: 31.8%;
}
}

横2列縦3列 SNSオリジナルボタン カスタマイズ PC版

縦2列横3列
@media only screen and (min-width: 781px) {
.sns li {
    width: 48.5%;
}
}

横3列縦2列 SNSオリジナルボタン カスタマイズ PC版

縦1列横6列
@media only screen and (min-width: 781px) {
.sns li {
    width: 99.33333%;
}
}

横6列縦1列 SNSオリジナルボタン カスタマイズ PC版

まとめ

いかがでしたか?Twitterからのシェア数を取ってこれなくなったのは残念ですが、他SNSからは取ってこられます。オリジナルSNSシェアボタンにすることで公式よりも軽くなり、サイトが表示される速度が早くなったことがいいですね。参考にしてみてください。

※追記 オリジナルSNSシェアボタンのサイズとアイコンの位置が合わない、との問い合わせがありましたので、修正しました。今現在2016/03/17以降使用しているカスタマイズです。これで問題ないと思います。また、違うようでしたら再度お問い合わせください。

sns.php

外観→テーマ編集→sns.phpに記述してある、すべて削除して以下をコピーして貼り付けをしてください。

<?php if ( trim( $GLOBALS["stdata12"] ) == '' ) {
	if ( trim( $GLOBALS["stdata25"] ) !== '' ) {
		$twitter_name = esc_attr( $GLOBALS["stdata25"] );
	}else{
		$twitter_name = '';
	}

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

        <p>シェアしていただけると助かります。</p>
	<div class="sns">
	<ul class="clearfix">
		<!--ツイートボタン-->
		<li class="twitter"> 
		<a target="_blank" href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=<?php echo $twitter_name ?>&tw_p=tweetbutton"><i class="fa fa-twitter fa-2x"></i><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':'<span class="snstext">'.scc_get_share_twitter().'</span>'; ?></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;?>" target="_blank"><i class="fa fa-facebook fa-2x"></i>
		<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':'<span class="snstext">'.scc_get_share_facebook().'</span>'; ?></a>
		</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 fa-2x"></i><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':'<span class="snstext">'.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 fa-2x"></i><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':'<span class="snstext">'.scc_get_share_pocket().'</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; font-size:24px">B!</span>
			<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':'<span class="snstext"><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>

		<!--LINEボタン-->   
		<li class="line">
		<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><span style="font-weight:bold; font-size:20px">LINE</span></a>
		</li>     
	</ul>

	</div> 

	<?php
}

style.css

外観→テーマ編集→style.cssに以下を一番下へコピペしてください。

.sns {
    margin: 0 auto;
}
.sns li {
    width: 30%;
}
.sns li a {
    font-size: 80%;
    padding: 18px 0 12px;
}
.sns .hatebu a {
    padding: 17px 0 14px;
}
.sns .line a {
    padding: 17px 0 15px;
}
.sns .facebook .snstext,
.sns .googleplus .snstext,
.sns .pocket .snstext,
.sns .hatebu .snstext {
    border-left: none;
    padding-left: initial;
    margin-left: initial;
}
.snstext {
    font-size: 20px;
    vertical-align: top;
}
@media only screen and (min-width: 781px) {
.sns li {    
    width: 15.11111%;
}
.sns li a {
    font-size: 90%;
    padding: 20px 0 10px;
}
.sns .twitter a {
    padding: 18px 0 12px;
}
.sns .hatebu a {
    padding: 18px 0 12px;
}
.sns .line a {
    padding: 18px 0 14px;
}
}

Stinger7 カスタマイズ