シェアボタン群（X / FB / LINE / コピー）
シェアボタン群は、記事の下に置く X・Facebook・LINE・URL コピーの4つの円形ボタンをまとめた CSS 部品です。各ボタンは border-radius:50% で円にし、ブランド色を背景に白文字を display:grid;place-items:center で中央寄せしています。
解説
シェアボタン群は、記事の下に置く X・Facebook・LINE・URL コピーの4つの円形ボタンをまとめた CSS 部品です。各ボタンは border-radius:50% で円にし、ブランド色を背景に白文字を display:grid;place-items:center で中央寄せしています。ホバーすると transform:translateY(-3px) で少し浮き上がる動きが付きます。URL コピーのボタンだけは小さな JavaScript を持ち、押すとチェックマークに変わって1.5秒後に元へ戻り、コピー完了を視覚的に知らせます。
使う場面
- ブログ記事やニュースの末尾に SNS 共有導線を置きたいとき
- キャンペーンページの拡散を促したいとき
- 商品ページで友人への共有を後押ししたいとき
色は --x（黒）、--fb（青）、--line（緑）と各社のブランドカラーに合わせてあります。実運用では各ボタンの href="#" を、実際の共有 URL に差し替えてください。アクセシビリティのため aria-label で各ボタンの役割を補足しています。記号で表したアイコンは、必要なら各社の公式ロゴ SVG に置き換えると正式な見た目になります。
よくある質問
実際にシェアされるようにするには何が必要ですか。
各ボタンの href="#" を本物の共有 URL に置き換えます。X や LINE は共有用のエンドポイントに、シェア対象ページの URL とテキストをパラメータとして渡す形にします。
URL コピーのボタンだけ動きが違うのはなぜですか。
コピーボタンは押した瞬間にチェックマークへ変わり、1.5秒後に元のアイコンへ戻る JavaScript が組み込まれているためです。コピー完了を利用者に伝える視覚的な合図です。