シンプルかつ軽量なSNSシェアボタンの作り方

対応しているサービス
実装してみよう
さいごに

こんにちは、ビス子です！
今回は、はてなブログ向けのシンプルで軽量な SNS シェアボタンを作成したので、ご近所の皆さんにお裾分けしようと思いこの記事を書きました。
かんたんな三つのステップに沿うだけで実装できるので、ぜひお試しあれ～。

対応しているサービス

はてなブログでサポートされている下記の八つの SNS に対応しています。

X（旧 Twitter）
Facebook
LINE
Tumblr
Pocket
はてなブックマーク
Mastodon
Misskey

今回実装するシェアボタンは、これらの標準のシェアボタンよりも構造がシンプルなため読み込みが早く、自分好みのデザインにカスタマイズできる点がグッドです。

実装してみよう

各 STEP では実装している様子を撮影した動画も載せているので、ブログカスタマイズ初心者の方はそれを見ながら進めましょう！

STEP1. 標準のシェアボタンを非表示に

はてなブログのデザイン設定 > 記事 > ソーシャルパーツ
に移動して、〇〇〇ボタン（例：Tumblr 共有ボタン）のチェックが全て外れていることを確認してくださいね。
チェックが入ったまま下の HTML コードを貼り付けてしまうと、標準のシェアボタンと今回実装するシェアボタンが両方とも表示されてしまいます。

STEP2. HTML を貼り付けよう

はてなブログのデザイン設定 > 記事 > 記事下 HTML
に移動して、下の HTML をコピー＆ペーストしましょう。

<div id="share-buttons">
  <ul>
    <!-- X（旧Twitter） -->
    <li id="share-buttons-x">
      <a href="https://twitter.com/intent/tweet?text={URLEncodedPermalink}" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
    </li>
    <!-- Facebook -->
    <li id="share-buttons-facebook">
      <a href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
    </li>
    <!-- LINE -->
    <li id="share-buttons-line">
      <a href="https://social-plugins.line.me/lineit/share?url={URLEncodedPermalink}" target="_blank"><i class="fa-brands fa-line"></i></a>
    </li>
    <!-- Tumblr -->
    <li id="share-buttons-tumblr">
      <a href="https://tumblr.com/widgets/share/tool?canonicalUrl={URLEncodedPermalink}" target="_blank"><i class="fa-brands fa-tumblr"></i></a>
    </li>
    <!-- pocket -->
    <li id="share-buttons-pocket">
      <a href="https://getpocket.com/edit?url={URLEncodedPermalink}" target="_blank"><i class="fa-brands fa-get-pocket"></i></a>
    </li>
    <!-- はてなブックマーク -->
    <li id="share-buttons-hatebu">
      <a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank"><i class="blogicon-bookmark"></i></a>
    </li>
    <!-- Mastodon -->
    <li id="share-buttons-mastodon">
      <a href="https://mastodonshare.com/?url={URLEncodedPermalink}"><i class="fa-brands fa-mastodon"></i></a>
    </li>
    <!-- Misskey -->
    <li id="share-buttons-misskey">
      <a href="https://misskey-hub.net/share/?url={URLEncodedPermalink}"><span>Mi</span></a>
    </li>
  </ul>
</div>

『保存する』ボタンを押して、記事の下部に各 SNS のアイコンが表示されているか確認してみてください。

{URLEncodedPermalink} 変数について

記事の URL は、a タグの中で『{URLEncodedPermalink}』という変数を使って指定しているので、ここを書き換えないように注意しましょう。
記事下 HTML で使用できる変数はこの他にもあるので、シェアボタンをカスタマイズしたいときにはこちらを参照してみてください。

アイコンが表示されないときは

もしもアイコンが表示されていなかったり文字化けしている場合には、たった一行の HTML をコピー＆ペーストしてアイコンフォントを読み込めるようにしましょう。
はてなブログの詳細設定 > head 内タグ > 要素にメタデータを追加
に移動して下の HTML をコピー＆ペーストしたら、画面下部の『保存する』ボタンを押してアイコンの表示を再確認してみましょう。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

無事に各 SNS のアイコンが表示されましたか？　おめでとうございます！

STEP3. CSS を貼り付けよう

最後にはてなブログのデザイン設定 > デザイン CSS
に移動して既存コードの末尾を改行したら、下の CSS をコピー＆ペーストしてくださいね。

#share-buttons {
  border: 2px dotted #fff;
  border-radius: 16px;
  padding: 16px !important;
}
#share-buttons ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: blogicon;
}
#share-buttons ul li {
  height: 48px;
  text-align: center;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  aspect-ratio: 1/1;
}
#share-buttons ul li a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
#share-buttons i {
  font-size: 20px;
}
#share-buttons-x {
  background: #0f1419;
}
#share-buttons-facebook {
  background: #4267b2;
}
#share-buttons-line {
  background: #00b900;
}
#share-buttons-tumblr {
  background: #001935;
}
#share-buttons-pocket {
  background: #ef4157;
}
#share-buttons-hatebu {
  background: #01a5df;
}
#share-buttons-mastodon {
  background: #2b90d9;
}
#share-buttons-misskey {
  background: #4ab300;
  font-weight: 900;
}

忘れずに『保存する』ボタンを押して、おろしたてピカピカの SNS シェアボタンを確認してみましょう！　 CSS を貼り付けたことで見た目が変化していたら成功です。

ちなみに、PC やスマホなど画面サイズを問わずきれいに表示される『レスポンシブデザイン』にも対応しています。あなたのブログでレスポンシブ対応のテーマをお使いであれば、スマホ表示も念のため確認してみてくださいね。

さいごに

このブログ『ビス子からの手紙』では、今後もこのようなブログカスタマイズに関する記事を更新していく予定なので、ぜひ読者登録して更新をお待ちくださいませ。

また、今回ご紹介したシェアボタンをこの記事にも設定しているので、ぜひポチッとしてお知り合いと共有してくださいね！

ご一読いただきありがとうございました。いえらいいえらい。