はてなブログにSNSのシェアリンクを追加するのでR | なるへそゴマのすけのなるへそな教室

はてなブログは、defaultですでにデザインでSNSのシェアリンクが付いているのでR。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」にそれがあるのでR。

ただし、

それらのデザインはすでに決められているので、これを自分のSNSのシェアリンクに変更したいのでR。

そのために、

まず、「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」に、

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

を追加するのでR。

そして、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事下」or「記事上」に、

<span class="sns-txt">この記事をシェアする</span>

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

<a class="twitter-button" href="http://twitter.com/intent/tweet?text={Title}-{URLEncodedPermalink}" onclick="window.open(this.href, 'TwWindow', 'width=600, height=500, menubar=no, resizable=yes, toolbar=no, scrollbars=yes'); return false;" title="Twitterでシェア"><i class="blogicon-twitter"></i></a>

<a class="facebook-button" href="http://www.facebook.com/share.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'Fbwindow', 'width=600, height=500, menubar=no, resizable=yes, toolbar=no, scrollbars=yes'); return false;" title="Facebookでシェア"><i class="blogicon-facebook"></i></a>

<a class="google-plus-button" href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GPlWindow', ' width=600, height=500, menubar=no, resizable=yes, toolbar=no, scrollbars=yes'); return false;" title="Google+でシェア"><i class="fa fa-google-plus"></i></a>

<a class="pocket-button" href="http://getpocket.com/edit?url={URLEncodedPermalink}" onclick="window.open(this.href, 'PlWindow', ' width=550, height=350, menubar=no, resizable=yes, toolbar=no, scrollbars=yes'); return false;" title="Pocketに追加"><i class="fa fa-get-pocket"></i></a>
</div>

を追加するのでR。

そして、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「カスタムcss」に、

.sns-share{
 display:table;
 width:100%;
 text-align:center;
 margin:8px 0;
}

.sns-share a {
 display:table-cell;
 vertical-align:middle;
 height:35px;
 width:95px;
 font-size:10px;
 text-decoration:none;
 color: #ffffff;
}

.sns-share .sns-name{
 font-size:10px;
 padding-left:0.5em;
}

.sns-share .hatena-bookmark-button{
 position;relative;
 background:#3b94c5;
 transition:1s ease;
}

.sns-share .facebook-button{
 position;relative;
 background:#2371a1;
 transition: 1s ease;
}

.sns-share .twitter-button{
 position;relative;
 background:#72b9bf;
 transition:1s ease;
}

.sns-share .google-plus-button{
 position;relative;
 background:#d56b5e;
 transition:1s ease;
}

.sns-share .pocket-button{
 position;relative;
 background:#db5369;
 transition:1s ease;
}

.sns-share .hatena-bookmark-button:hover{
 background:#008fde;
}

.sns-share .facebook-button:hover{
 background:#315096;
}

.sns-share .twitter-button:hover{
 background:#55acee;
}

.sns-share .google-plus-button:hover{
 background:#dd4b39;
}

.sns-share .pocket-button:hover{
 background:#ec3653;
}

を追加するのでR。

すると、「はてなブックマークに追加」、「Twitterでシェア」、「Facebookでシェア」、「Google+でシェア」、「Pocketに追加」の5つのシェアリンクが、記事下 or 記事上に完成するのでR。

ちなみに、SNSのシェアリンクを追加するのでR ver2もあるのでR。

上のコードは下の本を参考にしたのでR。

はてなブログのカスタマイズも含めて、はてなブログには下の本はとても分かりやすい本なのでR。