シェアボタンジェネレータ

HTMLと最小限のCSSをまとめて出力します。必要に応じてクラス名や色をサイト側のデザインに合わせて調整してください。

<div class="share-buttons" aria-label="プレビュー">
  <a class="share-button share-button--x" href="https://twitter.com/intent/tweet?text=TOOLPOOL&amp;url=https%3A%2F%2Ftoolpool.tools%2F" target="_blank" rel="noopener noreferrer">X</a>
  <a class="share-button share-button--facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftoolpool.tools%2F" target="_blank" rel="noopener noreferrer">Facebook</a>
  <a class="share-button share-button--line" href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Ftoolpool.tools%2F&amp;text=TOOLPOOL" target="_blank" rel="noopener noreferrer">LINE</a>
</div>

<style>
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  font: 700 14px/1 system-ui, sans-serif;
  padding: 0 16px;
  text-decoration: none;
}

.share-button--x { background: #111; }
.share-button--facebook { background: #1877f2; }
.share-button--line { background: #06c755; }
.share-button--linkedin { background: #0a66c2; }
.share-button--email { background: #555; }
</style>