【Hugoカスタマイズ】記事下にX(Twitter)やFacebookの「SNSシェアボタン」を自作して設置する方法

<a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}">
    Xでシェア
</a>

<div class="share-buttons">
    <p>この記事をシェアする</p>
    <a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer" class="share-btn twitter">
        X (Twitter)
    </a>
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer" class="share-btn facebook">
        Facebook
    </a>
    <a href="https://b.hatena.ne.jp/entry/{{ .Permalink }}" target="_blank" rel="noopener noreferrer" class="share-btn hatena">
        はてな
    </a>
</div>

<style>
/* 存在感を消したミニマルデザイン */
.share-buttons {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
    text-align: center;
}
.share-buttons p {
    font-size: 0.85rem;
    color: #999;
}
.share-btn {
    display: inline-block;
    padding: 0.4rem 1rem;
    margin: 0 0.3rem;
    color: #666;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    border-radius: 99px;
    font-size: 0.8rem;
}
.share-btn:hover {
    color: #333;
    border-color: #999;
}
</style>

    <div class="post-content">
        {{ .Content }}
    </div>

    <!-- ここに追加！ -->
    {{ partial "share-buttons.html" . }}