SNSボタンを大きくする方法「sns-php書替」初心者向け

メインブログsitnger 7のsns-bottonは、今流行のソーシャルボタンの横幅が1/3しか有りません。
そこで、通常ならプラグインのお世話になるところですが、今回は違う方法で出来ましたので、紹介したいと思います。

プラグインの多用は、JavaScriptが都度増えますから、速度低下を招きます、ご注意願います。

ソーシャルボタンの横幅拡大手順

下記に示す、HTMLをコピーして貼り付けるだけで完成しますが、手順をご説明致します。

 

ビフォーSNS Bottun

元は下記の画像の様に、小さかったでした。

sns botan old

アフターSNS Bottun

アフターは、下記の画像の様になりました。

sns botan new

 

sns.php編集

まずは、ワードプレスのダッシュボードの外観→テーマの編集にて、sns.phpをクリックして頂いて、表示させます。

sns php テーマ編集2

sns.php が下記の画像の様に表示されましたら、各ソーシャルボタンのHTMLを書き換えればこの様になります。

sns php old

当ブログのソーシャルボタンは、大きいボタンなので、それと同じように書き換えました。

sns php new

SNS拡大HTL

下記のHTMLをコピーして貼り付ければ、デカソーシャルボタンが表示されます。

どうぞ、御自由にお使いください。

 

<!–ツイートボタン–>
<li class=”twitter”>
<a onclick=”window.open(‘//twitter.com/intent/tweet?url=<?php echo $url_encode ?><?php echo $twitter_tag ?>&text=<?php echo $title_encode ?><?php echo $twitter_name ?>&tw_p=tweetbutton’, ”, ‘width=500,height=450’); return false;”><i class=”fa fa-twitter”></i><span class=”snstext <?php echo $plug; ?>” >Twitter</span><?php if(function_exists(‘scc_get_share_twitter’)) echo (scc_get_share_twitter()==’0′)?'<span class=”snstext pcnone” >Twitter</span>’:'<span class=”snscount”>’.scc_get_share_twitter().'</span>’; ?></a>
</li>
<!–Facebookボタン–>
<li class=”facebook”>
<a href=”//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><span class=”snstext <?php echo $plug; ?>” >Facebook</span>
<?php if(function_exists(‘scc_get_share_facebook’)) echo (scc_get_share_facebook()==0)?'<span class=”snstext pcnone” >Facebook</span>’:'<span class=”snscount”>’.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”></i><span class=”snstext <?php echo $plug; ?>” >Google+</span><?php if(function_exists(‘scc_get_share_gplus’)) echo (scc_get_share_gplus()==0)?'<span class=”snstext pcnone” >Google+</span>’:'<span class=”snscount”>’.scc_get_share_gplus().'</span>’; ?></a>
</li>
<!–ポケットボタン–>
<li class=”pocket”>
<a onclick=”window.open(‘//getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>’, ”, ‘width=500,height=350’); return false;”><i class=”fa fa-get-pocket”></i><span class=”snstext <?php echo $plug; ?>” >Pocket</span><?php if(function_exists(‘scc_get_share_pocket’)) echo (scc_get_share_pocket()==0)?'<span class=”snstext pcnone” >Pocket</span>’:'<span class=”snscount”>’.scc_get_share_pocket().'</span>’; ?></a></li>
<!–はてブボタン–>
<li class=”hatebu”>
<a href=”//b.hatena.ne.jp/entry/<?php the_permalink(); ?>” class=”hatena-bookmark-button” data-hatena-bookmark-layout=”simple” title=”<?php the_title(); ?>”><span style=”font-weight:bold” class=”fa-hatena”>B!</span><span class=”snstext <?php echo $plug; ?>” >はてブ</span>
<?php if(function_exists(‘scc_get_share_hatebu’)) echo (scc_get_share_hatebu()==0)?'<span class=”snstext pcnone” >はてブ</span>’:'<span class=”snscount”><span class=”hatebno”>’.scc_get_share_hatebu().'</span></span>’;
?></a><script type=”text/javascript” src=”//b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>

</li>
<!–LINEボタン–>
<li class=”line”>
<a href=”//line.me/R/msg/text/?<?php echo $title_encode . ‘%0A’ . $url_encode;?>” target=”_blank”><span class=”snstext”>LINEへ送る</span></a>
</li>
</ul>

</div>

<?php
}

 

あとがき

実に簡単ですよね。

バックアップは、メモ帳などに必ずコピーしておいください。気に入らなかったり誤動作の場合元に戻すのが、困難になります。

sns php new good

 

 

楽天広告

スポンサーリンク