Stinger7の下の部分に表示されるSNSボタン一覧を編集してみました。
PC表示とモバイル表示で見た目を変えます。
Sponsored Links
【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 <?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;
}
}
上記のように編集すれば、モバイル表示でも見やすく表示できます。
まとめ
これでSNSボタンがかなり見やすくなります。
ただ、これは各SNSのシェア数表示については考慮していません。シェア数を入れる場合はもう少し調整が必要になるかもしれません。
参考になれば幸いです。
Sponsored Links