読者です 読者をやめる 読者になる 読者になる

NO TITLE

WEBデザインとかブログ運営、社会・経済、音楽などなど

コピペで簡単!はてなブログのシェアボタンをカスタマイズ

ブログ運営 ブログ運営-カスタマイズ

スポンサードリンク

今回はシェアボタンを作ってみました。シェアボタンのカスタマイズ記事はすでにたくさんの人が書いてるので、供給過多ぎみですが…

もし気に入ったデザインがあったら使ってみてください。全部で4種類作りました。作りすぎ??

 

シェアボタンをデフォルトのままにしておくと、スマホでシェアボタンが表示されないことがたまにあります。機会損失を防ぐためにも、カスタマイズしておいた方が良いでしょう。

 

今回もこの記事をベースに、CSSでオリジナルのデザインにしてみました。

www.yukihy.com

いつも参考にしてます、ゆきひーさんの記事です。ありがとうございます。

今回は長くなりそうなので目次を入れておきます。注意事項もちゃんと読んでください。

 

はてなブログ用シェアボタンの設置

f:id:shiromatakumi:20160310222115p:plain

注意事項

  • カスタマイズは自己責任でお願いします。万が一、何か不具合があっても責任は負いかねます。
  • 記事はよく読んで下さい。
  • 念のためにクリックしてみて、動作確認は必ず行いましょう。
  • デザイン→カスタマイズ→記事→ソーシャルパーツでデフォルトのシェアボタンは非表示にしてください。そうしないと、読み込みが遅くなります。
  • デザイン→カスタマイズ→記事→記事ページをプレビューをクリックしておくと、表示を確認しながら作業できます。

ベースの部分(共通部分)

まずは下準備です。

シェアボタンにアイコンを表示させるための設定をします。

ダッシュボードの設定→詳細設定→headに要素を追加に以下のコードを貼ってください。すでに同じコードが貼ってある人は貼らなくて大丈夫です。

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

OK??

 

そしたら、お次はシェア数をカウントするコード。

jQuery

<!-- シェア数のカウント -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
//Facebookのシェア数を取得
function countFacebook(url, selector) {
  $.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    }
  }).done(function(res){
     if ( res.share && res.share.share_count ) {
      $( selector ).text( res.share.share_count );
    } else {
      $( selector ).text( 0 );
    }
  }).fail(function(){
    $(selector).text('0');
  });
}
//はてなブックマークではてブ数を取得
function countHatebu(url, selector) {
  $.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    }
  }).done(function(res){
    $(selector).text( res || 0 );
  }).fail(function(){
    $(selector).text('0');
  });
}
$(function(){
  countFacebook('{Permalink}', '.facebook-count');
  countHatebu('{Permalink}', '.hatebu-count');
});
</script>

これをデザイン→カスタマイズ→記事→記事下にコピペして下さい。

 

 お次はHTML。以下のコードを記事上、もしくは記事下、もしくはその両方にコピペして下さい。

記事上に表示させたい場合はデザイン→カスタマイズ→記事→記事上

記事下に表示させたい場合はデザイン→カスタマイズ→記事→記事下

記事下に表示させる場合、先ほどコピペしたコードの上にペーストして下さい。

HTML

<!--シェアボタン-->
  <div class="share-area">
  <div class="share-button">
    <!--はてブ-->
    <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
    <!--Facebook-->
    <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="fa fa-facebook-square lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
    <!--Twitter-->
    <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
    <!--ググタス-->
    <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
    <!--Pocket-->
    <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
  </div>
</div>

 

これでベースはできました。あとはCSSで装飾していきます。

 

CSSで装飾

ここからは、CSSのコピペコードです。好きなデザインから選んでコピペして下さい。

スタンダードなシェアボタン

f:id:shiromatakumi:20160310222115p:plain

こんな感じのシンプルなデザインです。なんだかんだシンプルな方が、はてなブログにはよく合います。

以下のコードを、デザイン→カスタマイズ→デザインCSSにコピペして下さい。

CSS

/* シェアボタン */
.share-area {
  margin: 20px 0;
}
.share-button a {
  display: inline-block;
  width: 52px;
  height: 52px;
  padding: 4px 0;
  line-height: 18px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  text-decoration: none;
  vertical-align: bottom;
  transition: all 0.4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.share-button a:hover {
  opacity: 0.6;
  transition: all 0.4s;
}
.share-area i,
.share-area .lg {
  font-size: 24px;
}
.share-button .hatena-bookmark-button .lg {
  font-size: 32px;
}
.share-button .hatena-bookmark-button {
  padding-top: 1px;
  padding-bottom: 6px;
}
.share-button .twitter-button {
  padding-top: 5px;
}
.share-button .facebook-button .lg  {
  font-size: 27px;
  margin-top: -1px;
}
.share-button .twitter-button .lg {
  font-size: 27px;
}
.share-area .small-text {
  font-size: 11px;
}
.share-area .fa-spin {
  font-size: 8px;
  color: #fff;
}
.share-button .hatena-bookmark-button {
  background: #00A4DE;
}
.share-button .facebook-button {
  background: #405BA7;
}
.share-button .twitter-button {
  background: #55ACEE;
}
.share-button .googleplus-button {
  background: #C53727;
}
.share-button .pocket-button {
  background: #EE4256;
}

 

これで完成です。

 

斜めの光沢があるシェアボタン

f:id:shiromatakumi:20160310222114p:plain

 

以下のコードを、デザイン→カスタマイズ→デザインCSSにコピペして下さい。

CSS

/* シェアボタン */
.share-area {
  margin: 20px 0;
}
.share-button a {
  display: inline-block;
  position: relative;
  width: 52px;
  height: 52px;
  padding: 4px 0;
  line-height: 18px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  text-decoration: none;
  vertical-align: bottom;
  transition: all 0.4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.share-button a::before {
  position: absolute;
  top: 0;
  left: 0;
  border: 60px solid transparent;
  border-top: 60px solid rgba(255, 255, 255, 0.2);
  content: "";
  z-index: 2;
  transition: all 0.1s;
}
.share-button a:hover {
  opacity: 0.6;
  transition: all 0.4s;
}
.share-button a:hover::before {
  top: -100%;
  left: 100%;
  border-top-color: rgba(255, 255, 255, 1);
  transition: all 0.2s;
}
.share-area i,
.share-area .lg {
  font-size: 24px;
}
.share-button .hatena-bookmark-button .lg {
  font-size: 32px;
}
.share-button .hatena-bookmark-button {
  padding-top: 1px;
  padding-bottom: 6px;
}
.share-button .twitter-button {
  padding-top: 5px;
}
.share-button .facebook-button .lg  {
  font-size: 27px;
  margin-top: -1px;
}
.share-button .twitter-button .lg {
  font-size: 27px;
}
.share-area .small-text {
  font-size: 11px;
}
.share-area .fa-spin {
  font-size: 8px;
  color: #fff;
}
.share-button .hatena-bookmark-button {
  background: #00A4DE;
}
.share-button .facebook-button {
  background: #405BA7;
}
.share-button .twitter-button {
  background: #55ACEE;
}
.share-button .googleplus-button {
  background: #C53727;
}
.share-button .pocket-button {
  background: #EE4256;
}

 

光沢のあるシェアボタン、その1

f:id:shiromatakumi:20160310222113p:plain

ちょっと自己主張が強めのデザインです。数年前に良く見た感じのデザインです。はてなブログで利用するとちょっと浮いてしまいますが、シェアボタンを目立たせたいなら良いかもしれません。

 

以下のコードを、デザイン→カスタマイズ→デザインCSSにコピペして下さい。

CSS

/* シェアボタン */
.share-area {
  margin: 20px 0;
}
.share-button a {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 52px;
  height: 52px;
  padding: 4px 0;
  line-height: 18px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  vertical-align: bottom;
  transition: all 0.4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.share-button a::before,
.share-button a::after {
  position: absolute;
  top: -75px;
  left: -40px;
  background: #fff;
  content: "";
}
.share-button a::before {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  opacity: 0.2;
  z-index: 2;
}
.share-button a::after {
  width: 86px;
  height: 86px;
  border-radius: 45px;
  z-index: 3;
  opacity: 0.1;
}
.share-button a:hover {
  opacity: 0.6;
  transition: all 0.4s;
}
.share-area i,
.share-area .lg {
  font-size: 24px;
}
.share-button .hatena-bookmark-button .lg {
  font-size: 32px;
}
.share-button .hatena-bookmark-button {
  padding-top: 1px;
  padding-bottom: 6px;
}
.share-button .twitter-button {
  padding-top: 5px;
}
.share-button .facebook-button .lg  {
  font-size: 27px;
  margin-top: -1px;
}
.share-button .twitter-button .lg {
  font-size: 27px;
}
.share-area .small-text {
  font-size: 11px;
}
.share-area .fa-spin {
  font-size: 8px;
  color: #fff;
}
.share-button .hatena-bookmark-button {
  background: #00A4DE;
  border: 2px solid #00A4DE;
}
.share-button .facebook-button {
  background: #405BA7;
  border: 2px solid #405BA7;
}
.share-button .twitter-button {
  background: #55ACEE;
  border: 2px solid #55ACEE;
}
.share-button .googleplus-button {
  background: #C53727;
  border: 2px solid #C53727;
}
.share-button .pocket-button {
  background: #EE4256;
  border: 2px solid #EE4256;
}

 

光沢のあるシェアボタン、その2

f:id:shiromatakumi:20160310222112p:plain

その1に比べると、少し控えめの光沢ですね。これくらいがちょうど良いかもしれません。

 

以下のコードを、デザイン→カスタマイズ→デザインCSSにコピペして下さい。

CSS

/* シェアボタン */
.share-area {
  margin: 20px 0;
}
.share-button a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 52px;
  height: 52px;
  padding: 4px 0;
  line-height: 18px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  text-decoration: none;
  vertical-align: bottom;
  border-radius: 4px;
  transition: all 0.4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.share-button a::before {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  opacity: 0.1;
  z-index: 2;
  content: "";
}
.share-button a:hover {
  opacity: 0.6;
  transition: all 0.4s;
}
.share-area i,
.share-area .lg {
  font-size: 24px;
}
.share-button .hatena-bookmark-button .lg {
  font-size: 32px;
}
.share-button .hatena-bookmark-button {
  padding-top: 1px;
  padding-bottom: 6px;
}
.share-button .twitter-button {
  padding-top: 5px;
}
.share-button .facebook-button .lg  {
  font-size: 27px;
  margin-top: -1px;
}
.share-button .twitter-button .lg {
  font-size: 27px;
}
.share-area .small-text {
  font-size: 11px;
}
.share-area .fa-spin {
  font-size: 8px;
  color: #fff;
}
.share-button .hatena-bookmark-button {
  background: #00A4DE;
  border: 2px solid #00A4DE;
}
.share-button .facebook-button {
  background: #405BA7;
  border: 2px solid #405BA7;
}
.share-button .twitter-button {
  background: #55ACEE;
  border: 2px solid #55ACEE;
}
.share-button .googleplus-button {
  background: #C53727;
  border: 2px solid #C53727;
}
.share-button .pocket-button {
  background: #EE4256;
  border: 2px solid #EE4256;
}

 

スマホでの利用

デフォルトでは、スマホとPCのデザインは別になります。PCと別にしている方は、以下の方法でスマホ対応させてください。

1.CSSの記述方法

デザイン→スマートフォン→記事→記事上にstyleタグを記述して、その間に4つの中から好きなCSSをコピペします。

<style type="text/css">

ここにCSSをコピペ。

</style>

 

2.jQueryの記述方法

デザイン→スマートフォン→記事下jQueryのコードをコピペ。

 

 

3.HTMLの記述場所

記事上にシェアボタンを設置する場合は、先ほど貼ったCSSの下にHTMLをコピペします。デザイン→スマートフォン→記事上

<style type="text/css">

CSSのコード。

</style>

ここにHTMLをコピペ。

 

記事下にシェアボタンを設置する場合は、先ほど貼ったjQueryのコードの上にHTMLをコピペします。デザイン→スマートフォン→記事下

 

これで完成です。もし不明な点などあれば、遠慮なくコメント欄から質問して下さい。

CSSの所が長くてスクロールするの大変だったでしょ?ごめんなさい。

 

当ブログで使用しているシェアボタンはデザインテーマの「Brooklyn」利用者向けのスペシャルエディション(言いたいだけ)です。 コードは公開しておりません。

 

カスタマイズがめんどくさい!って人はこのテーマを使ってみて下さい。カスタマイズ楽ですよ!

 

シェア数カウントのコードは、こちらの記事を参考にいたしました。

nelog.jp

 

HTMLやCSSを勉強して、自分でカスタマイズしてみたいという方は、こちらの記事がおすすめです。

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ

 

シェアボタンのカスタマイズは他のブログでも紹介されているので、好きなデザインから選んで利用してください。

 

はてなブログのカスタマイズが網羅された記事。

 

他にもこんな記事書いてます。

はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた - NO TITLE

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE

CSSではてなブログをカスタマイズしてみよう - NO TITLE