【はてな】記事の上下にシェアボタンを設置する

■概要

はてなブログでシェアボタンを実装する際の方法をまとめます。
こんな感じのモノを作りたいと思います。

■アイコンを表示させる準備

シェアボタンにアイコンを表示させるための設定をします。
ダッシュボードの設定→詳細設定→headに要素を追加に、以下のコードを貼ってください。

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

既に記載があれば、追記する必要はありません。
※versionには要注意

■HTML

デザイン変更→カスタマイズ→記事→記事上or記事下に、以下のコードを貼ってください。

<!-- ここからシェアボタン -->
<div class="share-btn">
    <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="share-btn__item share-btn__item--hatebu" target="_blank"><i class="blogicon-bookmark lg"></i></a>
    <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share-btn__item share-btn__item--facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><i class="fa fa-facebook-square lg"></i></a>
    <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank"><i class="blogicon-twitter lg"></i></a>
    <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--pocket" target="_blank"><i class="fa fa-get-pocket"></i></a>
</div>
<!-- シェアボタンここまで -->

■CSS

デザイン変更→カスタマイズ→デザインCSSに、以下のコードを貼ってください。

/*--------------------------------------
シェアボタン
--------------------------------------*/
.share-btn {
    margin: 1.2em 0;
    display: flex;
}
.share-btn .share-btn__item {
    width: 25%;
    height: 40px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    transition: all .3s;
}
.share-btn .share-btn__item--hatebu {
    background-color: #00A4DE;
}
.share-btn .share-btn__item--facebook {
    background-color: #1778F2;
}
.share-btn .share-btn__item--twitter {
    background-color: #1BA1F3;
}
.share-btn .share-btn__item--pocket {
    background-color: #EF4155;
}
.share-btn .share-btn__item:hover {
    opacity: .8;
}

■最後に

これで、シェアボタンが記事の上下に設定できたと思います。 デザイン変えたいときは、CSSを更新すれば可能ですので、自分なりのシェアボタンをデザインしてみてください。