From e38067cd97e0a8cb0ad30208a61c0fe1b3869bee Mon Sep 17 00:00:00 2001
From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>
Date: Thu, 25 Jun 2026 14:03:21 +0900
Subject: シェアボタン: LINE削除、URLコピー追加、コンテンツ直後に移動
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- LINE共有ボタンを削除、代わりにURLコピーボタンを追加
- シェアボタンをフッター→コンテンツ直後に移動
- ボタンに枠線・ラベルテキストを追加して視認性を向上
- 「このページを共有: [X] [Facebook] [URLコピー]」形式に
---
 src/components/SocialShare.astro | 50 ++++++++++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 12 deletions(-)

(limited to 'src/components/SocialShare.astro')

diff --git a/src/components/SocialShare.astro b/src/components/SocialShare.astro
index a818822..bb6c04f 100644
--- a/src/components/SocialShare.astro
+++ b/src/components/SocialShare.astro
@@ -25,53 +25,79 @@ const SHARE_LINKS = [
     svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>',
   },
   {
-    label: "LINE",
-    href: `https://social-plugins.line.me/lineit/share?url=${encodedUrl}`,
-    svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h2"/><path d="M6 8v8"/><path d="M10 6v12"/><path d="M14 9.5V20"/><path d="M18 6v12"/><path d="M22 8v8"/></svg>',
+    label: "URLコピー",
+    href: "#",
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>',
   },
 ];
 ---
 
 <div class="social-share">
-  <span class="social-share-label">Share:</span>
+  <span class="social-share-label">このページを共有:</span>
   {SHARE_LINKS.map((link) => (
     <a
       href={link.href}
-      target="_blank"
+      target={link.label === "URLコピー" ? undefined : "_blank"}
       rel="noopener noreferrer"
       class="social-share-btn"
       title={`${link.label}で共有`}
+      data-action={link.label === "URLコピー" ? "copy" : undefined}
     >
       <span set:html={link.svg} />
+      {link.label}
     </a>
   ))}
 </div>
 
+<script>
+  document.currentScript?.parentElement?.addEventListener("click", (e) => {
+    const btn = e.target.closest?.("[data-action='copy']");
+    if (btn) {
+      e.preventDefault();
+      navigator.clipboard.writeText(location.href).then(() => {
+        btn.title = "コピーしました！";
+        btn.classList.add("copied");
+        setTimeout(() => {
+          btn.title = "URLコピーで共有";
+          btn.classList.remove("copied");
+        }, 2000);
+      });
+    }
+  });
+</script>
+
 <style>
   @layer starlight.core {
     .social-share {
       display: flex;
       align-items: center;
       gap: 0.5rem;
-      margin-top: 2rem;
-      padding-top: 1rem;
-      border-top: 1px solid var(--sl-color-gray-5);
+      margin-bottom: 1rem;
     }
     .social-share-label {
       font-size: 0.85rem;
       color: var(--sl-color-gray-2);
     }
     .social-share-btn {
-      color: var(--sl-color-gray-2);
-      padding: 0.35rem;
-      border-radius: 4px;
-      transition: color 0.2s, background 0.2s;
       display: flex;
       align-items: center;
+      gap: 0.3rem;
+      padding: 0.3rem 0.6rem;
+      border-radius: 6px;
+      border: 1px solid var(--sl-color-gray-5);
+      color: var(--sl-color-gray-2);
+      font-size: 0.8rem;
+      text-decoration: none;
+      transition: color 0.2s, background 0.2s, border-color 0.2s;
     }
     .social-share-btn:hover {
       color: var(--sl-color-white);
       background: var(--sl-color-gray-5);
+      border-color: var(--sl-color-gray-3);
+    }
+    .social-share-btn.copied {
+      color: var(--sl-color-green-high, #16a34a);
+      border-color: var(--sl-color-green-high, #16a34a);
     }
   }
 </style>
-- 
cgit v1.3.1