はてなブログテーマ Sentence

【レスポンシブWebデザイン対応】文章の読みやすさを重視したシンプルなはてなブログテーマです

SNSシェアボタンの設置

記事下にSNSシェアボタンを設置します。

設置するのは、はてなブックマーク、Twitter、Facebook、Pocketの4種類です。以前までGoogle+も設置していましたが、サービス終了が決まっているので削除しました。

スクリプトで記事直下(はてなスターよりも上部)に表示させます。アイコンの表示にウェブフォントを使用します。

設定→詳細設定→headに要素を追加

<!-- SNSシェアボタン用のウェブフォント -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

デザインCSS

/* シェアボタンのCSS */
.clearfix {
  zoom: 1
}
.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: ""
}
.sns-share {
  list-style: none;
  position: relative;
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 3px 5px 3px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: #999
}
.sns-share span {
  position: absolute;
  color: #fff;
  font-size: 30px
}
.sns-share.hatebu.sns-share span {
  position:absolute; padding:6px 10px;
  color: #fff
}
.sns-share.twitter.sns-share span {
  position: absolute;
  padding: 9px 9px;
  color: #fff
}.sns-share.facebook.sns-share span {
  position: absolute;
  padding: 8px 10px;
  color: #fff
}
.sns-share.googleplus.sns-share span {
  position: absolute;
  padding: 9px 11px;
  color: #fff
}
.sns-share.pocket.sns-share span {
  position: absolute;
  padding: 8px 11px;
  color: #fff
}
.sns-share a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #fff;
  text-indent: -999px
}
.sns-share a:hover {
  background-color: #fff;
  opacity: .5
}
ul.share-group {
  list-style: none;
  width: 230px;
  margin: auto;
  padding: 0
}
.sns-share.hatebu {
  background-color: #006fbb
}
.sns-share.twitter {
  background-color: #00acec
}
.sns-share.facebook {
  background-color: #265a96
}
.sns-share.googleplus {
  background-color: #dd4b39
}
.sns-share.pocket {
  background-color: #EE4256
}
@media (min-width: 768px) {
  .sns-share {
    width: 25%;
    margin: 0 0 5px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
  }
  .sns-share.facebook.sns-share span,.sns-share.googleplus.sns-share span,.sns-share.hatebu.sns-share span,.sns-share.pocket.sns-share span,.sns-share.twitter.sns-share span {
  padding-left: 38.462%
  }
  .sns-share a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #fff;
    text-indent: -999px
  }
  ul.share-group {
    list-style: none;
    width: 100%;
    margin: auto;
    padding: 0
  }
}

記事下

<!-- シェアボタンのHTML -->
<ul class="share-group clearfix">
  <li class="sns-share hatebu"><span><i class="blogicon-bookmark lg"></i></span><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}"class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}"data-hatena-bookmark-layout="simple"></a></li>
  <li class="sns-share twitter"><span><i class="blogicon-twitter lg"></i></span><a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}"></a></li>
  <li class="sns-share facebook"><span><i class="blogicon-facebook lg"></i></span><a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}"target="_blank"></a></li>
  <li class="sns-share pocket"><span><i class="fa fa-get-pocket"></i></span><a href="http://getpocket.com/edit?url={URLEncodedPermalink}"target="_blank"></a></li>
</ul>