SNSシェアボタンをカスタマイズする（Next.js）

Next.js

microCMS

2025/10/18

2026/01/31

PRを含みます

SNSコンポーネントの作成方法

以前以下の記事で紹介しましたので参考にしてください。こちらをベースにカスタマイズをしました。

Next.jsで記事下に SNSシェアボタンを作る

完成系イメージ

このようなイメージで、左から「X」、「Facebook」、「はてなブックマーク」、「Mastodon」、「Bluesky」、「note」になります

カスタマイズ方法

SNSコンポーネントを以下のように変更しました。

import Image from "next/image";
import styles from "./index.module.css";

type Props = {
  id: string;
  title: string;
};

export const Share: React.FC<Props> = ({ id, title }) => {
  if (!id || !title) return null;

  const url = `https://hogehoge/blog/${id}/`;

  const twitterLink = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
    title
  )}&url=${url}`;
  const facebookLink = `https://www.facebook.com/sharer.php?u=${url}`;
  const hatenaLink = `https://b.hatena.ne.jp/entry/${url}`;
  const mastodonLink = `https://toot.kytta.dev/share?text=${encodeURIComponent(
    `${title}\n${url}`
  )}`;
  const blueskyLink = `https://bsky.app/intent/compose?text=${encodeURIComponent(
    `${title} ${url}`
  )}`;
  const noteLink = `https://note.mu/intent/post?url=${encodeURIComponent(url)}`;

  return (
    <div className={styles.share}>
      <h3 className={styles.sharetitle}>＼　この記事をシェアする　／</h3>
      <ul className={styles.shareul}>
        <li>
          <a
            href={twitterLink}
            className={`${styles.sharebutton} ${styles.sharex}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              src="/icon_x.svg"
              alt="Xでシェアする"
              width={22}
              height={22}
              className={styles.icon}
            />
          </a>
        </li>
        <li>
          <a
            href={facebookLink}
            className={`${styles.sharebutton} ${styles.sharefb}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              src="/icon_facebook.svg"
              alt="Facebookでシェアする"
              width={22}
              height={22}
              className={styles.icon}
            />
          </a>
        </li>
        <li>
          <a
            href={hatenaLink}
            className={`${styles.sharebutton} ${styles.sharehatena}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              src="/icon_hatena.svg"
              alt="はてなブックマークする"
              width={22}
              height={22}
              className={styles.icon}
            />
          </a>
        </li>
        <li>
          <a
            href={mastodonLink}
            className={`${styles.sharebutton} ${styles.sharemstdn}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              src="/icon_mastodon.svg"
              alt="Mastodonでシェアする"
              width={22}
              height={22}
              className={styles.icon}
            />
          </a>
        </li>
        <li>
          <a
            href={blueskyLink}
            className={`${styles.sharebutton} ${styles.sharebsky}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              src="/icon_bluesky.svg"
              alt="Blueskyでシェアする"
              width={22}
              height={22}
              className={styles.icon}
            />
          </a>
        </li>
        <li>
          <a
            href={noteLink}
            className={`${styles.sharebutton} ${styles.sharenote}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              src="/icon_note.svg"
              alt="noteでシェアする"
              width={22}
              height={22}
              className={styles.icon}
            />
          </a>
        </li>
      </ul>
    </div>
  );
};

export default Share;

CSSは以下のようにしています

.share {
  background-color: #f7f7fc;
  border-radius: 5px;
  margin-top: 40px;
  padding: 24px;
}

.sharetitle {
  color: var(--color-text-sub);
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 16px;
  text-align: center;
}

.shareul {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 丸いボタンに変更 */
.sharebutton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: opacity 0.2s ease;
  text-decoration: none;
}

.sharebutton:hover {
  opacity: 0.8;
}

/* 各SNSカラー */
.sharex {
  background-color: #000; /* X */
}

.sharefb {
  background-color: #1877f2; /* Facebook */
}

.sharehatena {
  background-color: #00a4de; /* はてな */
}

.sharemstdn {
  background-color: #6364ff; /* Mastodon */
}

.sharebsky {
  background-color: #1185fe; /* Bluesky */
}

.sharenote {
  background-color: #41c9b4; /* note */
}

/* アイコン */
.icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: #fff !important;
}

/* スマホ時の調整 */
@media (max-width: 768px) {
  .shareul {
    flex-wrap: wrap;
    gap: 12px;
  }

  .sharebutton {
    width: 40px;
    height: 40px;
  }

  .icon {
    width: 20px;
    height: 20px;
  }
}

まとめ

今回、ある程度狙った通りに修正できて満足している。日経リスキリングというサイトのSNSアイコンの見せ方がかっこよかったので参考にさせてもらった。今回の修正をするにあたってSVGが必要になるので、Font AwesomeやBootstrap iconsなどからSVGをダウンロードするのもよいと思う。今回、noteに飛べるようにリンクを作ってみたが、note側でカード表示されないので表示できるように今後カスタマイズもしていきたいと思う。