技術を磨くだいぱんまん

散歩とインターネットが大好きなシステムエンジニア。暮らし、おでかけ、テクノロジーについて書いています。

トップ > テクノロジー > はてなブログでめっちゃ動作の軽いシェアボタン作った！

はてなブログでめっちゃ動作の軽いシェアボタン作った！

テクノロジー

f:id:donchan922:20170922194813j:plain

2017/10/1更新
コードを簡略化しました。

こんにちは、だいぱんまん(@donchan922)です。

はてなブログのシェアボタンカスタマイズ第3弾！（第1弾、2弾は記事下の関連記事に載せています。）今回のテーマは「とにかく動作が軽い」。

動作を軽くするために、以下のことを意識してシェアボタンを作りました。

  • シェアボタンのシェア数を把握するためのスクリプトを使わない
  • 外部のWebフォント（Font Awesome）を読み込まない
  • はてなブログで用意されているWebフォントを使う

コピペで簡単にシェアボタンをカスタマイズできるので、はてなブログでちょっとでも動作を軽くしたい！という方は気軽に試してみてください。

シェアボタンはこんな感じ

f:id:donchan922:20170922200650p:plain
PC用


f:id:donchan922:20170922200645p:plain
スマホ用


シェアボタンの種類が3つなのは、3という数字が好きだからです（嘘）。本当は他のシェアボタン（GoogleプラスやPocket、LINE）も追加したかったんですが、はてなブログで用意されているWebフォントにそれらがなかったので諦めました。

動作を軽くするためにシェアボタンのシェア数は表示させていません。このあたりは好みが分かれるところでしょうか。

注意点として、スマホ用のシェアボタンは「はてなブログPro（有料プラン）」でないとカスタマイズできません。

カスタマイズ方法

PC用とスマホ用で貼り付けるコードは同じです。以下の通りコードを貼り付ける場所が違うだけです。

  • PC用：「ダッシュボード」⇒「デザイン」⇒「スパナのアイコン」⇒「ヘッダ」⇒「タイトル下」
  • スマホ用：「ダッシュボード」⇒「デザイン」⇒「スマホのアイコン」⇒「ヘッダ」⇒「タイトル下」
<style type="text/css">
.share-button {
  text-align: center;
  width: 70%;
  margin: 0 auto;
}
.share-button ul {
  margin: 0;
  padding: 0;
}
.share-button ul li {
  float: left;
  font-size: 250%;
  list-style: none;
  text-align: center;
  width: 33%;
}
.share-button ul li a:hover {
  opacity: 0.5;
}
.blogicon-bookmark {
  color: #00a4de;
}
.blogicon-twitter {
  color: #55acee;
}
.blogicon-facebook {
  color: #3b5999;
}
</style>


続いて、以下コードも貼り付けてください。

  • PC用：「ダッシュボード」⇒「デザイン」⇒「スパナのアイコン」⇒「記事」⇒「記事上 or 記事下」
  • スマホ用：「ダッシュボード」⇒「デザイン」⇒「スマホのアイコン」⇒「記事」⇒「記事上 or 記事下」
<div class="share-button">
  <ul class="clearfix">
    <li>
      <a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple">
        <i class="blogicon-bookmark"></i>
      </a>
    </li>
    <li>
      <a href="https://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}">
        <i class="blogicon-twitter"></i>
      </a>
    </li>
    <li>
      <a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" target="_blank">
        <i class="blogicon-facebook"></i>
      </a>
    </li>
  </ul>
</div>

まとめ

はてなブログのシェアボタンカスタマイズ、地味に人気なので今回久々に作ってみました。さくっと作ったのでなにか不具合があるかもしれません。そのときはコメントやブコメでご連絡いただければ修正しますのでよろしくお願いします。

最後に、関連記事にシェアボタンカスタマイズ第1弾と第2弾を載せておきます。こちらもおすすめです。

関連記事