今回は、シェアボタンのカスタマイズを行ったので、備忘録がてら、カスタマイズしたシェアボタンの設置方法について紹介します。シェアボタン自体は記事の末尾に設置しているので、使用感を確かめたい方は参考にしてください。
事前準備
デフォルトのシェアボタンの非表示
「デザイン」→「カスタマイズ」→「記事」→「ソーシャルパーツ」から、はてなブログで用意されているデフォルトのシェアボタンを非表示に設定します。
Font Awesome CDNの利用
今回紹介する方法は、各SNSのアイコン表示にFont Awesomeを使用します。
「設定」→「詳細設定」→「head内タグ」→「
<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>
※上記どちらか1つを設置します。バージョンは2022/10/31現在の最新であるため、必要に応じてURLを変更してください。
シェアボタンのコード
今回紹介するコードでは、「はてなブックマーク」「facebook」「Twitter」「pocket」の4つのシェアボタンを設置しています。LINE等ほかのSNSのリンクを表示したい場合は、別途用意する必要があります。
HTML
「デザイン」→「カスタマイズ」から、「記事上」「記事下」「記事本文末尾」などに以下コードを配置します。
<div class="share-button"> <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="share-button-item share-button-item-hatebu" target="_blank"><i class="blogicon-bookmark lg"></i></a> <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share-button-item share-button-item-facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><i class="fa-brands fa-facebook"></i></a> <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-button-item share-button-item-twitter" target="_blank"><i class="fa-brands fa-twitter"></i></a> <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-button-item share-button-item-pocket" target="_blank"><i class="fa-brands fa-get-pocket"></i></a> </div>
CSS
「デザイン」→「カスタマイズ」→「デザインCSS」から、以下コードを配置します。
.share-button { display: flex; justify-content: space-between; } .share-button-item { width: 24%; height: 40px; color: #ffffff; font-size: 16px; text-align: center; line-height: 40px; border-radius: 4px; transition: all .3s; } .share-button-item-hatebu { background-color: #00a4de; box-shadow: 0 4px #038ebf; } .share-button-item-facebook { background-color: #1778f2; box-shadow: 0 4px #1366ce; } .share-button-item-twitter { background-color: #1ba1f3; box-shadow: 0 4px #1280c3; } .share-button-item-pocket { background-color: #ef4155; box-shadow: 0 4px #c3293b; } .share-button-item:hover { color: #ffffff; transform: translateY(4px); box-shadow: 0 0 #333333; }