記事のすぐ下に共有ボタンを配置 - はんこキャプターやぁのん

カスタマイズしたシェアボタンを、記事に設置しました。
f:id:yaanon:20210109183234j:plain
以前、シェアボタンは付けないかも（下の記事参照）と書いたことがあったのですが、はてなブログの元々のシェアボタンは表示が重いと感じて。試してみることにしました。
yaanon.hatenablog.com
ただ、例によって、また自分でいろいろ組み合わせてしまいました。付けたいとおりのボタンを見つけられないなんて、我ながら欲張り。
素人なので、あちこちずっと調べていて、やっと設置することを決めました。

参考サイト
コード
- 微調整

参考サイト

記事にして教えて下さった方々に感謝。

記事の直下にボタンを設置したい

【はてなブログ】記事本文の直下にアドセンスを設置する方法 - チップの日常
↑こちらのコードを使わせていただきました。
このおかげで、シェアボタンが関連記事などの下に埋もれず表示できるようにできました。

ロゴの新カラーを反映させたい

LINE新カラーにも対応！シェアボタンをテーマCappuccinoに設置しました - フジブロっ！
↑2019年にfacebookのロゴとカラーが変更されたこと、2020年にLINEのカラーが変更されたこと、それをシェアボタンにも反映させることについては、こちらのサイトを参考にしました。
新アイコンのコードも、こちらを参考に使わせていただきました。

Facebookブランドリソースセンター - アセットおよびブランドガイドライン
↑Facebookロゴ等のガイドラインです。

【2020年更新】Facebookロゴが新しくなりました（新旧比較画像・ダウンロードリンクあり）
↑Facebookロゴの新旧比較、カラーコード等を参考にさせていただきました。

「LINEの色、変わった？」その理由はコチラで語られています｜LINEクリエイティブセンター
↑LINE新カラーは公式サイトを参考にしました。

マウスオーバー時に名前を出したい

LINE新カラーにも対応！シェアボタンをテーマCappuccinoに設置しました - フジブロっ！
↑先述のサイトです。コードの内容も参考にさせていただいています。

コードを一か所にまとめたい

コピペで簡単！はてなブログのSNSシェアボタンをカスタマイズ | SHIROMAG
↑レスポンシブ非対応の場合の方法を使いました。
シェアボタンは、こちらの9番を使用させていただきました。デザインの種類がたくさんあって、ありがたいです。

その他参考サイト

rel属性「nofollow」「noreferrer」「noopener」の学び直し | ARAIGUMA NOTE
nofollowの使い方
 WordPress「target=”_blank”」時に付く「noreferrer」だけを自動で除去する方法（noopener は残す） | Tanweb.net

rel属性「nofollow」「noreferrer」「noopener」とは？
フジブロっ！さんのコードに付いていたので、気になって調べました。ざっくりまとめると、セキュリティーとかSEO対策とかのコードみたいですね。

コード

記事下HTML欄に記述しました。

<!--記事直下にシェアボタンを表示する-->
<div id="my-footer">
<!--シェアラベル-->
　<div class="share_label">＼共有ボタンです／</div>
<!-- ここからシェアボタン -->
<div class="share-btn-type9">
  <!--はてなブックマーク-->
    <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="はてなブックマークに追加" class="share-btn__item share-btn__item--hatebu" target="_blank" rel="nofollow noopener"><i class="blogicon-bookmark lg"></i></a>
  <!--Facebook-->
    <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share-btn__item share-btn__item--facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title="Facebookでシェア" target="_blank" rel="nofollow noopener"><i class="fab fa-facebook"></i></a>
  <!--Twitter-->
    <a href="http://twitter.com/intent/tweet?text={Title} @yaanon_21 {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" title="Twitterでシェア" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a>
  <!--LINE-->
    <a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--line" title="LINEで送る" target="_blank" rel="nofollow noopener"><i class="fab fa-line"></i></a>
</div>

<style>
/*シェアラベルデザイン*/
.share_label {
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
}
/*シェアボタンデザイン*/
.share-btn-type9 {
  max-width: 210px;
  margin: 1.2em auto;
  display: flex;
  justify-content: space-between;
}
.share-btn-type9 .share-btn__item {
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 22px;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  transition: all .3s;
  box-shadow: 0 2px 4px rgba(0,0,0,.14);
  transition: all .3s;
  border: 1px solid transparent;
}
.share-btn-type9 .share-btn__item:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.share-btn-type9 .share-btn__item--hatebu {
  color: #00A4DE;
}
.share-btn-type9 .share-btn__item--facebook {
  color: #1877f2;
}
.share-btn-type9 .share-btn__item--twitter {
  color: #1BA1F3;
}
.share-btn-type9 .share-btn__item--line {
  color: #06C755;
  font-size: 25px;
}
</style>
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
<!-- シェアボタンここまで -->