くぜのメモ

メモのように色々なことを書いていく雑記ブログ

【はてなブログ】シェアボタンをカスタマイズする

今回は、シェアボタンのカスタマイズを行ったので、備忘録がてら、カスタマイズしたシェアボタンの設置方法について紹介します。シェアボタン自体は記事の末尾に設置しているので、使用感を確かめたい方は参考にしてください。

事前準備

デフォルトのシェアボタンの非表示

「デザイン」→「カスタマイズ」→「記事」→「ソーシャルパーツ」から、はてなブログで用意されているデフォルトのシェアボタンを非表示に設定します。

Font Awesome CDNの利用

今回紹介する方法は、各SNSのアイコン表示にFont Awesomeを使用します。
「設定」→「詳細設定」→「head内タグ」→「要素にメタデータを追加」から、Font AwesomeのSDNを読み込む以下のコードのどちらか1つを設置します。

<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;
}

まとめ

以上、シェアボタンカスタマイズの紹介でした。

最後に、参考にしたサイトのリンクを記載しておきます。
参考 → コピペで簡単!はてなブログのSNSシェアボタンをカスタマイズ | SHIROMAG