【コピペで楽々】はてなブログのシェアボタンを一瞬で華やかにするカスタマイズ

ブログを華やかにするシェアボタンを作成しました。記事中にある画像を読み取り、背景画像に自動で設定します。jQueryを導入しているので、記事ごとにシェアボタンの背景画像が変化します。

実装予想図

｢Share Button｣の文字、その下の文章は自由に変更できます。この画像は、以下のページでシェアボタンを実装した場合の完成図です。

プログラミング未経験だった僕がオンライン学習サービス「Progate」を絶対的におススメする3つの魅力 - かるみに

記事内の一番上の画像を、背景に表示させます。

導入の仕方

導入はめちゃくちゃ簡単で、やってほしいことは2つです。

1.jQueryを導入

記事内の画像を自動で読み取るために、はてなブログでjQueryと呼ばれるプログラミング言語を使えるように設定します。

１． 設定＞詳細設定に移動します。

２．「headに要素を追加」に張り付ける

この部分に以下のコードをコピーして貼り付けてください。貼り付けるだけでOKです！すでに導入済みの人はこの手順は飛ばしてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

2.CSSにコードを貼り付ける

これが最後のステップです。もうすぐ終わります。

まず、デザイン>記事に移動します。その中にある「記事下」につ以下のコードを張り付けてください。 

貼り付けるコード

<div class="box-share" id="box-share">
  <div class="box-share-content">
    <div class="box-share-heading">
      <i class="blogicon blogicon-star" style="font-size:10px; vertical-align:top"></i>
      Share Button<!--文字は変更できます-->
      <i class="blogicon blogicon-star" style="font-size:10px; vertical-align:top"></i>
    </div>
    <div class="box-share-body">
      <p>この記事に満足いただけたら、こちらをポチッと！</p><!--文字は変更できます-->
      <div class="box-share-buttons">
        <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="box-twitter-button" onclick="window.open(this.href, 'TWwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon blogicon-twitter"></i></a>
 <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="box-facebook-button" onclick="window.open(this.href,'FBwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon blogicon-facebook"></i></a>
        <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="box-hatena-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon blogicon-bookmark"></i></a>
      </div>
    </div>
  </div>
</div>
<style>
.box-share{
  width:100%;
  background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/t/trrun/20170221/20170221151323.jpg);/*記事内に画像がないときに表示する画像URL*/
  background-size:cover;
  background-repeat:no-repeat;
}
/*マスクのデザイン*/
.box-share-content{
 width:100%;
  height:100%;
  text-align:center;
  color:white;
  background-color:rgba(0,0,0,0.6);
}
/*文字のデザイン*/
.box-share-heading{
  padding-top:15px;
  font-size:30px;
  font-weight:bold;
  letter-spacing:3px;
}
.box-share-body p{
    margin:10px 0 40px 0;
  }
.box-share-body{
    margin-bottom:20px;
}
/*各種ボタン*/
.box-share-buttons a{
  font-size:30px;
  width:43px;
  height:43px;
  color:white;
  margin-left:4%;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}
 /*Twitter*/
.box-twitter-button{
  background-color:#55acee;
}
 /*Facebook*/
.box-facebook-button{
  background-color:#315096;
}
 /*はてな*/
.box-hatena-button{
  background-color:#008fde;
}
</style>
<script>
 $(function(){
   first_img = $(".entry-content img:first-child").eq(0).attr("src");
   $("#box-share").css("background-image","url(" + first_img + ")");
});
</script>

補足

1点だけ必要に応じて変更してほしいところがあります。変更箇所は上のコードの中央付近にあるこちら。

適当な画像を用意しておりますが、この画像URLは個別に設定をお願いします。

  background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/t/trrun/20170221/20170221151323.jpg);/*記事内に画像がないときに表示する画像URL*/

Wordpressでは人気の高いシェアボタン

WordPressには、このようなシェアボタンが簡単に実装できるらしく、バイラルメディア風シェアボタンと呼ばれています。

本当かは分かりませんが、｢導入後に集客率が上がった｣なんて記事も。

まあ集客率うんぬんは置いといて、華やかになるので気に入ったらぜひご活用ください。