【Stinger7 SNSボタン】デフォルトではボタンが小さいので、幅を広げてみる。Pocketボタンを削除し、Feedlyボタンを追加。

Stinger7の下の部分に表示されるSNSボタン一覧を編集してみました。

PC表示とモバイル表示で見た目を変えます。

【Stinger7】SNSボタン編集⇒Feedlyボタンを追加し、押しやすいようにボタンの幅を広げてみる。

ポケットボタンを削除

僕の場合、ポケットボタンを削除しました。

必要な人は削除しないようにしましょう。

【sns.php】と【sns-top.php】を編集します。

それぞれ、個別ページ用とトップページ用になり、PHPファイルは分かれています。

構造は全く同じです。

ファイル内に【ポケットボタン】という箇所がありますので、そこを削除します。

具体的には下記のコードを削除します＞＞

<!--ポケットボタン-->      
<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="snstext">'.scc_get_share_pocket().'</span>'; ?></a>
</li>

Feedlyボタンを追加

【LINEに送る】ボタンの隣にFeedlyボタンを追加します。

【LINEボタン】のコードの下にFeedlyのボタン用のコードを追加します＞＞

<!--LINEボタン-->   
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><span class="snstext">LINEへ送る</span></a>
</li>     
                
<!--追加 feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fitkhoshi.com%2Fblog%2Ffeed" target="blank"><i class="fa fa-rss"></i> feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a>
</li>

※URLの部分は自分のブログのURLにしておきましょう。ここでは当ブログのURLになっています。

style.cssを編集⇒Feedlyボタン用のコードを追加

これだけではボタンは表示されませんので、スタイルシートにFeedlyボタン用のコードを追加します。

場所は【Pocket】ボタン用のコードの下に追記しましょう＞＞

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

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

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

/* 追加 feedly */
.sns .feedly a {
	background:#87c040;
}
.sns .feedly a:hover {
	background:#74a436;
}
 
.sns .feedly .snstext {
	border-left:1px solid #E0776D;
	padding-left:10px;
	margin-left:5px;
}

ボタンの幅を揃える（PC表示用）

これでボタンが表示されるようになります。

ただ、これではバランスが悪いので、ボタンの幅を大きくしてみます。

SNSとコメントアウトされている場所のすぐ下に下記のコードを入れます＞＞

/*--------------------------------
SNS
---------------------------------*/

/*追加 SNSボタンの幅を広げる*/
.sns li {
	width: 15%; /*この部分でボタン幅の調整が可能*/
	font-size: 14px;
	line-height: 27px;
}
.sns li a {
	padding:3px 5px;
}

.snstext2 {
	font-size: 13px;
	margin-left: 5px;
}
.sns li a {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
/*追加ここまで*/

これでPC表示でかなり見やすくなりました。

Stinger7はレスポンシブデザインとなっていますので、次はモバイル表示用にスタイルシートを編集します。

ボタンの幅を揃える（モバイル表示用）

このままではモバイル表示の際に表示が崩れてしまいますので、モバイル表示用にもコードを追記します。

下記の場所にコードを追加します＞＞

@media only screen and (max-width: 780px) {
	#side aside {
		clear: both;
		float: none;
		width: auto;
		position: static !important;;
	}
        
        /*追加 モバイル表示のSNSボタン*/
        .sns li {
            width: 45%;
            font-size: 14px;
            line-height: 27px;
        }
}

上記のように編集すれば、モバイル表示でも見やすく表示できます。