はんこキャプターやぁのん

好きなものを堂々と好きでいたい。私の興味を綴るブログ。

  ↓各ジャンルの他ブログが読めます↓
にほんブログ村 その他趣味ブログへ にほんブログ村 コレクションブログ スタンプ・風景印へ にほんブログ村 鉄道ブログ 鉄道ぶらり旅へ にほんブログ村 その他趣味ブログ その他珍しい趣味へ

記事のすぐ下に共有ボタンを配置

記事名と
URLをコピー

カスタマイズしたシェアボタンを、記事に設置しました。
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>
<!-- シェアボタンここまで -->

微調整

アイコンのフォントサイズを少し大きくしました。

また、実際のTwitterシェアボタンは、以下のようにしています。
{Title} @アカウント {URLEncodedPermalink}
「アカウント」を自分のアカウントにしています。このボタンでシェアしてもらえたら、自分のTwitterにも通知が来るかな?という企み(笑)です。

独学でいじっているので、使うのは自己責任でお願いします。
もし、間違っているところ、アドバイス等あれば、教えていただけますと幸いです。