simplester

ブログ雑記

SIMPLESTERのカスタマイズ【SNSボタンの変更】

更新日:

 

STINGER+SIMPLESTERのカスタマイズ記事。

SNSボタンを変更するにあたり、CSSで色々手間取ったので備忘録として。

SNSボタン変更の概要

SNSボタン変更デザイン

デフォルト↓

simplestersns

変更後↓

snsボタン変更後

人気のちゅんこ@shufulifeさんのSNSボタンです。

SNSボタン変更の目的

  • ユーザビリティ向上
  • デザイン性
  • 表示速度の向上

サイズも大きくて、色も分かりやすいのでユーザビリティやデザインは文句無いです。

特に僕の場合は表示速度向上の目的が大きいです。やはり、公式のSNSボタンを並べるとかなり遅いですね。速度アップに期待!

スポンサーリンク

カスタマイズ手順

上手くいかなかったところも備忘録的に書き残します。

【参考記事】【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ

こちらの記事にちょっと一手間加えただけです。

*SIMPLESTER ver4を利用しています。

プラグインSNS Count Cacheをインストール

SNSのシェア数をキャッシュして表示してくれるプラグイン。プラグインの新規追加から検索してインストールして有効化しておきます。それだけで良いです。

*シェア数の表示が必要無い人は不要です。

プラグインの詳細は開発者のページで確認してください!

バックアップを取る

触る箇所は以下。

  • style.css (SIMPLESTER)
  • style.css (STINGER5)
  • sns.php(STINGER5)
  • sns-top.php(STINGER5)

以上をバックアップしておきます。

STINGER5のstyle.cssを書き換え

cssの中のsnsの記述を以下に書き換えます。

/*--------------------------------
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;
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
/*-- ここまで --*/
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
/*--------------------------------------
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;
}
/*-- ここまで --*/
}

↑この配置になるようにコピペです。

@media only screen and (min-width: 780px)の下に書くという部分だけ注意すればOK。

sns.phpとsns-top.phpを書き換え

以下のphpコードをそのまま書き換える。

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>
<div class="share">
<h4>ご購読ありがとうございます</h4>
<?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('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_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('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_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('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_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('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_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('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_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【●ドメイン名(例:shufulife.com)●】%2Ffeed%2F"  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>    
</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('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_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('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_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('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_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('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_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;?>" target="blank">Pocket&nbsp; <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_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【●ドメイン名(例:shufulife.com)●】%2Ffeed%2F"  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>    
</ul>  
</div>
<?php } ?>
</div>
  • ツイッターの【●ツイッターアカウント名(@なし)●】に自分のアカウントを入れる
  • feedlyの【●ドメイン名(例:shufulife.com)●】に自分のドメインを入れる

【】も外してくださいね。

sns.phpとsns-top.phpの両方を書き換えます。

SIMPLESTER用にcssを修正

上記の手順で本家の手順は終わりなのですが、SIMPLESTERの場合はもう一手間。

SIMPLESTERのcssのsns部分を削除

小テーマ内のcssが優先されるので、sns関連の記述を削除。以下の2カ所。

/*sns btn 周り
--------------------*/
.sns{position:relative;display: flex;justify-content: center;}
.snsb{display:flex; justify-content:space-between; display:-webkit-flex; -webkit-justify-content:space-between; text-align:center; padding:15px 0px 10px; padding:10px;background-color: #fff;border:1px solid #eee;border-bottom: 2px solid #eaeaea;}
.sns .snsb li {margin: 0 10px;}
.post .sns .snsb.clearfix {background-color: #f9f9f9;}

 

.snsb:before {font-family: FontAwesome;content: "\f164";height: 17px;background-color: #F6CA06;padding: 9px;border: 5px solid #fff;line-height: 17px;font-size: 17px;color: #FFF;width: 17px;border-radius: 50%;margin-left: -70px;margin-top: 10px;position: absolute;box-shadow: 0px 1px 1px #eaeaea;}

はい。これで、めでたくこうなります↓

snsボタン修正前

何か、黒い点と白い点線が入っていますね。これを消すのにsimplesterのcssに修正用の記述をします。

修正用コードです。

/*--- sns修正用 ---*/
.sns ul li {list-style-type:none;}
.sns a {border:none;}

場所は以下↓

/*タイポグラフィ 周り
--------------------*/
.post h3{ border-bottom:1px dotted #F6CA06}
p{ font-size:16px;  line-height:27px;  margin-bottom:20px}
.post a{text-decoration:none;  border-bottom:1px dashed}
.post blockquote{ margin-right:0;  border-left:3px solid #CCC}
.post ul li{ font-size:14px;  line-height:27px;  list-style-type:square;}
.post ol{padding-left:30px}
.wp-caption-text:before{content:"■ "}/*キャプション文字列の前のアイコン*/
table, table tr td, td, th, .post table{ border-color:#ccc}
【ここより後で】
↓
/*--- sns修正用 ---*/
.sns ul li {list-style-type:none;}
.sns a {border:none;}
↑
【これより手前に】
/*media Queries PCサイズ(最低1150pxのサイズ)
----------------------------------------------------*/
@media only screen and (min-width: 1150px) {

【タイポグラフィ周り】より後ろ、かつ【@media only screen and (min-width: 1150px)】より手前であればどこでもいいはず。

特にこだわりなければ、【/*media Queries PCサイズ(最低1150pxのサイズ)--*/】の直前でいいです。

完成です!

表示速度の変化

ある個別ページで前後の表示速度の比較を取りました。日時が少し異なるので、若干信頼性にかけますが、0.3〜0.5秒くらい早くなった感じがします。遅くはなってないと思いますw

まとめ

STINGER5のcssがSIMPLESTERのcssで上書きされてうまく表示出来ないので、元に戻るように更にcssで上書き修正するというやり方でした。

記事を書くにあたり、ちゅんこ@shufulifeさんのコードをお借りしました。

またCSSの修正について、SIMPLESTER開発者のこふす@_cofusさんにアドバイス頂きました。

お二方ありがとうございます!

-ブログ雑記

Copyright© とらっぷる , 2017 AllRights Reserved Powered by AFFINGER4.