日々のデザイン

モノ・コトを片づけて、シンプルで心地よい暮らし。

コピペOK!カウンター・文字なしのシンプルなSNSシェアボタン

f:id:evijp:20170509001758p:plain

タイトル下に置いたときに邪魔にならない、カウンター・文字なしのシンプルなSNSシェアボタンの設置方法です。
レスポンシブデザインに対応しています。

コピペ用コード

イコン画像読み込みコード

イコン画像を読み込むためのコードです。

「設定 > 詳細設定 > 検索エンジン最適化 > headに要素を追加」に挿入してください。 f:id:evijp:20170509043639p:plain

▼コピペ用コード

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

シェアボタンコード

シェアボタン

LINEボタンはスマホのみ表示されます。

「デザイン > カスタマイズ > 記事 > 記事上」に挿入してください。 f:id:evijp:20170509043636p:plain

▼コピペ用コード

<!--SNSシェアボタン-->
<div class="share_area">
<ul class="share_box">

<!--はてなブックマーク-->
<li class="hatena_btn"><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="はてなブックマークに追加"><i class="fa-hatena"></i></a></li>

<!--Facebook-->
<li class="facebook_btn"><a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="fa fa-facebook"></i></a></li>

<!--Twitter-->
<li class="twitter_btn"><a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title="ツイートする"><i class="fa fa-twitter lg"></i></a></li>

<!--LINE-->
<li class="line_btn"><a href="http://line.me/R/msg/text/?{Title}{URLEncodedPermalink}" title="LINEで送る"><i class="fa fa-comment"></i></a></li>

<!--Pocket-->
<li class="pocket_btn"><a href="http://getpocket.com/edit?url={URLEncodedPermalink}" target="_blank" title="Pocketに保存"><i class="fa fa-get-pocket"></i></a></li>

</ul>
</div>

<style>
.share_area { text-align: center; }
.share_area li { float:left; }
.share_area li a {
  position: relative;
  display: block;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.share_area { margin: 20px 0 0 0; }
.share_area li a {
  width: 35px;
  height: 35px;
  padding: 0;
  border-radius: 50%;
  font-size: 25px;
  line-height: 35px;
}
.share_area li { margin: 0 2% 0 0; }
.share_area li:last-child { margin: 0; }

.share_area ul:before, .share_area ul:after { content: ""; display: table; }
.share_area ul:after { clear: both; }
.share_area ul { *zoom: 1; }

/* はてなブックマーク */
.share_area .hatena_btn a { background: #008fde; }
.share_area .hatena_btn a:hover,
.share_area .hatena_btn a:active { background: #00649c; }
.fa-hatena:before {
  content: "B!";
  font-family: Verdana;
  font-weight: bold;
  font-style: normal;
}

/* Facebook */
.share_area .facebook_btn a { background: #3b579d; }
.share_area .facebook_btn a:hover,
.share_area .facebook_btn a:active{ background: #293d6e; }

/* Twitter */
.share_area .twitter_btn a { background: #55acee; }
.share_area .twitter_btn a:hover,
.share_area .twitter_btn a:active { background: #3c79a7; }

/* LINE */
.share_area .line_btn a { background: #00b900; }
.share_area .line_btn a:hover,
.share_area .line_btn a:active{ background: #008200; }
/* LINEをPCで非表示 */
.share_area .line_btn { display: none; }
/* LINEをSPで表示 */
@media screen and (max-width: 767px){ .share_area .line_btn { display: inline; } }

/* Pocket */
.share_area .pocket_btn a { background: #ee4256; }
.share_area .pocket_btn a:hover,
.share_area .pocket_btn a:active{ background: #a22634; }
</style>

Google+、LINEボタンの設置について

Google+は共有される機会がほとんどないため、省きました。
LINEボタンは、Twitter等と違って直接相手にURLをシェアするものですので、ブログの内容によっては省いてもいいかも知れません。

まとめ

はてなブログを始めてからデザインをいじってみて、思っていたよりもいろいろできるなーと感じています。

うまく表示されない・分からない点などありましたら、コメント、もしくはTwitter(@evijp)でお気軽にどうぞ!