【はてな】記事の下にフォローボタンを設置する

■概要

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

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

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

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

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

■HTML

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

<!--フォローボタン-->
<div class="follow-btn" >
    <span style="font-size:80%; text-align:center">フォローする</span><br>
    <a class="hatena" href="https://blog.hatena.ne.jp/UniMul/tech-blog.unimul.com/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i></a>
    <a class="twitter" href="https://twitter.com/intent/follow?screen_name=uni_mul" target="_blank"><i class="blogicon-twitter lg"></i></a>
    <a class="feedly" href="https://feedly.com/i/subscription/feed/https://tech-blog.unimul.com/feed" target="_blank"><i class="blogicon-rss lg"></i></a>
</div>
<!-- フォローボタンここまで -->

• ４行目の「https://blog.hatena.ne.jp/UniMul/tech-blog.unimul.com/subscribe」を「https://blog.hatena.ne.jp/[自分のはてなID]/[自分のブログのURLの「http://」を除いた部分]/subscribe」に変更
• ５行目の「https://twitter.com/intent/follow?screen_name=uni_mul」を「https://twitter.com/intent/follow?screen_name=[自分のTwitterアカウントの@を抜いた部分]」に変更
• ６行目の「https://feedly.com/i/subscription/feed/https://tech-blog.unimul.com/feed」を「https://feedly.com/i/subscription/feed/[自分のブログのURL]/feed」に変更

■CSS

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

/*--------------------------------------
フォローボタン
--------------------------------------*/
.follow-btn{
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
}
.follow-btn a {
    display: inline-block;
    width: 40px;
    height: 40px;
    font-size: 22px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    color: #ffffff;
}
.follow-btn .hatena {
    background: #3D3F44; 
}
.follow-btn .hatena i {
    vertical-align:middle;
    line-height: normal;
}
.follow-btn .twitter {
    background: #00ACEE; 
}
.follow-btn .twitter i {
    vertical-align:middle;
    line-height: normal;
}
.follow-btn .feedly {
    background: #70CA3B;
}
.follow-btn .feedly i {
    vertical-align:middle;
    line-height: normal;
}
.follow-btn .hatena:hover {
    background: #B5B5B5;
}
.follow-btn .twitter:hover {
    background: #9FD9F6;
}
.follow-btn .feedly:hover {
    background: #A9F5A9;
}

■最後に