こんにちは！2019年からブログやっているしゅーれいです。
シェアボタンを設置するのにAddThisというサービスを使っていたのですが、2023年5月31日でサービス終了してしまいました……
表示されてなくて初めて気が付いたよ......
というわけで、シェアボタン設置しなおしました。
代替サービスが発見できなかったので、サービスを使わないシェアボタン設置方法に変更しました。
はてなブログはカスタマイズを記事にしてくれる方がたくさんいらっしゃるので、ありがたいです。先人の知恵に感謝。
まずAddtihsのコードを消す
まずは動かなくなったAddThisのコードを消します。
設置した時を振り返りつつ、コードを消します。
消すコードは以下のようにメモが書いてある部分＋</script>までです。
<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="……"></script>
わたしは記事下の枠に追加していました。（ちゃんと記事にしてた過去の自分偉い）
サイトよりコードをコピー
以下のサイトを参考にボタン設置しなおします。
CSSいじるの久しぶりすぎて怖い。
参考というかコピペです。
はてなブログはカスタマイズを記事にしてくれる方がたくさんいらっしゃるので、マジで扱いやすいですね。
アイコンについて（はてなブログアイコン素材）
はてなブログのカスタマイズでは、font-awesomeを導入する記事が多いのです。
しかし、当ブログでは使用していません。
ダッシュボードの設定→詳細設定→headに要素を追加で追加するとなぜか上手く表示されないためです。トップのアイキャッチが表示されなくなったり、サイト全体のデザインが崩れたりします。理由は不明です……（たぶん他にもいろいろheadに記載しているので、読み込みの順番とかが関係しているのでは、と思っています。）
というわけで、当ブログでは、はてなブログ提供で外部から読み込む必要のないアイコンを使っています。
順番に貼る
まず、HTMLを貼ります。
（コードは先述したとおり、コピペで簡単！はてなブログのSNSシェアボタンをカスタマイズ | SHIROMAG から好きなデザインを選んでコピペです。）
わたしは記事下に表示させたいので、
ダッシュボード→デザイン→カスタマイズ→記事→記事下
に貼りました。
この時点では、アイコン（はてブとTwitterのみ）が白黒表示されますが、デザインはCSSを貼ることで反映されるので気にせず進めます。
CSSを貼ります。
ダッシュボード→デザイン→カスタマイズ→デザインCSS
にペタリ。デザインが反映されます。
アイコンが希望のデザインで表示されているはずです。
アイコン設定を変える
はてなブログでのアイコン指定をしたい場合、アイコン部分のコードを変更します。
それぞれのリンクで
- <i class="blogicon-bookmark lg"></i>
- <i class="fa fa-facebook-square lg"></i>
- <i class="blogicon-twitter lg"></i>
- <i class="fa fa-get-pocket"></i>
というコードがアイコン設定部分です。
はてブとTwitterは、font-awesomeとはてなブログアイコンでコードが同じなので、すでに表示されています。
FacebookとPocketのHTMLのアイコン部分を変更します。
- <i class="fa fa-facebook-square lg"></i> → <i class="blogicon-facebook lg"></i>
- <i class="fa fa-get-pocket"></i> → <i class="blogicon-chevron-down lg"></i>
ポケットははてなアイコンになかったので似た感じのにしてみましたｗｗ
適当すぎる……
まじめにやりたい方は、リンク先をevernoteにすれば、はてなアイコンにevernoteの象さんがあるので、ちゃんとリンク先とアイコンが合います。
シェアボタン設置しても実際稼働するのは、はてブとTwitterくらいなので、まぁよしとします。
まとめ
AddThisサービスが終了してビックリしましたが、調べたらすぐに他のシェアボタン設置がありました。
はてなブログは本当に初心者に優しいです。
シェアボタンが表示されなくなった方は、ぜひお試しください。
