stinger5 SNSボタンが不揃いなのでカスタマイズしてサイドバーにも設置した

2015年2月13日stinger 5SNSシェア用ボタン, stinger5, カウンター付き, サイドバーstinger 5, stinger5, カウンター付き, サイドバー

stinger5

stinger5のSNSシェア用のボタンはよ~く観ると、デザインだけでなく、大きさまでばらばらだったりします。

SNSボタンの数も「ツィッター」・「フェースブック」・「グーグル」・「ハテナ」の4個です。

いまや「スマホ」の時代。ブログ表示させるSNSボタンも「LINE」・「Pocket」や「feedly」を設置しておけば、よりアクセスが見込まれると思う。

SNSシェア用ボタンを「LINE」・「Pocket」や「feedly」をカウンター付きで設置。さらにサイドバーにもSNSシェア用ボタンを設置してみた。

 

  • ここで紹介するstinger5のカスタマイズは、私の備忘録です。
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いいたします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

SNSシェア用ボタンをカウンター付きでデザインを統一させた。

私のブログで使っているWordpressテーマ「Stinger5」のデフォルトのSNSボタンはこんな感じ。
stinger5048
デザインだけでなく、大きさまでバラバラに観えます。せっかくカスタマイズするので、スマホからの流入を促すためにもSNSシェア用ボタンを「LINE」・「Pocket」や「feedly」をカウンター付きで設置。ついでにサイドバーにもSNSシェア用ボタンを設置してみた。

SNS Count Cache プラグインの取得

本当はプラグインをインストールしたくないけど、シェア数がわかれば勉強にもなるし励みにもなるので、シェア数をカウントさせるため「SNS Count Cache」のプラグインをインストールする。

ワードプレス⇒プラグイン⇒新規追加⇒検索窓に「SNS Count Cache」を入力して検索。インストール⇒有効化。

シェア数の取得はイラナイヨ!!っと言う人はプラグインは必要なし。

 

SNSシェア用ボタンのカスタマイズ

 

 

確認

アイコンフォントは設置が簡単なAwesomeを使用します。
このカスタマイズではアイコンフォントを使用するので、記述していないブログやコードを削除してしまったっていう人は、下記コードを「ヘッダー(header.php)」内の「</head>」より前に記述する。(stinger5 は入っている)
[php]
<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” rel=”stylesheet”>
[/php]

 

トップページのSNSシェア用ボタンをカスタマイズ

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

<div class=”share”>
<h4>ご購読ありがとうございます</h4>

<center><b>シェアしていただくと<br>励みになります!!<br>今後もお役に立てるようガンバリマス!!<br></b></center>
<?php if(is_mobile()) { //以下スマホの場合 ?>
<div class=”sns”>
<ul class=”clearfix”>
<!–ツイートボタン–>
<li class=”twitter”>
<a href=”http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=【●ツイッターアカウント名(例:@たかよし)●】&tw_p=tweetbutton”><i class=”fa fa-twitter”></i>Twitter&nbsp;<?php if(function_exists(‘get_scc_twitter’)) echo (get_scc_twitter()==0)?”:get_scc_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;?>”><i class=”fa fa-facebook”></i>
Facebook&nbsp;<?php if(function_exists(‘get_scc_facebook’)) echo (get_scc_facebook()==0)?”:get_scc_facebook(); ?></a>
</li>

<!–Google+1ボタン–>
<li class=”googleplus”>
<a href=”https://plus.google.com/share?url=<?php echo $url_encode;?>” ><i class=”fa fa-google-plus”></i>Google+&nbsp;<?php if(function_exists(‘get_scc_gplus’)) echo (get_scc_gplus()==0)?”:get_scc_gplus(); ?></a>
</li>

<!–はてブボタン–>
<li class=”hatebu”>
<a href=”http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>”><i class=”fa fa-hatena”></i>はてブ&nbsp; <?php if(function_exists(‘get_scc_hatebu’)) echo (get_scc_hatebu()==0)?”:get_scc_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(‘get_scc_pocket’)) echo (get_scc_pocket()==0)?”:get_scc_pocket(); ?></a></li>

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

<!–feedlyボタン–>
<li class=”feedly”>
<a href=”http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名(例:y-taka.biz)●】%2Ffeed%2F” target=”blank”><i class=”fa fa-rss”></i>feedly</a></li>
</ul>
</div>

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

<div class=”sns”>
<ul class=”clearfix”>
<!–ツイートボタン–>
<li class=”twitter”>
<a href=”http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=【●ツイッターアカウント名(例:@たかよし)●】&tw_p=tweetbutton”><i class=”fa fa-twitter”></i>Twitter&nbsp;<?php if(function_exists(‘get_scc_twitter’)) echo (get_scc_twitter()==0)?”:get_scc_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=300,width=600’);return false;”><i class=”fa fa-facebook”></i>Facebook&nbsp; <?php if(function_exists(‘get_scc_facebook’)) echo (get_scc_facebook()==0)?”:get_scc_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;”><i class=”fa fa-google-plus”></i>Google+&nbsp;<?php if(function_exists(‘get_scc_gplus’)) echo (get_scc_gplus()==0)?”:get_scc_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;” ><i class=”fa fa-hatena”></i>はてブ&nbsp; <?php if(function_exists(‘get_scc_hatebu’)) echo (get_scc_hatebu()==0)?”:get_scc_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;?>” onclick=”window.open(this.href, ‘PCwindow’, ‘width=550, height=350, menubar=no, toolbar=no, scrollbars=yes’); return false;”>Pocket&nbsp; <?php if(function_exists(‘get_scc_pocket’)) echo (get_scc_pocket()==0)?”:get_scc_pocket(); ?></a></li>

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

<!–feedlyボタン–>
<li class=”feedly”>
<a href=”http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名(例:y-taka.biz)●】%2Ffeed%2F” target=”blank”><i class=”fa fa-rss”></i>feedly</a></li>

</ul>
</div>
<?php } ?>
</div>
[/php]

上記コードをコピーして置く。
外観⇒テーマ編集⇒「sns-top.php」を開く(私の場合子テーマ)。

表示されているコードをすべて削除する。

次にさきほどコピーして置いたコードをペーストする。

ツィッターのところの【●ツイッターアカウント名(例:@たかよし)●】を削除してから、自分のアカウントを記述する。

feedlyボタンのところの【●ドメイン名(例:y-taka.biz)●】を削除してから、自分のドメイン名を記述する。

 

「ファイルを更新」ボタンをクリック。

個別記事下のSNSシェア用ボタンをカスタマイズ

やり方は「SNSシェア用ボタンのカスタマイズ」と同じなので、
「sns-top.php」内にあるすべてのコードをコピーして置く。

外観⇒テーマ編集⇒「sns.php」を開く(私の場合子テーマ)。

表示されているコードをすべて削除する。

次にさきほどコピーして置いたコードをペーストする。

 

「ファイルを更新」ボタンをクリック。

 

SNSシェア用ボタンを装飾する

スタイルシート(style.css)を開く(私の場合子テーマ)。

下記コードを

「/*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (max-width: 780px) {

}」より前に記述する。(スマホおよびタブレット用)
[css]
/*——————————–
SNS
———————————*/
.share{
width:100%;
}
.share h4{
font-size:120%;
text-align:center;
}

.sns{
margin:0 auto;
text-align:center;

}
.sns ul {
list-style:none;

}
.sns li {
float:left;
width:48%;
margin:0 2% 3% 0;
}
.sns li a {
font-size:80%;
position:relative;
display:block;
padding:10px;
color:#fff;
border-radius:6px;
text-align:center;
text-decoration: none;
text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
}

/* ツイッター */
.sns .twitter a {
background:#00acee;
box-shadow:0 5px 0 #0092ca;
}
.sns .twitter a:hover {
background:#0092ca;
}

/* Facebook */
.sns .facebook a {
background:#3b5998;
box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
background:#2c4373;
}

/* グーグル */
.sns .googleplus a {
background:#db4a39;
box-shadow:0 5px 0 #ad3a2d;
}
.sns .googleplus a:hover {
background:#ad3a2d;
}

/* はてぶ */
.sns .hatebu a {
background:#5d8ac1;
box-shadow:0 5px 0 #43638b;
}
.sns .hatebu a:hover {
background:#43638b;
}

/* LINE */
.sns .line a {
background:#25af00;
box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
background:#219900;
}

/* Pocket */
.sns .pocket a {
background:#f03e51;
box-shadow:0 5px 0 #c0392b;
}
.sns .pocket a:hover {
background:#c0392b;
}

/* RSS */
.sns .rss a {
background:#ffb53c;
box-shadow:0 5px 0 #e09900;
}
.sns .rss a:hover {
background:#e09900;
}

/* Feedly */
.sns .feedly a {
background:#87c040;
box-shadow:0 5px 0 #74a436;
}
.sns .feedly a:hover {
background:#74a436;
}
[/css]
次にPC用として
「/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 780px) {」
より下に下記コードを追記する。

または「/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 780px) {」

と「}」の間に下記コードを追記する。
[css]
/*————————————–
780px SNS
————————————–*/
.share{
padding-bottom:10px;
}
.sns ul {
margin:0 auto;
list-style:none;
}
.sns li {
width:23%;
margin:0 2% 3% 0;
}
.sns li a {
font-size:75%;
padding:10px 2px;
}
.sns li:nth-child(4n) {
margin-right:0;
}
[/css]
「ファイルを更新」ボタンをクリックしてカスタマイズ後のSNSシェア用ボタンを確認する。
stinger5050

 

PCで確認すると、おそらく各SNSシェア用ボタンの文字が小さいと思う。(そう感じるのは私だけ?)

これはカウンター数の桁数が多くなった場合を考慮してる。

 

なので現在は「.sns li a {」内のフォントサイズ「font-size:75%;」を「90%」に変更する。

 

サイドバーにもSNSシェア用ボタンを設置

 

サイドバーの上部にもSNSシェア用ボタンを設置しておくことで、ブログに訪れるお客様の増加につながると思う。

サイドバーの編集

外観⇒テーマ編集⇒サイドバー(sidebar.php)を開く(私の場合子テーマ内のサイドバー(sidebar.php))。

sidebar.php内の

[php]
<aside>
<?php if (is_404()) { ?>
<?php } else { ?>
<div class=”ad”>
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(4) ) : else : //アドセンス ?>
<?php endif; ?>
</div>
<?php } ?>
[/php]

の「<?php } ?>」の下に下記コードを追記する
[php]
<!–アイコン–>
<div class=”side-sns”>
<font size=”3″>フォローをお待ちしております!</font>
<!– thnx! http://www.iconsdb.com/ –>
<ul>
<li><a href=”https://twitter.com/【●アカウント名●】” target=”_blank” class=”twitter”><i class=”fa fa-twitter”></i>
</a></li>
<li><a href=”https://www.facebook.com/【●アカウント名●】” target=”_blank” class=”facebook”><i class=”fa fa-facebook”></i>
</a></li>
<li><a href=”https://plus.google.com/u/0/111443466191056101027/” target=”_blank” class=”google”><i class=”fa fa-google-plus”></i>
</a></li>
<li><a href=”<?php echo home_url();?>/feed/” target=”_blank” class=”rss”><i class=”fa fa-rss”></i>
</a></li>
<li><a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名●】%2F%2Ffeed’ target=’blank’><img id=’feedlyFollow’ src=’http://s3.feedly.com/img/follows/feedly-follow-logo-green_2x.png’ alt=’follow us in feedly’ width=’42’ height=’42’></a></li>
</ul>
</div>
[/php]

上記コード内にある【●アカウント名●】の箇所に自分のアカウント名を記述する。

また、上記コード内にある【●ドメイン名●】の箇所に自分のアカウント名を記述する。

 

サイドバーのSNSシェア用ボタンを装飾する

 

外観⇒テーマ編集⇒スタイルシート(style.css)を開く(私の場合子テーマ内のスタイルシート(style.css))。

下記コードを

「/*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (max-width: 780px) {

}」より前に記述する。(スマホおよびタブレット用)

 

[css]
/*———————————–
サイドバーSNSアイコン
————————————*/
.side-sns {
margin-bottom: 12px;
padding: 0.3em;
font-size: 30px;
}

.side-sns ul {
display: table;
table-layout: fixed;
width: 100%;
}

.side-sns ul li {
display: table-cell;
vertical-align: middle;
text-align: center;
}

.side-sns ul li a {
color: #666;
text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}

.side-sns ul li a:hover {
color: #ff7ddf;
text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}
/*————————————–
サイドSNSアイコン装飾
————————————–*/

#aside .side-sns ul { display: table; }
#aside .side-sns li { display: table-cell; }
#aside .side-sns ul li a { text-shadow: 0 0 1px #fff ; transition: 0.5s; }
#aside .side-sns a.twitter { color: #55acee; }
#aside .side-sns a.facebook { color: #3b5998; }
#aside .side-sns a.google { color: #dd4b39; }
#aside .side-sns a.rss { color: #ff9500; }
[/css]

尚、現地点では「feedly」の装飾はしていないので、「feedly」のソーシャルアイコンをそのまま使用してる。
「ファイルを更新」ボタンをクリックしてカスタマイズ後のSNSシェア用ボタンを確認する。
stinger5051

 

修正とカスタマイズ

ブログをカスタマイズしてたら、「サイドSNSアイコン」の装飾がなぜか崩れたので修正とついでにボックスで囲ってみた。

スタイルシート(style.css)に修正版を追記または変更する。(私の場合子テーマ内のスタイルシート(style.css))
[css]
————————————–
サイドバーSNSアイコン修正とカスタマイズ
————————————*/
.side-sns {
margin: 12px;
padding: 0.3em;
width: 88%;

}
.side-sns ul {
display: table;
table-layout: fixed;
width: 100%;
margin-bottom: 20px;
border-radius: 10px;
border: 2px solid #4169e1 !important;
box-shadow: 3px 3px 1px #666; /* ボックスにシャドウ */
-moz-box-shadow: 3px 3px 1px #666; /* Firefox */
-webkit-box-shadow: 3px 3px 1px #666; ; /* Chrome, Safari */
background-color:#fff;
-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Color=’#666666′, Direction=135, Strength=5);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=’#666666′, Direction=135, Strength=5);
display:block;
}

.side-sns ul li {
display: table-cell;
vertical-align: middle;
padding-left: 25px;
text-align: center;
}

.side-sns ul li a {
font-size: 30px;
color: #666;
text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
transition: 0.5s;/*– 文字色を変化させる時間 –*/
}

.side-sns ul li a:hover {
color: #ff7ddf;
text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}

.side-sns a.twitter { color: #55acee; }
.side-sns a.facebook { color: #3b5998; }
.side-sns a.google { color: #dd4b39; }
.side-sns a.rss { color: #ff9500; }
.side-sns a.icon-feedly { color: #008000;}
[/css]

 

まとめ

 

このSNSシェア用ボタンのカスタマイズは、とても気に入ってます。

しいて言えばロゴマークと各SNS会社名の間にスペースを入れたい気がする。

それは後日という事で。

このカスタマイズは

「ShufuLife」 様のブログを参考にしてもらいました。

アリガトウございます。