【コピペOK】この記事が気に入ったらはてブ！を設置する方法

こんにちわ。ORIH(@orih_k517)です。今日は『＋ログ』の記事を読みに来ていただきありがとうございます。

前置きはおいて早速「この記事が気に入ったらはてブ！を設置する方法」を紹介します。

よくあるfacebookのいいね！のはてブバージョンです。

▼完成図

この記事は、はてなブログユーザー用です。

※以下を実装する前に必ずバックアップを取ってください。

PC

デザイン → カスタマイズ → 記事 → 記事下を選択

記事下の任意の箇所に以下をコピペ

<div class="p-entry__push">
  <div class="p-entry__pushThumb" style="background-image: url('【ここにブログアイコンなどの画像URLにしておく】')"></div>
  <div class="p-entry__pushLike">
    <p>この記事が気に入ったら
      <br>はてブ！しよう
    </p>
    <div>
      <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></a>
    </div>
    <p class="p-entry__note">読者登録で最新情報をお届けします</p>
  </div>
</div>

ここでポイントがあります。【ここにブログアイコンなどの画像URLにしておく】という部分にブログアイコンなどの画像URLを設定してください。記事のアイキャッチを動的に置換するのですが、デフォルトで表示される仮の画像として設定しておきます。画像URLははてなフォトにアップロードすればURLが作成されるのでそれを使うといいです。

デザイン → カスタマイズ → 記事 → 記事下を選択

記事下の任意の箇所に以下をコピペ。記事のアイキャッチを動的に置換する処理です。
※１行目はjqueryの読み込みなので、既に記述されいる場合は不要です。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></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>

デザイン → カスタマイズ → デザインCSS

.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: 20px;
}
 
.p-entry__pushButtonLike {
    line-height: 1;
}
 
.p-entry__note {
    margin-top: 15px;
    font-size: 12px;
    color: #fff;
}

スマートフォン

スマートフォンはすべて、デザイン → スマートフォン → 記事 → 記事下を選択

/*※PCと同じです*/
<div class="p-entry__push">
  <div class="p-entry__pushThumb" style="background-image: url('【ここにブログアイコンなどの画像URLにしておく】')"></div>
  <div class="p-entry__pushLike">
    <p>この記事が気に入ったら
      <br>はてブ！しよう
    </p>
    <div>
      <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span></a>
    </div>
    <p class="p-entry__note">読者登録で最新情報をお届けします</p>
  </div>
</div>

<style>
.p-entry__push {
    margin-bottom: 20px;
    display: table;
    table-layout: fix;
    width: 100%;
    background-color: #2b2b2b;
    color: #fff;
}
 
.p-entry__pushThumb {
    display: table-cell;
    min-width: 130px;
    background-position: center;
    background-size: cover;
}
 
.p-entry__pushLike {
    display: table-cell;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 13px;
}
 
.p-entry__pushButtonLike {
    line-height: 1;
}
 
.p-entry__note {
    margin-top: 15px;
    font-size: 10px;
    color: #fff;
}
</style>

/*※PCと同じです*/
<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>

最後に

記事下に設置できたと思います。これでブログの来訪者が記事を読んだ際に、はてなブックマークに追加しやすくなったかなと思います。

はてブじゃなくてもボタンをツイートにしたりカスタマイズもできるので、文言を変えたりしてみてください。

もし不具合があればすぐにバックアップにとってあったもので戻してくださいね。

これからもいいカスタマイズを随時紹介していきたいと思います。

最後まで『＋ログ』の記事を読んでいただきありがとうございました。

記事を書いた人：ORIH(@orih_k517)