テーマを「SANGO」に変更しました。

【STINGER5】コピペで出来る!オリジナルSNSボタンを設置する方法

original-sns-button

このサイトの記事下に表示している、SNSボタンの設置方法を紹介。

ボタンは、マウスオーバーで沈むデザインです。 display:table-cellを使っているので、スマホでもキレイに表示可能です!

はじめに

ボタンのアイコンは、アイコンフォントの「Font Awesome」と「IcoMoon」を使用。 pocket・feedly・はてブ。この3つのボタンのアイコンは、Icomoonで表示しています。

IcoMoonの設定が面倒な場合は、Font Awesomeで、似たようなアイコンを探して設定するのが良いと思います。

 

style.cssの編集

/*---------------------------------------------
記事下SNSボタン
---------------------------------------------*/
.original-sns {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

.original-sns li {
  display: table-cell;
  vertical-align: middle;
  height: 30px;
  border-collapse: separate;
}

.original-sns {
  border-collapse: separate;
  border-spacing: 3px;
}

.original-sns a {
  color: #fff;
  display: block;
  font-size: 10px;
  text-decoration: none;
  padding: 10px 5px 2px 5px;
}

ul.original-sns {
margin: 0;
padding: 0;
}

/*--------------------------------
Twitterボタン
--------------------------------*/
.twi-btn {
    padding: 5px 0 0;
}
 
.twi-btn a{
    background-color: #00aced;
    border-radius: 3px;
    box-shadow: 0 4px 0 #02658B;
    color: #FFFFFF;
    display: block;
    font-size: 90%;
    font-weight: normal;
    height: 30px;
    margin: 0 auto;
    text-decoration: none;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
 
.twi-btn a:hover {
    top:1px;
    left:0px;
    position:relative;
    box-shadow: 0 1px 0 #02658B;
    margin-bottom: -2px;
    margin-top: 2px;
    text-decoration: none;
}
 
/*--------------------------------
Facebookボタン
--------------------------------*/
.fb-btn {
    padding: 5px 0 0;
}
 
.fb-btn a{
    background-color: #3b5998;
    border-radius: 3px;
    box-shadow: 0 4px 0 #1D315C;
    color: #FFFFFF;
    display: block;
    font-size: 90%;
    font-weight: normal;
    height: 30px;
    margin: 0 auto;
    text-decoration: none;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
 
.fb-btn a:hover {
    top:1px;
    left:0px;
    position:relative;
    box-shadow: 0 1px 0 #1D315C;
    margin-bottom: -2px;
    margin-top: 2px;
    text-decoration: none;
}

/*--------------------------------
Google+ボタン
--------------------------------*/
.google-btn {
    padding: 5px 0 0;
}
 
.google-btn a{
    background-color: #CC3732;
    border-radius: 3px;
    box-shadow: 0 4px 0 #B3291C;
    color: #FFFFFF;
    display: block;
    font-size: 90%;
    font-weight: normal;
    height: 30px;
    margin: 0 auto;
    text-decoration: none;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
 
.google-btn a:hover {
    top:1px;
    left:0px;
    position:relative;
    box-shadow: 0 1px 0 #B3291C;
    margin-bottom: -2px;
    margin-top: 2px;
    text-decoration: none;
}


/*--------------------------------
はてブボタン
--------------------------------*/
.hatebu-btn {
    padding: 5px 0 0;
}
 
.hatebu-btn a{
    background-color: #008FDE;
    border-radius: 3px;
    box-shadow: 0 4px 0 #2A5684;
    color: #FFFFFF;
    display: block;
    font-size: 90%;
    font-weight: normal;
    height: 30px;
    margin: 0 auto;
    text-decoration: none;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

 
.hatebu-btn a:hover {
    top:1px;
    left:0px;
    position:relative;
    box-shadow: 0 1px 0 #2A5684;
    margin-bottom: -2px;
    margin-top: 2px;
    text-decoration: none;
}


/*--------------------------------
pocketボタン
--------------------------------*/
.pocket-btn {
    padding: 5px 0 0;
}
 
.pocket-btn a{
    background-color: #DC3D50;
    border-radius: 3px;
    box-shadow: 0 4px 0 #BA2830;
    color: #FFFFFF;
    display: block;
    font-size: 90%;
    font-weight: normal;
    height: 30px;
    margin: 0 auto;
    text-decoration: none;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
 
.pocket-btn a:hover {
    top:1px;
    left:0px;
    position:relative;
    box-shadow: 0 1px 0 #BA2830;
    margin-bottom: -2px;
    margin-top: 2px;
    text-decoration: none;
}

/*--------------------------------
購読ボタン
--------------------------------*/
.original-feed {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

.original-feed li {
  display: table-cell;
  vertical-align: middle;
  height: 30px;
  border-collapse: separate;
  border-spacing: 3px;
}

.original-feed {
  border-collapse: separate;
  border-spacing: 3px;
}

.original-feed a {
  color: #FFFFFF;
  display: block;
  font-size: 10px;
  text-decoration: none;
  padding: 10px 5px 0;
}

ul.original-feed {
padding: 0;
margin-bottom: 0;
}



/*--------------------------------
RSSボタン
--------------------------------*/
.rss-btn {
    padding: 0px 0 0;
}
 
.rss-btn a{
    background-color: #ffb53c;
    border-radius: 3px;
    box-shadow: 0 4px 0 #e09900;
    color: #FFFFFF;
    display: block;
    font-size: 90%;
    font-weight: normal;
    height: 30px;
    margin: 0 auto;
    text-decoration: none;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
 
.rss-btn a:hover {
    top:1px;
    left:0px;
    position:relative;
    box-shadow: 0 1px 0 #ffb53c;
    margin-bottom: -2px;
    margin-top: 2px;
    text-decoration: none;
}

/*--------------------------------
feedlyボタン
--------------------------------*/
.feedly-btn {
    padding: 0px 0 0;
}
 
.feedly-btn a{
    background-color: #87c040;
    border-radius: 3px;
    box-shadow: 0 4px 0 #74a436;
    color: #FFFFFF;
    display: block;
    font-size: 90%;
    font-weight: normal;
    height: 30px;
    margin: 0 auto;
    text-decoration: none;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
 
.feedly-btn a:hover {
    top:1px;
    left:0px;
    position:relative;
    box-shadow: 0 1px 0 #87c040;
    margin-bottom: -2px;
    margin-top: 2px;
    text-decoration: none;
}

記事下SNSボタンの5つを「.original-sns」 rssとfeedlyの2つのボタンを「original-feed」にしています。  

 

single.phpの編集

5つのSNSボタン(original-sns)を表示する場合

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>
<div class="original-sns" style="margin: 0 padding: 0;">
<ul class="original-sns">

<!-- ポケットボタン -->      
<li class="pocket-btn">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="blank"><i class="fa fa-chevron-down fa-2x"></i>
 <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a>
</li>

<!-- ツイートボタン -->
<li class="twi-btn"> 
<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 fa-2x"></i><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>

<!-- Facebookボタン -->      
<li class="fb-btn">       
<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 fa-2x"></i> <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>

<!-- はてブボタン -->  
<li class="hatebu-btn"> 
<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-bold fa-2x"></i>
 <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>
      
<!-- Google+1ボタン -->
<li class="google-btn">
<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 fa-2x"></i><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>
</div>

single.phpの表示したい場所に貼り付け。 twitterのコードの◯◯◯◯◯の部分は、自分のTwitterのアカウントを入力(@なし)    

 

rssとfeedlyのボタン(original-feed)を表示する場合

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

<div class="original-feed" style="margin: 0 padding: 0;">
<ul class="original-feed">

<!--RSSボタン-->
<li class="rss-btn">
<a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss"></i>&nbsp;RSS</a></li>
 
<!--feedlyボタン-->
<li class="feedly-btn">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fnekonotesou.net%2Ffeed%2F"  target="blank"><i class="fa fa-rss"></i>&nbsp;feedly<?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>
</div>

feedlyのコードの「nekonotesou.net」は、自分のサイトのアドレスに変更して下さい。  

 

さいごに

single.phpのコードが見難い時は、新しいphpファイルを作って、別に管理すると便利です。

「sns.php」というファイルを新規作成した場合

<?php get_template_part(‘sns’); //ソーシャルボタン読み込み ?>

上のコードを一行追加すれば、sns.phpファイルを読み込んでくれるので、スッキリして見やすくなります。  

1 Comment

ライトニング2014

ありがたく
そのままコピペで使わせて頂きました!
ありがとうございます

返信する

コメントを残す