この記事が気に入ったらいいねの代わりに、Twitter、読者登録、Feedlyのフォローボタンを設置するカスタマイズ

f:id:syofuso:20170408210309j:plain
記事下のシェアボタンの下にバイラルメディア風の「この記事が気に入ったらフォロー」バナーを置いてみました。
よくWordPressでは見かけますよね。そのデザインを応用して「この記事が気に入ったらフォロー」バナーにアレンジしました。
Facebookページは持っていない方も多いでしょうし、フォローボタンの方が使いやすいかなと。コピペで使えるので是非はてなブログにも導入してみて下さい。

こんな感じのデザイン
HTML&jQuery
- 注意点
CSS
「この記事が気に入ったらいいね！」の導入は

こんな感じのデザイン

f:id:syofuso:20170313235215p:plain

HTML&jQuery

記事下に以下のコードを追記してください。

<div class="p-entry__push">
  <div class="p-entry__pushThumb" style="background-image: url('アイキャッチ用画像URL')"></div>
  <div class="p-entry__pushLike">
    <p>この記事が気に入ったら
      <br>フォロー・購読をお願いします。
    </p>
    <ul class="social-icon">
      <li><a class="hatena" href="http://blog.hatena.ne.jp/はてなID/ブログドメイン/subscribe" onclick="window.open('http://blog.hatena.ne.jp/はてなID/ブログドメイン/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i> </a></li>
      <li><a class="twitter" href="https://twitter.com/ユーザーID" target="_blank"><i class="blogicon-twitter"></i></a></li>
      <li><a class="feedly" href="http://feedly.com/i/subscription/feed/http://ブログURL/feed" target="_blank"><i class="blogicon-rss"></i></a></li>
    </ul>
    <p class="p-entry__note">読者登録で最新情報をお届けします</p>
  </div>
</div>
<!-- 画像を記事の一番上のものに変える -->
<!--jQueryを使用-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
(function ($) {
    $(function() {
        var src = $('.entry-content img:visible:first').attr('src');
        if (!src) return;
        $('.p-entry__pushThumb').css('background', 'url(' + src + ')');
        $('.p-entry__pushThumb').css('background-size', 'cover');
        $('.p-entry__pushThumb').css('background-position', 'center');
    });

})(jQuery);
</script>

注意点

上記のコードはご自分のブログやtwitterアカウントに合わせて以下のように変更してください。設置後、きちんと動作するかクリックして確かめてください。

・画像を用意しはてなフォトライフなどにアップロードし、'アイキャッチ用画像URL'に画像アドレスを指定してください。

http://blog.hatena.ne.jp/はてなID/ブログドメイン/subscribe

・ここははてなIDとブログドメインにブログURLからhttp://を抜いたものを入れて下さい。２箇所あるのでご注意。

https://twitter.com/ユーザーID

・ユーザーIDのところにtwitterアカウントの@を抜いたものを入れて下さい。
・Feedlyはhttp://を含めたブログURLを入れて下さい。

CSS

デザインCSSに以下のコードを追記してください。

/* この記事が気に入ったらフォロー */
/* フォローボタン */
ul.social-icon {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    list-style-type: none;
    -webkit-padding-start: 0;/* user agent stylesheet の無効化 */
}
.social-icon li a {
    display: block;
    margin: 0 5px 5px 0;
    color: #fff;
    width: 50px;/* 丸ボタンの幅 */
    height: 50px;/* 丸ボタンの高さ */
    line-height: 50px;/* 高さに揃える */
    border-radius: 50%;
    text-align:center;
}
.social-icon .hatena {
    background: #fff;
    color: #3d3f44;
  }
.social-icon .hatena .lg {
    font-size: 1.3333333333333333em;
    line-height: .75em;
    vertical-align: -20%;
}
.social-icon .twitter {
    background: #00a1e9;
    color: #fff;
}
.social-icon .feedly {
    background: #87c040;
    color: #fff;
}
/* この記事が気に入ったらバナー */
.p-entry__push {
    margin-bottom: 20px;
    display: table;
    table-layout: fixed;
    width: 100%;
    background-color: #2b2b2b;
    color: #fff;
}
 
.p-entry__pushThumb {
    display: table-cell;
    min-width: 240px;
    background-position: center;
    background-size: cover;
}
 
.p-entry__pushLike {
    display: table-cell;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 18px;
}
 
.p-entry__note {
    margin-top: 15px;
    font-size: 12px;
    color: #fff;
}
@media screen and (max-width: 480px) {
.social-icon li a {
    width: 40px;
    height: 40px;
    line-height: 40px;
}
}