【はてなブログ】シェアボタンのカスタマイズ（Minimalism対応）

・はてなブログの記事に、SNSのシェアボタンを追加したい。
・シェアボタンのデザインをカスタマイズしたい。
・具体的な方法を教えてほしい。

こういった疑問に答えます。

本記事の内容

はてなブログで標準で用意されているシェアボタンの不満点
テーマ「Minimalism」で用意されているシェアボタン
テーマ「Minimalism」のシェアボタンのカスタマイズ（色を付ける・ブログアイコン化）

この記事を書いている私は、2006年から始めて、アフィリエイト歴は13年ほど。
当ブログの他にも複数ブログを運営していて、毎月コンスタントに収益が発生しています。

こういった私が、解説していきます。

本記事の内容
はてなブログで標準で用意されているシェアボタン
テーマ「Minimalism」で用意されているシェアボタンを使う
「Minimalism」のシェアボタンをカスタマイズ（色を付ける・ブログアイコンを使う）
- HTMLコードの修正
  - 参考にしたサイト

はてなブログで標準で用意されているシェアボタン

はてなブログでは、標準で、ソーシャルパーツのシェアボタンのチェックを入れるだけで表示ができます。

しかし、この標準のシェアボタン、不満が２つありました。

シェアボタンが表示されるまでの読み込みがとにかく遅い！
シェアボタンごとのデザインがバラバラで見た目が悪い！

ですから、今回の記事ではこの２つの不満点を解消するカスタマイズ方法を紹介します。

テーマ「Minimalism」で用意されているシェアボタンを使う

≫シンプルで美しいはてなブログの新テーマ「Minimalism」　https://hitsuzi.hatenablog.com/entry/minimalism　

当ブログでは、テーマ「Minimalism」を使っています。

この「Minimalism」でも、シェアボタン用のコードが用意されているので、
まずはそれを使ってみます。

HTMLのコードは以下。

<div class="shrbtn">
  <!-- HatenaBookmark -->
  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn">
    <span class="htvcenter" style="line-height: 1.6;">
      <i class="blogicon-bookmark" style="font-size:22px"></i>
    </span>
  </a>
  <!-- twitter -->
  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-twitter"></i>
  </a>
  <!-- facebook -->
  <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-facebook"></i>
  </a>
  <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn">
    <i class="fa fa-get-pocket"></i>
  </a>
  <!-- feedly -->
  <a href="http://feedly.com/i/subscription/feed/http://ブログURL/feed" target="_blank" class="share_btn">
    <i class="fa fa-rss"></i>
  </a>
</div>

以下のような見た目のボタンが表示できました。

「Minimalism」のシェアボタンをカスタマイズ（色を付ける・ブログアイコンを使う）

「Minimalism」のシェアボタンに対して、以下の２つを改善するカスタマイズをします。

ボタンに色を付ける（CSS）
アイコンは「Font Awesome」ではなくて、はてなブログ独自の「ブログアイコン」の方を使う
LINEのボタンも追加する

はてなブログ独自の「ブログアイコン」については、以下の記事で詳しく書いています。

takeuchiblog.hatenablog.jp

HTMLコードの修正

ボタンに色を付けるために、クラス名を追加しました。
さらに、アイコンをブログアイコンに変更しました。

<!-- ---------シェアボタン------------ -->
<div class="shrbtn">
  <!-- HatenaBookmark -->
  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank"  title="このエントリーをはてなブックマークに追加" class="share_btn hatenabookmark_btn">
    <span class="htvcenter" style="line-height: 1.6;">
      <i class="blogicon-bookmark" style="font-size:22px"></i>
    </span>
  </a>
  <!-- twitter -->
  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" title="Twitterでこの記事をツイートする" target="_blank" class="share_btn twitter_btn">
    <i class="blogicon-twitter style="font-size:22px"></i>
  </a>
  <!-- facebook -->
  <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" title="facebookでこの記事をシェアする" target="_blank" class="share_btn facebook_btn">
    <i class="blogicon-facebook style="font-size:22px"></i>
  </a>
  <!-- LINE -->
  <a href="https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" target="_blank" class="share_btn line_btn">
    <i class="blogicon-comment style="font-size:22px"></i>
  </a>
  <!-- Pocket -->
  <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" title="Pocketにこの記事を保存する" target="_blank" class="share_btn pocket_btn">
    <i class="blogicon-chevron-down style="font-size:22px"></i>
  </a>
  <!-- feedly -->
  <a href="http://feedly.com/i/subscription/feed/http://ブログURL/feed" title="feedlyにこの記事を登録する" target="_blank" class="share_btn feedly_btn">
    <i class="blogicon-rss style="font-size:22px"></i>
  </a>
</div>

ここまでで、以下のような見た目になりました。

ボタンの色は、CSSで設定します。

/* ----シェアボタン----------- */
.shrbtn .share_btn {
  color: #fff;
}

.shrbtn .hatenabookmark_btn {
  background: #00A4DE;
}

.shrbtn .twitter_btn {
  background: #1DA1F2;
}

.shrbtn .facebook_btn {
  background: #3C5A99;
}

.shrbtn .line_btn {
  background: #00B900;
}

.shrbtn .pocket_btn {
  background: #EF4155;
}

.shrbtn .feedly_btn {
  background: #6CC655;
}