ブログ記事の最後に「シェアしてね」ボタンを置きたいけれど、プラグインを入れるほどでもない、と感じたことはありませんか。
この記事では、コピペするだけで使えるSNSシェアボタンを20個まとめました。
丸型、四角、テキスト付き、縦並びなど、サイトのデザインに合わせて選べる種類を用意しています。
パンくず・区切り線の記事と同じく、HTMLとCSSを分けて掲載しています。
今回も20個、結構なボリュームだね！
うん、使い方だけ先に説明するから、そのあとは気になるところから見てね。
使い方｜HTMLとCSSをそれぞれ貼り付ける
CSSのコードを、サイトのスタイルシートに追加します。
続いて、HTMLのコードを、記事の最後などシェアボタンを置きたい場所に貼り付けます。
この記事のコードは見た目のみです。実際にX（旧Twitter）やLINEなどでシェアできるようにするには、各サービスのシェア用URL（例：X なら https://twitter.com/intent/tweet?url=… ）を、リンク先（href）に設定する必要があります。
18番のコピーボタンも、実際にURLをコピーする機能はJavaScriptで別途実装してください。
01. シンプル丸アイコンボタン
単色の背景に、サービス名の頭文字を乗せた基本形です。
実際の見た目
HTMLコード
<div class="kts-share01"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="Facebookでシェア">f</a> <a href="#" aria-label="LINEでシェア">L</a> </div>CSSコード
.kts-share01 { display: flex; gap: 8px; font-family: sans-serif; } .kts-share01 a { width: 36px; height: 36px; line-height: 36px; text-align: center; background: #1F2933; color: #fff; border-radius: 50%; text-decoration: none; font-weight: 700; font-size: 14px; }02. アウトライン丸ボタン
枠線だけのシンプルな、控えめなシェアボタンです。
実際の見た目
HTMLコード
<div class="kts-share02"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="Facebookでシェア">f</a> </div>CSSコード
.kts-share02 { display: flex; gap: 8px; font-family: sans-serif; } .kts-share02 a { width: 36px; height: 36px; line-height: 33px; text-align: center; border: 2px solid #8A94A0; color: #8A94A0; border-radius: 50%; text-decoration: none; font-weight: 700; font-size: 14px; }03. サービスカラーの四角ボタン
各SNSのイメージカラーを使った、四角いボタンです。
実際の見た目
HTMLコード
<div class="kts-share03"> <a class="x" href="#" aria-label="Xでシェア">X</a> <a class="fb" href="#" aria-label="Facebookでシェア">f</a> <a class="line" href="#" aria-label="LINEでシェア">LINE</a> </div>CSSコード
.kts-share03 { display: flex; gap: 8px; font-family: sans-serif; } .kts-share03 a { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 13px; } .kts-share03 .x { background: #000; } .kts-share03 .fb { background: #1877F2; } .kts-share03 .line { background: #06C755; }04. テキスト付きシェアボタン
アイコンと「シェアする」の文字をセットにしたボタンです。
実際の見た目
XでシェアするHTMLコード
<a class="kts-share04" href="#"> <span aria-hidden="true">↗</span>Xでシェアする </a>CSSコード
.kts-share04 { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #1F2933; color: #fff; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600; font-family: sans-serif; }05. ホバーで浮き上がるボタン
カーソルを合わせると、影が広がって浮き上がるボタンです。
実際の見た目
HTMLコード
<div class="kts-share05"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="はてなブックマーク">B</a> </div>CSSコード
.kts-share05 { display: flex; gap: 10px; font-family: sans-serif; } .kts-share05 a { width: 36px; height: 36px; line-height: 36px; text-align: center; background: #fff; border: 1px solid #E4E4E4; color: #444; border-radius: 50%; text-decoration: none; font-weight: 700; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; } .kts-share05 a:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,0.14); }06. ホバーでブランドカラーになるボタン
普段はグレーで、カーソルを合わせるとサービスの色に変わります。
実際の見た目
HTMLコード
<div class="kts-share06"> <a class="x" href="#" aria-label="Xでシェア">X</a> <a class="line" href="#" aria-label="LINEでシェア">L</a> </div>CSSコード
.kts-share06 { display: flex; gap: 8px; font-family: sans-serif; } .kts-share06 a { width: 36px; height: 36px; line-height: 36px; text-align: center; background: #E4E7EB; color: #8A94A0; border-radius: 50%; text-decoration: none; font-weight: 700; font-size: 14px; transition: background 0.2s ease, color 0.2s ease; } .kts-share06 a:hover { color: #fff; } .kts-share06 .x:hover { background: #000; } .kts-share06 .line:hover { background: #06C755; }07. 角丸四角のボタン列
角丸の四角いボタンを、横に並べた形です。
実際の見た目
HTMLコード
<div class="kts-share07"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="Facebookでシェア">f</a> <a href="#" aria-label="はてなブックマーク">B!</a> </div>CSSコード
.kts-share07 { display: flex; gap: 6px; font-family: sans-serif; } .kts-share07 a { width: 36px; height: 36px; line-height: 36px; text-align: center; background: #1F2933; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 13px; }08. 縦並びのフローティングシェアボタン
サイドバーに固定して使う、縦に並ぶタイプです。
実際の見た目
HTMLコード
<div class="kts-share08"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="Facebookでシェア">f</a> <a href="#" aria-label="LINEでシェア">L</a> </div>CSSコード
.kts-share08 { display: inline-flex; flex-direction: column; gap: 8px; font-family: sans-serif; } .kts-share08 a { width: 40px; height: 40px; line-height: 40px; text-align: center; background: #fff; border: 1px solid #E4E4E4; color: #444; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }09. シェア数付きボタン
アイコンの下に、シェア数を表示するタイプです。
実際の見た目
128HTMLコード
<a class="kts-share09" href="#"> <span class="ico" aria-hidden="true">X</span> <span class="count">128</span> </a>CSSコード
.kts-share09 { display: inline-flex; flex-direction: column; align-items: center; width: 52px; text-decoration: none; font-family: sans-serif; } .kts-share09 .ico { width: 36px; height: 36px; line-height: 36px; text-align: center; background: #000; color: #fff; border-radius: 50%; font-weight: 700; font-size: 14px; } .kts-share09 .count { margin-top: 4px; font-size: 11px; color: #8A94A0; }10. グラデーション背景の目立つボタン
グラデーションを使った、視認性の高いシェアボタンです。
実際の見た目
シェアするHTMLコード
<a class="kts-share10" href="#">シェアする</a>CSSコード
.kts-share10 { display: inline-block; padding: 12px 28px; background: linear-gradient(135deg, #6C63FF, #3F8CFF); color: #fff; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 700; font-family: sans-serif; }11. 見出し付きシェアボタン群
「この記事をシェアする」という見出しと、ボタンをセットにした形です。
実際の見た目
この記事をシェアする
HTMLコード
<div class="kts-share11"> <p class="heading">この記事をシェアする</p> <div class="buttons"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="Facebookでシェア">f</a> <a href="#" aria-label="LINEでシェア">L</a> </div> </div>CSSコード
.kts-share11 { text-align: center; font-family: sans-serif; } .kts-share11 .heading { font-size: 13px; color: #8A94A0; margin: 0 0 10px; } .kts-share11 .buttons { display: flex; justify-content: center; gap: 10px; } .kts-share11 a { width: 36px; height: 36px; line-height: 36px; text-align: center; background: #1F2933; color: #fff; border-radius: 50%; text-decoration: none; font-weight: 700; }12. ミニマルなテキストのみリンク
アイコンを使わず、テキストだけでシェアを促す形です。
実際の見た目
この記事をXでシェアする ›HTMLコード
<a class="kts-share12" href="#">この記事をXでシェアする ›</a>CSSコード
.kts-share12 { color: #3F8CFF; font-size: 14px; text-decoration: none; font-family: sans-serif; } .kts-share12:hover { text-decoration: underline; }13. 影付き立体シェアボタン
しっかりとした影を付けて、押せることが伝わるボタンです。
実際の見た目
HTMLコード
<div class="kts-share13"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="LINEでシェア">L</a> </div>CSSコード
.kts-share13 { display: flex; gap: 12px; font-family: sans-serif; } .kts-share13 a { width: 40px; height: 40px; line-height: 40px; text-align: center; background: #fff; color: #1F2933; border-radius: 10px; text-decoration: none; font-weight: 700; box-shadow: 0 4px 0 #D8DCE1; transition: transform 0.1s ease, box-shadow 0.1s ease; } .kts-share13 a:active { transform: translateY(4px); box-shadow: 0 0 0 #D8DCE1; }14. 二色使いのシェアボタン
アイコン部分だけ白抜きにした、ブランドカラー2色のボタンです。
実際の見た目
LINEで送るHTMLコード
<a class="kts-share14" href="#"> <span class="ico" aria-hidden="true">L</span>LINEで送る </a>CSSコード
.kts-share14 { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; background: #06C755; color: #fff; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 700; font-family: sans-serif; } .kts-share14 .ico { width: 26px; height: 26px; line-height: 26px; text-align: center; background: #fff; color: #06C755; border-radius: 50%; font-size: 13px; }15. 大きめのタップしやすいボタン
スマホでの操作を考えた、大きめサイズのボタンです。
実際の見た目
HTMLコード
<div class="kts-share15"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="LINEでシェア">L</a> </div>CSSコード
.kts-share15 { display: flex; gap: 14px; font-family: sans-serif; } .kts-share15 a { width: 52px; height: 52px; line-height: 52px; text-align: center; background: #1F2933; color: #fff; border-radius: 50%; text-decoration: none; font-weight: 700; font-size: 16px; }16. ダークテーマのシェアボタン
暗い背景に合わせた配色のシェアボタンです。
実際の見た目
HTMLコード
<div class="kts-share16"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="Facebookでシェア">f</a> </div>CSSコード
.kts-share16 { display: flex; gap: 8px; font-family: sans-serif; } .kts-share16 a { width: 36px; height: 36px; line-height: 34px; text-align: center; background: #2E343B; border: 1px solid #454C54; color: #E6E9EC; border-radius: 50%; text-decoration: none; font-weight: 700; font-size: 13px; }17. ホバーで回転するアイコンボタン
カーソルを合わせると、アイコンが少し回転するボタンです。
実際の見た目
HTMLコード
<div class="kts-share17"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="Facebookでシェア">f</a> </div>CSSコード
.kts-share17 { display: flex; gap: 10px; font-family: sans-serif; } .kts-share17 a { width: 36px; height: 36px; line-height: 36px; text-align: center; background: #3F8CFF; color: #fff; border-radius: 50%; text-decoration: none; font-weight: 700; display: inline-block; transition: transform 0.25s ease; } .kts-share17 a:hover { transform: rotate(-12deg) scale(1.08); }18. URLコピーボタン
リンクをコピーして共有したい時のためのボタンです。
実際の見た目
HTMLコード
<button type="button" class="kts-share18"> <span aria-hidden="true">🔗</span>リンクをコピー </button>CSSコード
.kts-share18 { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: #F1F3F5; color: #444; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: sans-serif; } .kts-share18:hover { background: #E4E7EB; }19. LINEで送るボタン風
日本のブログでよく使われる、LINE共有向けのボタンです。
実際の見た目
LINEで送るHTMLコード
<a class="kts-share19" href="#"> <span aria-hidden="true">💬</span>LINEで送る </a>CSSコード
.kts-share19 { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #06C755; color: #fff; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 700; font-family: sans-serif; }20. まとめてシェアを促す全幅バナー
記事の最後に置く、帯状の大きなシェアエリアです。
実際の見た目
この記事が役に立ったら、シェアしていただけると嬉しいです。
HTMLコード
<div class="kts-share20"> <p>この記事が役に立ったら、シェアしていただけると嬉しいです。</p> <div class="buttons"> <a href="#" aria-label="Xでシェア">X</a> <a href="#" aria-label="Facebookでシェア">f</a> <a href="#" aria-label="LINEでシェア">L</a> </div> </div>CSSコード
.kts-share20 { width: 100%; max-width: 400px; padding: 24px; text-align: center; background: #F9FAFB; border-radius: 10px; font-family: sans-serif; } .kts-share20 p { font-size: 13px; color: #666; margin: 0 0 14px; } .kts-share20 .buttons { display: flex; justify-content: center; gap: 10px; } .kts-share20 a { width: 40px; height: 40px; line-height: 40px; text-align: center; background: #1F2933; color: #fff; border-radius: 50%; text-decoration: none; font-weight: 700; }カスタマイズの小ワザ
- この記事のコードは見た目のみです。実際にシェアできるようにするには、各サービスのシェア用URLをhrefに設定してください。
- 18番のコピーボタンは、クリックでURLをコピーする動作にJavaScriptが必要です。
- 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。ブランドカラーを変えると、どのサービスか分かりにくくなる場合があるので注意してください。
- 08番の縦並びは、サイドバーに固定表示（position: fixedなど）したい場合に使いやすい形です。
- アイコン部分は文字（X・fなど）で代用しています。実際のロゴ画像を使いたい場合は、各サービスの提供するアイコンを利用規約に沿って使用してください。
まとめ｜早見表
| 用途 | 該当するボタン |
|---|---|
| シンプル・定番 | 01, 02, 03, 07 |
| テキストで伝える | 04, 12 |
| 動き・インタラクション | 05, 06, 17 |
| 目立たせたい | 09, 10, 13, 15 |
| サイドバー向け | 08 |
| LINE共有向け | 14, 19 |
| 記事末尾のまとめ | 11, 20 |
| リンクコピー | 18 |
ブログの最後に、これを置いておきたいな！
うん、実際にシェアできるようにするには、各SNSのシェア用URLの設定も忘れずにね。パンくずリストの記事と組み合わせて、サイト全体を整えてみて。
20個のシェアボタンは、丸型・四角・テキストなど見た目のバリエーションを用意した。実際にシェアできるようにするには、各サービスのシェア用URLの設定が別途必要である。
※本記事のコードは2026年9月時点の主要ブラウザでの表示を想定しています。実際のシェア機能には、各サービスのシェア用URLの設定が別途必要です。
